HTML 的约束验证

2023-11-01 09:01:34

HTML5 的约束验证

HTML5 约束验证 API 允许您在客户端验证表单数据，这为 Web 表单带来了很多好处：

减少服务器端验证： 客户端验证可以减少服务器端的往返次数，从而提高性能。
提高用户体验： 实时验证错误可以帮助用户立即修复问题，避免提交无效数据。
增强安全性： 通过阻止无效数据提交，可以防止恶意输入和数据篡改。

使用约束验证

要使用约束验证，您需要在 HTML 表单中添加 pattern 或 required 等约束属性。例如：

<input type="text" name="username" pattern="[a-zA-Z0-9]+">
<input type="email" name="email" required>

pattern 属性指定了一个正则表达式，用于验证输入是否与指定模式匹配。required 属性表示该字段是必需的。

约束类型

HTML5 提供了多种预定义的约束类型，包括：

required - 必填字段
pattern - 输入必须匹配指定的正则表达式
min - 输入必须大于或等于指定的值
max - 输入必须小于或等于指定的值
minLength - 输入必须包含指定数量的字符或更多
maxLength - 输入必须包含指定数量的字符或更少
email - 输入必须是有效的电子邮件地址
url - 输入必须是有效的 URL

自定义验证规则

除了预定义的约束类型之外，您还可以定义自己的自定义验证规则。为此，您可以使用 setCustomValidity() 方法设置自定义验证消息：

const form = document.querySelector('form');

form.addEventListener('submit', (e) => {
  e.preventDefault();

  const password = document.querySelector('input[name="password"]');

  if (password.value.length < 8) {
    password.setCustomValidity('密码必须至少包含 8 个字符。');
  } else {
    password.setCustomValidity('');
  }
});

处理验证结果

当用户提交表单时，浏览器将使用指定的约束验证输入。如果验证失败，将触发 invalid 事件，您可以使用它来显示错误消息并阻止表单提交。

form.addEventListener('invalid', (e) => {
  e.preventDefault();

  const invalidElements = e.target.querySelectorAll(':invalid');
  invalidElements.forEach((element) => {
    const errorMessage = element.validationMessage;
    // 显示错误消息
  });
});