HTML约束验证

HTML5 新增了 HTML 表单的验证方式：约束验证（constraint validation）。

约束验证是表单被提交时浏览器用来实现验证的一种算法。

HTML 约束验证基于：

HTML 输入属性；
CSS 伪类选择器；
DOM 属性和方法；

约束验证 HTML 输入属性

约束验证 CSS 伪类选择器

约束验证中setCustomValidity自定义错误信息的使用

HTML部分：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
 <p>输入数字并点击验证按钮:</p>

 <input id="id1" type="number" min="100" max="300" required>
 <button οnclick="myFunction()">验证</button>

 <p>如果输入的数字小于 100 或大于300，会提示错误信息。</p>

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

javaScript部分：

function myFunction() {
    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 = "输入正确";
    }
}

显示结果：