菜鸟教程个人学习心得02_利用checkValidity()函数验证输入框内容是否合法

JavaScript验证API

1. 通过checkValidity()函数判断输入的数值是否合法，数据合法时返回true，不合法时返回false：

<p>利用checkValidity()函数验证输入框内容是否合法</p>    
<!-- input必须添加required属性限制不为空，否则直接点提交也会判定为合法 -->    
<input type="number" min="0" max="10" id="number" required>    
<button type="button" onclick="checkNumber()">提交</button>    
<script>    
    function checkNumber() {        
        var numId = document.getElementById("number");    //    通过id获取输入框            
        if (numId.checkValidity() == false) {    // 利用函数checkValidity()判断输入的内容是否合法             
        alert(numId.validationMessage);            
        } else {                
            alert("输入的数值正确！")          
        }        
    }    
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

validationMessage:返回浏览器的错误提示信息

2. 自定义错误提示信息：
   基础代码展示如下：

<form action="" name="myForm" method="POST" onsubmit="onSubmit()">        
    姓名:<input name="fname" required="required">        
    <input type="submit" value="提交">   
</form>    
<script>        
    function onSubmit() {            
        var name = document.forms[myForm]["fname"].value;        
            if (name == null || x == "") {            
                alert("请输入正确的姓名");                
                return false;            
            }        
    }    
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

运行截图如下：输入框没有任何值时，点提交
要想自定义提示信息，则需要使用到：setCustomValidity():
具体实现代码如下：

<!-- 自定义提示信息 -->    
<form action="" name="myForm" method="POST">      
    姓名:<input type="text" name="fname" required id="user">        
    <input type="submit" value="提交">    
</form>    
<script>        
    var user = document.getElementById("user");        
    user.setCustomValidity("自定义提示信息：输入框的值不能为空！");    
</script>
1
2
3
4
5
6
7
8
9

运行截图如下：输入框没有任何值时，点提交

3. validity的属性(数字类)：
   | 属性|描述 |
   |–|--|
   | rangeOverflow | 设置为 true, 如果元素的值大于设置的最大值.|
   | rangeOverflow |设置为 true, 如果元素的值大于设置的最大值.|
   |stepMismatch|设置为 true, 如果元素的值不是按照规定的 step 属性设置。|
   测试代码：

<form action="">
        <input type="number" id="number" max="10" min="0" step="2" >
        <button type="button" onclick="myFunction()">提交</button>
        <p id="p1"></p>
    </form>
    <script>
        function myFunction() {
            var number = document.getElementById("number")
            var txt = ""
            if (number.value == null || number.value == "") {
                txt = "请输入文本！"
            } else if (number.validity.rangeOverflow) {
                txt = "输入的值太大！";
            } else if (number.validity.rangeUnderflow) {
                txt = "输入的值太小！"
            } else if (number.validity.stepMismatch) {
                txt = "输入的值，间距不对！"
            } else {
                txt = "输入正确！"
            }
            document.getElementById("p1").innerHTML = txt;
            document.getElementById("number").value = ""
        }
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

运行测试截图如下：
当输入框内容为空时：

当输入的值太大时：

当输入的值太小时：

当输入的值间距不对，由于设置了step为2，间距只能为2，即偶数，输入奇数提示：

4. validity的属性(字符串类)：
   |属性| 描述 |
   |–|--|
   | patternMismatch | 设置为 true, 如果元素的值不匹配它的模式属性。 |
   测试代码：

<form action="">
        <input type="text" id="char" pattern="[a-zA-Z]{4}">
        <button type="button" onclick="myFunction1()">提交</button>
        <p id="p2"></p>
    </form>
    <script>
        function myFunction1() {
            var char = document.getElementById("char")
            var txt = ""
            if (char.value == null || char.value == "") {
                txt = "请输入文本！"
            } else if (char.validity.patternMismatch) {
                txt = "字符串不匹配"
            } else {
                txt = "输入正确！"
            }
            document.getElementById("p2").innerHTML = txt;
        }
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

运行截图如下（空值同上）：
当输入的值符合pattern的规则时：

当输入的值不符合pattern的规则时：

5. validity的其他属性测试：
   tooLong：设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。
   测试代码：

    最大长度为1：
    <input id="inp1" type="text" value="A" maxlength="1" />
    <input id="inp2" type="text" value="ABGUGU" maxlength="1" />
    是否符合邮箱地址类型：
    <input id="inp3" type="email" value="1479297914"  />
    <input id="inp4" type="email" value="1479297914@qq.com"  />
    设置了required值后，值是否为空:
    <input id="inp5" type="text" value="abcd"  required/>
    <input id="inp6" type="text" value=""  required/>
    <p id="id1"></p>
    <p id="id2"></p>
    <p id="id3"></p>
    <p id="id4"></p>
    <p id="id5"></p>
    <p id="id6"></p>
    <button type="button" onclick="myFunction2()">提交</button>
    <script>
        function myFunction2() {
            //最大长度不超出
            document.getElementById("id1").innerHTML = document.getElementById("inp1").validity.tooLong;
            //最大长度超出
            document.getElementById("id2").innerHTML = document.getElementById("inp2").validity.tooLong;
            //查看类型是否匹配，因为1479297914不符合emai的类型，所以不匹配,为true
            document.getElementById("id3").innerHTML = document.getElementById("inp3").validity.typeMismatch;
            //查看类型是否匹配，因为1479297914@qq.com符合emai的类型，所以匹配,为false
            document.getElementById("id4").innerHTML = document.getElementById("inp4").validity.typeMismatch;
            //设置了required属性，必须要填，因为value存在值abcd，所以不为空，因此返回false；
            document.getElementById("id5").innerHTML = document.getElementById("inp5").validity.valueMissing;
            //设置了required属性，必须要填，因为value为空，，因此返回true；
            document.getElementById("id6").innerHTML = document.getElementById("inp6").validity.valueMissing;
        } 
    </script>
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
30
31
32

运行结果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200921103601531.png#pic_center

当长度超出时，true只有在Opera浏览器为true，其他浏览器都为false