JavaScript验证API

验证API

两个方法：

checkValidity():如果input元素中的数据是合法的返回true，否则返回false；

setCustomValidity():设置input元素的validationMessage属性，用于自定义错误提示信息的方法

使用setCustomValidity设置自定义后提示后，validity.customError就会变成true，checkValidity总会返回false。如需重新判断需要取消自定义提示：

setCustomValidity('')

setCustomValidity(null)

setCustomValidity(undefined)

checkValidity()方法

例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>javascript 验证API</title>
 6     </head>
 7     <body>
 8         <p>输入数字并验证</p>
 9         <input type="number" id="id1" min="100" max="300" required>
10         <button onclick="myFunction()">验证</button>
11         <p id="demo"></p>
12     </body>
13     <script>
14         function myFunction(){
15             // 获取用户输入对象
16             var inpobj = document.getElementById("id1");
17             console.log(inpobj)
18             // checkValidity():如果用户输入是合法的，返回true，否则返回false
19             if(inpobj.checkValidity() == false){
20                 document.getElementById("demo").innerHTML=inpobj.validationMessage;
21             }
22             else{
23                 document.getElementById("demo").innerHTML="nice got it..."
24             }
25         }
26     </script>
27 </html>

约束验证dom属性

属性	描述
validity	布尔属性值，返回 input 输入值是否合法
validationMessage	浏览器错误提示信息
willValidate	指定 input 是否需要验证

validity属性

属性	描述
customError	设置为 true, 如果设置了自定义的 validity 信息。
patternMismatch	设置为 true, 如果元素的值不匹配它的模式属性。
rangeOverflow	设置为 true, 如果元素的值大于设置的最大值。
rangeUnderflow	设置为 true, 如果元素的值小于它的最小值。
stepMismatch	设置为 true, 如果元素的值不是按照规定的 step 属性设置。
tooLong	设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。
typeMismatch	设置为 true, 如果元素的值不是预期相匹配的类型。
valueMissing	设置为 true，如果元素 (required 属性) 没有值。
valid	设置为 true，如果元素的值是合法的。

实例：如果输入值大于100，显示一个信息：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>javascript dom属性之validity属性</title>
 6     </head>
 7     <p>输入数字并点击验证按钮：</p>
 8     <input type="number" id="id1" max="100">
 9     <button onclick="myFunction()">验证</button>
10     <p>如果输入的值大于100，（max属性）会显示错误信息</p>
11     <p id="demo"></p>
12     <script>
13         function myFunction(){
14             if(document.getElementById("id1").validity.rangeOverflow){
15                 txt = "输入的值太大"
16             }else{
17                 txt = "输入正确"
18             }
19             document.getElementById("demo").innerHTML = txt;
20         }
21     </script>
22 </html>

那么，如果输入的值小于100，即使用validity.rangeUnderflow()方法

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>javascript dom属性之validity属性1</title>
 6     </head>
 7     <body>
 8         <p>输入数字并点击验证按钮：</p>
 9         <input type="number" min="100" id="id1" required>
10         <button onclick="myFunction()">验证</button>
11         <p>如果输入的数字小于100（input的min属性）会显示错误信息</p>
12         <p id="demo"></p>
13         <script>
14             function myFunction(){
15                 var txt = "";
16                 var inpObj = document.getElementById("id1");
17                 console.log(isNumberic(inpObj.value))
18                 if(!isNumberic(inpObj.value)){
19                     txt = "你输入的不是数字"
20                 }
21                 else if(inpObj.validity.rangeUnderflow){
22                     txt = "你输入的值太小了"
23                 }
24                 else{
25                     txt = "输入正确"
26                 }
27                 document.getElementById("demo").innerHTML=txt
28             }
29             // 判断是否位数字
30             function isNumberic(n){
31                 return !isNaN(parseFloat(n)) && isFinite(n);
32             }
33         </script>
34     </body>
35     
36 
37     
38 </html>