1. Constraint Validation API：
Constraint Validation API 是 HTML5 中引入的一组 API，用于在客户端进行表单字段验证。它通过在表单字段上设置属性（如 required、pattern）以及使用相应的 JavaScript 方法来实现验证。
- checkValidity(): 检查字段是否通过所有验证条件。
- setCustomValidity(message): 设置自定义验证消息。
示例：
<form>
<input type="text" id="username" required pattern="[a-zA-Z0-9]+">
<button type="submit">Submit</button>
</form>
<script>
var form = document.querySelector('form');
form.addEventListener('submit', function(event) {
if (!form.checkValidity()) {
alert('请按照要求填写表单！');
event.preventDefault();
}
});
</script>
2. ValidityState 对象：
在 Constraint Validation API 中，每个表单字段都有一个 validity 属性，它包含了有关字段验证状态的信息。ValidityState 对象提供了一系列属性，如 valueMissing、typeMismatch、patternMismatch 等，用于检查字段是否满足特定的验证条件。
示例：
var usernameInput = document.getElementById('username');
console.log(usernameInput.validity.valueMissing); // 是否为空
console.log(usernameInput.validity.patternMismatch); // 是否匹配 pattern
3. input 事件和实时验证：
使用 input 事件可以在用户输入时实时验证字段，并给予用户及时的反馈。
示例：
var usernameInput = document.getElementById('username');
usernameInput.addEventListener('input', function() {
if (this.validity.patternMismatch) {
this.setCustomValidity('用户名只能包含字母和数字');
} else {
this.setCustomValidity('');
}
});
4. reportValidity() 方法：
reportValidity() 方法用于触发验证并在验证失败时显示浏览器默认的验证提示信息。
示例：
var form = document.querySelector('form');
form.addEventListener('submit', function(event) {
if (!form.reportValidity()) {
alert('请按照要求填写表单！');
event.preventDefault();
}
});
这些验证 API 可以大大简化表单验证的过程，并提供了一种更加标准和方便的方式来确保用户输入的合法性。在使用时，可以根据具体的业务需求选择适合的验证方式。
转载请注明出处：http://www.pingtaimeng.com/article/detail/12803/JavaScript