二十五岁时我们都一样愚蠢、多愁善感，喜欢故弄玄虚，可如果不那样的话，五十岁时也就不会如此明智。
标题：JavaScript验证 api
约束验证DOM方法
属性 描述 checkValidity() 如果输入元素包含有效数据，则返回true. setCustomValidity() 设置一个输入元素的validationMessage属性. 如果输入字段包含无效数据，则显示消息:
<input id="id1" type="number" min="100" max="300" required> <button onclick="myFunction()">OK</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 包含与输入元素的有效性相关的布尔属性. validationMessage 包含当验证为false时浏览器会显示的消息. willValidate 指示是否将验证输入元素.
验证属性
验证属性 输入元素包含一些与数据有效性相关的属性:
属性 描述 customError 设置为true，如果设置自定义有效性消息. patternMismatch 如果元素的值与其模式属性不匹配，则设置为true。 rangeOverflow 如果元素的值大于它的最大属性，则设置为true。 rangeUnderflow 如果元素的值小于它的最小属性，则设置为true。 stepMismatch 如果元素的值按其步骤属性无效，则设置为true。 tooLong 设置为true，如果一个元素的值超过MaxLength属性。 typeMismatch 如果元素的值按其类型属性无效，则设置为true。 valueMissing 设置为true，如果元素（具有必需属性）没有值。 valid 设置为true，如果元素的值是有效的。
实例
如果输入字段中的数字大于100（输入框的max属性），则显示一条消息:
<input id="id1" type="number" max="100"> <button onclick="myFunction()">OK</button> <p id="demo"></p> <script> function myFunction() { var txt = ""; if (document.getElementById("id1").validity.rangeOverflow) { txt = "Value too large"; } document.getElementById("demo").innerHTML = txt; } </script>如果输入字段中的数字小于100（输入框的min属性），则显示一条消息:
<input id="id1" type="number" min="100"> <button onclick="myFunction()">OK</button> <p id="demo"></p> <script> function myFunction() { var txt = ""; if (document.getElementById("id1").validity.rangeUnderflow) { txt = "Value too small"; } document.getElementById("demo").innerHTML = txt; } </script>
