跨浏览器表单验证：使用 Validity State API 扩展浏览器支持

2023-11-13 12:16:27

解锁跨浏览器的表单验证：利用Validity State API和Polyfill

导言

表单验证是Web开发中至关重要的一步，可确保用户输入的信息准确有效。浏览器原生的表单验证功能虽然有用，但由于浏览器的不一致性，可能会出现问题。本文将深入探讨如何使用Validity State API和polyfill来实现跨浏览器的表单验证，从而为用户提供一致且可靠的体验。

了解Validity State API

Validity State API是一个强大的工具，可提供有关表单元素当前状态的详细信息。它由两个关键组件组成：

validity属性： 提供有关元素是否为空、符合格式要求以及是否超出限制等的信息。
setCustomValidity()方法： 允许为元素设置自定义验证错误消息，在进行更复杂验证（如检查密码一致性）时很有用。

使用Polyfill扩展浏览器支持

虽然Validity State API在现代浏览器中得到广泛支持，但某些浏览器仍不支持该API。为此，我们可以使用polyfill，它是一种模拟API行为的代码库。推荐使用github.com/jzaefferer/Validity，因为它轻量且易于使用。

实施跨浏览器表单验证

现在我们已经了解了API和polyfill的工作原理，让我们一步步实现跨浏览器表单验证：

导入Polyfill： 首先，导入Validity polyfill并初始化它。
添加事件监听器： 为表单元素添加事件监听器，以便在提交时检查其有效性。
检查有效性： 使用validity属性检查元素是否有效，并在必要时设置自定义错误消息。
提交表单： 如果所有元素都有效，则提交表单。

示例代码

<form>
  <input type="text" id="username" required>
  <input type="password" id="password" required>
  <input type="submit" value="提交">
</form>

import Validity from 'validity';

Validity.init();

document.querySelector('form').addEventListener('submit', (event) => {
  event.preventDefault();

  const username = document.querySelector('#username');
  const password = document.querySelector('#password');

  if (!username.validity.valid) {
    username.setCustomValidity('用户名不能为空');
  }

  if (!password.validity.valid) {
    password.setCustomValidity('密码不能为空');
  }

  if (username.validity.valid && password.validity.valid) {
    event.target.submit();
  }
});