原生 JavaScript 表单验证指南

前端

2023-12-24 13:56:29

理解表单验证

表单验证是收集和处理用户输入的过程，以确保其准确、完整和符合特定要求。验证对于确保数据完整性和应用程序安全至关重要。

原生 JavaScript 表单验证

JavaScript 提供了多种方法来验证表单。您可以使用 HTML5 的内置验证属性，或使用 JavaScript 原生的 API。

HTML5内置验证属性

HTML5 引入了一些内置的验证属性，可以轻松地为表单元素添加验证。例如：

required：指定表单元素是必需的。
type：指定表单元素的数据类型。
pattern：指定表单元素的值必须符合正则表达式。
minlength：指定表单元素的最小长度。
maxlength：指定表单元素的最大长度。

JavaScript 原生 API

除了 HTML5 的内置验证属性，您还可以使用 JavaScript 原生的 API 进行表单验证。常用的方法包括：

checkValidity()：检查表单元素的有效性。
setCustomValidity()：设置表单元素的自定义验证消息。
preventDefault()：阻止表单提交。

最佳实践

使用 HTML5 的内置验证属性。
使用 JavaScript 原生的 API 来补充 HTML5 的验证功能。
提供清晰、友好的错误消息。
使用 JavaScript 禁用已提交的表单。
在服务器端再次验证数据。

实际示例

以下是使用 JavaScript 原生 API 进行表单验证的示例：

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

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

  const elements = form.elements;

  for (let i = 0; i < elements.length; i++) {
    const element = elements[i];

    if (element.checkValidity() === false) {
      alert(element.validationMessage);
      element.focus();
      return;
    }
  }

  // 表单已通过验证，可以提交了
});