HTML5 `validityState` 对象：自定义表单验证状态的细粒度控制

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 对象，并在你的项目中灵活运用。下次再遇到表单验证的难题，不妨试试这个“小管家”，相信它会给你带来惊喜。

记住，好的表单验证不仅能保证数据的质量，还能提升用户体验，让你的网站更受欢迎！

好了，今天就聊到这里，下次再见！