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>

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

  1. 自定义错误提示信息:
    基础代码展示如下:
<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>

运行截图如下:输入框没有任何值时,点提交在这里插入图片描述
要想自定义提示信息,则需要使用到: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. 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>

运行测试截图如下:
当输入框内容为空时:
在这里插入图片描述
当输入的值太大时:
在这里插入图片描述
当输入的值太小时:
在这里插入图片描述
当输入的值间距不对,由于设置了step为2,间距只能为2,即偶数,输入奇数提示:在这里插入图片描述

  1. 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>

运行截图如下(空值同上):
当输入的值符合pattern的规则时:
在这里插入图片描述
当输入的值不符合pattern的规则时:
在这里插入图片描述

  1. 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>

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

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

Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐