Day2-JS-JavaScript 验证 API

JavaScript 验证 API

一、约束验证 DOM 方法

①方法：

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

　　2、设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法

②实例：

　　1、输入数字并点击验证按钮进行验证

　　　　知识点：required是用来规定“一定要输入东西”。输入东西是必须的

　　　　　　　　把type设置为number 然后通过min 和max把数字的范围进行限制了

　　　　　　　　通过用这个代码来判断输入的是否有错误，

  if(Obj.checkValidity()==false)

　　　　　　　　如果有错误的话就把这个错误打印出来

document.getElementById("demo").innerHTML=Obj.validationMessage;

二、Validity 属性

 

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

　　　　①效果图：　

                           

<body>
    <p>输入数字并点击验证按钮:</p>
    <input type="number" id="id1" max="100">
    <button onclick="myFunction()">验证</button>

    <p>如果输入的数字大于 100 ( input 的 max 属性), 会显示错误信息。</p>

    <p id="demo"></p>

    <script>
        function myFunction(){
            var txt="";
            if(document.getElementById("id1").validity.rangeOverflow){
                txt="输入的值太大了";
            }else{
                txt="输入正确";
            }
            document.getElementById("demo").innerHTML=txt;
        }
    </script>
</body>

同理，如果是如果输入的值小于 100，显示一个信息（还添加了验证是不是数字的功能）

=====这个例子也修复了上面的一个bug，就是由于可能是1e3这种指数型的形式，所以在input是type=“number”类型的输入框中

是可以输入e这个字母的，但是可能他构成的就不是指数型的，所以就可以判断一下这个输入的到底是不是数字

 ①效果图：

               

 

 ②知识点：

　　　　通过这个代码来判断输入的是不是数字

if(!isNumeric(inpObj.value))

// 判断输入是否为数字
function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

③完整代码：

<body>

<p>输入数字并点击验证按钮:</p>
<input id="id1" type="number" min="100" required>
<button onclick="myFunction()">验证</button>

<p>如果输入的数字小于 100 ( input 的 min 属性), 会显示错误信息。</p>

<p id="demo"></p>

<script>
function myFunction() {
    var txt = "";
    var inpObj = document.getElementById("id1");
    if(!isNumeric(inpObj.value)) {
        txt = "你输入的不是数字";
    } else if (inpObj.validity.rangeUnderflow) {
        txt = "输入的值太小了";
    } else {
        txt = "输入正确";
    }
    document.getElementById("demo").innerHTML = txt;
}

// 判断输入是否为数字
function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>

</body>
View Code

 

　

　　　　　　　

 

posted @ 2020-06-12 22:23  SCAU-gogocj  阅读(158)  评论(0)  编辑  收藏  举报