可能是我理解能力比较差,没看懂 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; } }
<p>输入数字并点击验证按钮:</p>
<input type="number" id="nu" max="300" min="100" required>
<button type="button" onclick="myFunction()">点我</button>
<p>如果输入数字100-300以外,会提示错误信息。</p>
<p id="demo"></p>
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; } }
发表评论 取消回复