H5表单中的setCustomValidity 的使用说明

作者：从前慢现在也慢 | 2024-02-18 21:57:49

踩

setcustomvalidity

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>
</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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

还有另一个，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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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

名称	类型	描述
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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/110819