JavaScript|验证API_validationmessage

作者：Gausst松鼠会 | 2024-02-18 21:57:32

踩

validationmessage

JavaScript|验证API

1.checkValidity()方法和validationMessage

使用checkValidity()方法可以检查输入的合法性，使用validationMessage可以查看输入的错误提示信息：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证API</title>
  <script>
    function Fun(){
      // checkValidity()函数用来检验输入内容是否合法
      if(document.getElementById("input1").checkValidity()){
          document.getElementById("p1").innerHTML = "合法";
      }
      else{
          // validationMessage属性用来查看不合法的信息
          document.getElementById("p1").innerHTML = document.getElementById("input1").validationMessage;
      }
    }
  </script>
</head>
<body>

请输入10~20的数字：
<input id="input1" min="10" max="20" type="number" required>
<button onclick="Fun()">确认</button>
<p id="p1"></p>

</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

在这里插入图片描述

2.Validity属性

customError 设置了自定义的validity信息时返回true
patternMismatch 元素的值不匹配它的模式属性时返回true
rangeOverflow 元素值大于设置的最大值时返回true
rangeUnderflow 元素值小于设置的最小值时返回true
stepMismatch 元素的值不是按照规定的step属性设置时返回true
tooLong 元素值超过了maxLength属性设置的长度
typeMismatch 元素的值不是预期相匹配的类型
valueMissing 元素没有值时返回true
valid 元素合法返回true

人生没有白走的路，每一步都算数！

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