HTML5 validityState 对象：让你的表单验证像管家一样贴心
大家好，我是你们的老朋友，前端界的小可爱。今天咱们来聊聊一个藏在HTML5表单验证里的“小管家”—— validityState 对象。
说到表单验证，大家肯定都不陌生。没验证的表单就像没锁的门，谁都能随便进出，搞得数据乱七八糟。以前，我们用JavaScript吭哧吭哧地写正则，又是判断非空，又是校验邮箱格式，一个表单下来，代码比我的头发还长。
HTML5 登场后，自带了一些基础的验证功能，比如 required 属性，type="email" 属性，等等。它们确实省了不少力气，但就像傻瓜相机，只能拍出差不多的照片，想要拍出艺术照，还得靠手动调节。
validityState 对象，就是那个可以让你手动调节的“手动模式”。它能让你更细粒度地控制表单的验证状态，打造一个像五星级酒店管家一样贴心的表单体验。
validityState 是个啥？
简单来说，validityState 是一个只读对象，它包含了表单元素当前的验证状态信息。你可以通过访问表单元素的 validity 属性来获取这个对象，比如：
<input type="email" id="myEmail" required>
<script>
const emailInput = document.getElementById('myEmail');
const validity = emailInput.validity;
console.log(validity); // 输出一个 ValidityState 对象
</script>这个 validity 对象里面，住着一群布尔类型的属性，它们就像一群小精灵，各自负责报告一种验证状态：
badInput: 用户输入了浏览器无法转换成预期类型的数据，比如在type="number"的输入框里输入了字母。customError: 通过setCustomValidity()方法设置的自定义错误信息。patternMismatch: 输入的值不符合pattern属性定义的正则表达式。rangeOverflow: 输入的值超过了max属性指定的最大值。rangeUnderflow: 输入的值小于min属性指定的最小值。stepMismatch: 输入的值不符合step属性定义的步长规则。tooLong: 输入的值超过了maxLength属性指定的最大长度。tooShort: 输入的值少于minLength属性指定的最小长度。（新增的，兼容性需注意）typeMismatch: 输入的值不符合type属性指定的类型，比如type="email"的输入框里输入了错误的邮箱格式。valid: 最关键的一个！如果以上所有属性都是false，那么valid就是true，表示表单元素通过了所有验证。valueMissing: 如果元素设置了required属性，但用户没有输入任何值。
validityState 有啥用？
有了这群小精灵，你就可以根据不同的验证状态，做出不同的反应，给用户提供更精准的反馈。
1. 定制错误提示：
默认的浏览器错误提示太丑？没个性？用 validityState 就能轻松搞定！
<input type="email" id="email" required>
<span id="emailError" style="color: red; display: none;"></span>
<script>
const emailInput = document.getElementById('email');
const emailError = document.getElementById('emailError');
emailInput.addEventListener('input', function() {
if (emailInput.validity.valueMissing) {
emailError.textContent = '邮箱不能为空哦！';
emailError.style.display = 'inline';
} else if (emailInput.validity.typeMismatch) {
emailError.textContent = '邮箱格式不正确！';
emailError.style.display = 'inline';
} else {
emailError.textContent = '';
emailError.style.display = 'none';
}
});
</script>在这个例子里，我们监听了输入框的 input 事件，每次输入内容都会检查 validityState。如果 valueMissing 是 true，就显示“邮箱不能为空哦！”的提示；如果 typeMismatch 是 true，就显示“邮箱格式不正确！”的提示。
2. 实现复杂的验证逻辑：
有些验证规则，光靠 HTML5 的属性搞不定，比如：
- 用户名必须包含字母和数字。
- 密码强度必须达到一定标准（包含大小写字母、数字、特殊字符）。
- 两次输入的密码必须一致。
这时候，validityState 就能派上大用场了。我们可以用 JavaScript 写自定义的验证逻辑，然后通过 setCustomValidity() 方法来设置 customError 属性。
<input type="password" id="password" required>
<input type="password" id="confirmPassword" required>
<span id="passwordError" style="color: red; display: none;"></span>
<script>
const passwordInput = document.getElementById('password');
const confirmPasswordInput = document.getElementById('confirmPassword');
const passwordError = document.getElementById('passwordError');
confirmPasswordInput.addEventListener('input', function() {
if (passwordInput.value !== confirmPasswordInput.value) {
confirmPasswordInput.setCustomValidity('两次密码不一致！');
passwordError.textContent = '两次密码不一致！';
passwordError.style.display = 'inline';
} else {
confirmPasswordInput.setCustomValidity(''); // 清空自定义错误
passwordError.textContent = '';
passwordError.style.display = 'none';
}
});
</script>在这个例子里，我们监听了确认密码输入框的 input 事件，如果两次密码不一致，就调用 setCustomValidity() 方法设置错误信息。注意，setCustomValidity() 方法的参数如果是一个空字符串，就表示清空自定义错误。
3. 动态调整验证规则：
有时候，验证规则需要根据用户的选择动态调整。比如，如果用户选择了“海外地址”，就不需要验证邮政编码。
<select id="country">
<option value="china">中国</option>
<option value="other">海外</option>
</select>
<input type="text" id="zipCode" required>
<script>
const countrySelect = document.getElementById('country');
const zipCodeInput = document.getElementById('zipCode');
countrySelect.addEventListener('change', function() {
if (countrySelect.value === 'other') {
zipCodeInput.removeAttribute('required');
} else {
zipCodeInput.setAttribute('required', 'required');
}
});
</script>在这个例子里，我们监听了国家选择框的 change 事件，如果用户选择了“海外”，就移除邮政编码输入框的 required 属性；否则，就添加 required 属性。
setCustomValidity() 的妙用
setCustomValidity() 方法是 validityState 的灵魂伴侣，它能让你完全掌控 customError 属性。它接受一个字符串作为参数，表示自定义的错误信息。
- 设置错误信息：
element.setCustomValidity('你的错误信息')，设置后element.validity.customError会变成true，并且表单提交会被阻止。 - 清除错误信息：
element.setCustomValidity('')，设置为空字符串后，element.validity.customError会变成false，表示没有自定义错误。
注意： setCustomValidity() 方法不会自动显示错误信息，你需要自己编写代码来显示。
最佳实践和注意事项
- 不要滥用
setCustomValidity()： 尽量使用 HTML5 内置的验证属性，只有在内置属性无法满足需求时，才使用setCustomValidity()。 - 及时清除自定义错误： 在用户修改输入后，一定要及时清除自定义错误，否则用户会一直卡在验证环节。
- 考虑无 JavaScript 环境： 有些用户可能会禁用 JavaScript，所以你的表单应该在没有 JavaScript 的情况下也能正常工作。可以使用 HTML5 的
novalidate属性来禁用浏览器的默认验证，然后在服务器端进行验证。 - 提供清晰的错误提示： 错误提示应该简洁明了，告诉用户哪里出错了，以及如何解决。
- 保持一致的风格： 错误提示的风格应该与整个网站的风格保持一致，避免给用户带来不协调的感觉。
- 兼容性： 虽然
validityState是 HTML5 的一部分，但是一些老版本的浏览器可能不支持。可以使用一些 polyfill 来提供兼容性支持。
总结
validityState 对象是 HTML5 表单验证的瑞士军刀，它能让你更细粒度地控制表单的验证状态，打造一个更友好、更智能的表单体验。掌握了它，你就能像一个经验丰富的管家一样，为用户提供贴心的服务，让他们轻松愉快地填写表单。
希望这篇文章能帮助你更好地理解 validityState 对象，并在你的项目中灵活运用。下次再遇到表单验证的难题，不妨试试这个“小管家”，相信它会给你带来惊喜。
记住，好的表单验证不仅能保证数据的质量，还能提升用户体验，让你的网站更受欢迎！
好了，今天就聊到这里，下次再见！