JavaScript 验证 API中的setCustomValidity()方法
Posted 哈佬
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 验证 API中的setCustomValidity()方法相关的知识，希望对你有一定的参考价值。
setCustomValidity()方法：
设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。
注意：使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成true，则 checkValidity() 总是会返回false，导致无论重新输入的格式正确与否，都会提示设置好的错误信息。
解决办法：用obj.validity.patternMismatch判断，如果输入的格式正确，就将setCustomValidity 清空，使javascript重新判断validity.customError的值。
参考：http://www.runoob.com/js/js-validation-api.html
在该链接中，提到三种清空setCustomValidity的方法，但经过测试，只有第一种方法setCustomValidity(‘‘)可以使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>未使用setCustomValidity()方法</title>
</head>
<body>
<form name="test" action="" method="post">
<input id="input" type="text" required="required" placeholder="请输入4-11位字母加数字的密码" pattern="^(?![0-9]+$)(?![a-zA-Z]+$)[0-9a-zA-Z]{4,14}$" oninput="this.setCustomValidity(‘‘)">
<input type="submit" onclick="setMyText()">
</form>
<script type="text/javascript">
function setMyText(){
var obj = document.getElementById("input");
if (obj.validity.patternMismatch === true) {
obj.setCustomValidity("密码是必填的");
} else {
obj.setCustomValidity(‘‘);
}
}
</script>
</body>
</html>
以上是关于JavaScript 验证 API中的setCustomValidity()方法的主要内容，如果未能解决你的问题，请参考以下文章
在javascript和axios中为来自前端的每个api调用发送firebase身份验证令牌
如何使用 Stripe 的 JavaScript API 验证优惠券？