HTML5内置表单验证 Build-in Form Validation

HTML5表单的内置验证功能，可以通过required, pattern属性添加限制，用type="email"或"url"进行格式限制，在提交时自动进行验证病给出提示信息。也可以自定手动验证，显示自定义信息等。

1.通过input元素的属性指定限制
1)required (无值)： e.g.<input type="text" required>指定该项为一个必填项
2)minlength="m" 以及maxlength="n": e.g. <input type="text" minlength="3" maxlength="8" />：指定该项字符长度要求。
3)min以及max: e.g. <inputtype="number" min="1"max="10">:用于type为number的输入项，指定最小值和最大值.
4)pattern="regex": e.g.<input type="text" pattern="[^0-9a-f]" required/>指定一个正则表达式作为验证条件
...
当指定type="email"或type="url"时，在提交时html5会按照email或url的格式验证，不需要正则表达式。

2.通过 ':valid' and ':invalid'伪类自定义样式
给定以上限制后，:valid将匹配合法输入项，:invalid匹配不合法输入项

<style>
input:invalid { /* an invalid element matches the :invalid pseudo-class*/
border: 2px solid red;
}
input:valid { /* a valid element matches the :valid pseudo-class*/
border: 2px solid green;
}
</style>

3.使用.checkValidity()手动触发验证

除了在点击submit时自动验证，input,
form元素拥有checkValidity()方法，可以在想要的时候手动验证

<input type="email" id="mancheck" />
<script>
var mancheck = document.querySelector("#mancheck");
mancheck.onblur = () => {  // 例如在输入焦点离开时进行验证
mancheck.checkValidity();
if(mancheck.validationMessage) {
alert(mancheck.validationMessage); // 验证结果信息在元素的validationMessage属性中
}
}
</script>

FormElement的checkValidity()方法将验证它所包含的所有input项。

5.自定义验证信息setCustomValidity(message)

读取验证信息通过elm.validationMessage,html5已经提供了详细的错误信息， 覆盖原来的内置信息需要通过elm.setCustomValidity(message).

<input type="email" id="cusmsg" />
<script>
var cusmsg= document.querySelector("#cusmsg");
cusmsg.onblur= () => {
cusmsg.checkValidity();
if(cusmsg.validity.typeMismatch) {
cusmsg.setCustomValidity('Custom message: Email is invalid');
alert(cusmsg.validationMessage);
}
};
</script>

当使用setCustomValidity后，当前input元素即被设为invalid状态。

6.elem.validity包含具体的验证结果

自定义invalid显示信息或其他行为时，可以从validity属性读取具体的invalid类型：

elem.validity.valueMissing: 为true 如果没有填写并且有required限制
elem.validity.typeMismatch: 为true 如果 email 或url的格式错误
elem.validity.rangeOverflow
elem.validity.rangeOverflow
elem.validity.patternMismatch
...
elem.validity.valid:为true 如果以上所有都有效。