您的位置：首页 > Web前端 > HTML5

H5表单中的setCustomValidity 的使用说明

2018-03-20 23:04 591 查看

setCustomValidity用于判断表单的正误，有错误时可以手动设置提示信息

当没有错误时要将setCustomValidity(“)设置为空，否则表单无法提交

实例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试</title>

4000
</head>
<body>
<form action="http://blog.csdn.net/qiphon3650">
<input id=text1 type=text required />
<input id=submit1 type=submit>
</form>
<script>
document.querySelector('#submit1').addEventListener('click',function(){
var $text1= document.querySelector('#text1');

$text1.validity.valueMissing//判断表单内容是否为空
?$text1.setCustomValidity('The value can\'t be empty.')//设置错误提示
: $text1.setCustomValidity('');
},false);
</script>
</body>
</html>

还有另一个，checkValidity,用于判断表单填入的内容是否合法

看用法，

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p>输入数字并点击验证按钮:</p>

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">验证</button>

<p>如果输入的数字小于 100 或大于300，会提示错误信息。</p>

<p id="demo"></p>

<script>
function myFunction() {
var inpObj = document.getElementById("id1");
if (inpObj.checkValidity() == false) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
} else {
document.getElementById("demo").innerHTML = "输入正确";
}
}
</script>

</body>
</html>

el.validity.valid   // true/false  表单检查
el.validity  //这个对象下面有好多错误的状态码，分别对应不同的状态


名称	类型	描述
customError	Boolean	该元素的自定义有效性消息已经通过调用元素的setCustomValidity() 方法设置成为一个非空字符串.
patternMismatch	Boolean	该元素的值与指定的pattern属性不匹配.
rangeOverflow	Boolean	该元素的值大于指定的 max属性.
rangeUnderflow	Boolean	该元素的值小于指定的 min属性.
stepMismatch	Boolean	该元素的值不符合由step属性指定的规则.
tooLong	Boolean	该元素的值的长度超过了HTMLInputElement 或者 HTMLTextAreaElement 对象指定的maxlength属性中的值.注意:在Gecko中,该属性永远不会为true,因为浏览器会阻止元素的值的长度超过maxlength.
typeMismatch	Boolean	该元素的值不符合元素类型所要求的格式(当type 是 email 或者 url时).
valid	Boolean	其他的约束验证条件都不为true.
valueMissing	Boolean	该元素有 required 属性,但却没有值.

详细内容见地址https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航