html5 约束验证API 主要有如下几个：
willValidate 属性
validity 属性
validationMessage 属性
checkValidity() 方法
setCustomValidity() 方法
validity 属性(显示各项是否符合验证条件)，示例：
<form action="" method="post" >
<input type="text" name="username" id="username" placeholder="请输入" required >
<input type="submit">
</form>
<script>
var user = document.getElementById('username');
console.log(user.validity);
</script>控制台显示：
validationMessage 属性（显示，不符合验证条件的信息），例如
<body>
<form action="" method="get" id="forms">
<input type="text" id="username" required>
<input type="submit" value="提交" id="submitBtn">
</form>
<script>
var form = document.getElementById("forms"),
submitBtn = document.getElementById("submitBtn");
submitBtn.addEventListener("click", function() {
var invalidFields = form.querySelectorAll(":invalid");
for(let item in invalidFields){
console.log(item.validationmessage)
}
});
</script>
</body>input 标签的 oninput 方法（html5）可以每次输入input值后被触发。用来控制一个input的最长位数：
<form action="" method="post" >
<input type="text" name="username" id="username" placeholder="请输入" required >
<input type="number" id="numbers" max="5" min="3" value="1">
<!-- 输入长度不超过5 -->
<input type="number" id="number2" oninput="checkLength(this,5)">
<input type="submit">
</form>
<script>
var user = document.getElementById('username');
console.log(user.validity);
console.log(numbers.validity);
function checkLength(obj,length) {
obj.value = obj.value.substr(0,length);
}
</script>去掉 input number 的上下箭头（在<style>标签中）：
checkvalidity() 方法
如果元素没有满足它的任意约束，返回false，其他情况返回true。
<form action="" method="post" >
<input type="text" name="username" id="username" placeholder="请输入" required >
<input type="number" id="numbers" max="5" min="3" value="1">
<input type="submit">
</form>
<script>
var user = document.getElementById('username');
console.log(user.validity);
console.log(numbers.validity);
if(numbers.checkValidity()){
console.log('ok');
}else{
console.log('not ok')
}
</script>setCustomValidity() 方法
设置自定义验证信息，用于即将实施与验证的约束来覆盖预定义的信息。(提示信息)
<!DOCTYPE html>
<html>
<head>
<title>form2</title>
<meta charset="utf-8">
<style type="text/css">
input[type='text']{border:1px solid #ccc;width:150px;height: 30px;border-radius: 5px;}
input[type="submit"]{background-color: #eee;border:1px solid #ddd;width: 60px;height: 33px;border-radius: 5px;}
</style>
</head>
<body>
<form name="test" action="" method="post">
<input type="text" required pattern="^\d{4}$" oninput="checkit(this)" placeholder="请输入代码">
<input type="submit" value="验证">
</form>
<script >
function checkit(obj) {
console.log(obj.validity);
var it = obj.validity;
if(true === it.valueMissing){
obj.setCustomValidity("不能为空！");
}else{
if(true === it.patternMismatch){
obj.setCustomValidity("必须是4个数字！");
}else{
obj.setCustomValidity("");
}
}
}
</script>
</body>
</html>