JavaScript 验证 API

约束验证 DOM 方法

setCustomValidity('') setCustomValidity(null) setCustomValidity(undefined)

以下实例如果输入信息不合法，则返回错误信息：

checkValidity() 方法

<input id="id1" type="number" min="100" max="300" required><button onclick="myFunction()">验证</button> <p id="demo"></p> <script>

function myFunction() {    var inpObj = document.getElementById("id1");    if (inpObj.checkValidity() == false) {        document.getElementById("demo").innerHTML = inpObj.validationMessage;    }}

</script>

尝试一下 »

约束验证 DOM 属性

Validity 属性

input 元素的 validity 属性包含一系列关于 validity 数据属性:

实例

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

rangeOverflow 属性

<input id="id1" type="number" max="100"><button onclick="myFunction()">验证</button> <p id="demo"></p> <script>

function myFunction() {    var txt = "";    if (document.getElementById("id1").validity.rangeOverflow) {       txt = "输入的值太大了";    }    document.getElementById("demo").innerHTML = txt;}

</script>

尝试一下 »

如果输入的值小于 100，显示一个信息：

rangeUnderflow 属性

<input id="id1" type="number" min="100" required><button onclick="myFunction()">OK</button> <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>

尝试一下 »

 JavaScript 表单验证

JavaScript 保留关键字 

2 篇笔记 写笔记

1.    不爱李磊的韩梅梅

     227***1690@qq.com

   314

   setCustomValidity 的用法：

   var inpObj = document.getElementById("id1");inpObj.setCustomValidity(''); // 取消自定义提示的方式if (inpObj.checkValidity() == false) {
       if(inpObj.value==""){
           inpObj.setCustomValidity("不能为空！");
       }else if(inpObj.value<100 || inpObj.value>300){
           inpObj.setCustomValidity("请重新输入数值（100~300之间）!");
       }
       document.getElementById("demo").innerHTML = inpObj.validationMessage;} else {
       document.getElementById("demo").innerHTML = "输入正确";}

   尝试一下 »

   不爱李磊的韩梅梅

      不爱李磊的韩梅梅

     227***1690@qq.com

   7年前 (2017-05-24)

2.    萌新

     492***433@qq.com

   722

   可能是我理解能力比较差，没看懂 checkValidity()。

   这个函数具体的意思是什么，后来查阅到了一个比较靠谱的答案。留下证据，以备像我一样笨的后人浪费时间。

   HTMLSelectElement.checkValidity() 会检查元素是否有任何输入约束条件，并且检查值是否符合约束条件。 如果值是不符合约束条件的，浏览器就会在该元素上触发一个可以撤销的 invalid 事件。

   初步理解为。该函数里面有两个值，默认判断值为 ture，可以修改为 flash。如有不对，希望指正。

   以下是我测试的代码：

   function myFunction() {
     var x = document.getElementById("nu");
     x.setCustomValidity("");//使用前先取消自定义，否则下次点击checkValidity总返false
     if (x.checkValidity() == false) {
       x.setCustomValidity("错误");
       document.getElementById("demo").innerHTML = x.validationMessage;
     }
     else {
       x.setCustomValidity("正确");
       document.getElementById("demo").innerHTML = x.validationMessage;
     }}

   尝试一下 »