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>