使用checkValidity函数进行表单验证- Javascript

在前端开发中，表单验证是非常重要的一环。它确保用户提交的数据符合预期并且能够正确地在后台处理。

Javascript 提供了一个内建函数 checkValidity()，可以让开发人员在表单提交前方便地执行一些简单的客户端验证。

checkValidity函数的使用

checkValidity()放置于HTML5表单元素模型之中，如：input、textarea、select。当提交表单或验证用户输入时，可在每个 HTML5表单元素节点对象 的上下文中调用此方法。

比如，我们可以这样调用：

const formElem = document.getElementById('myForm');
let validity = formElem.checkValidity();
if (validity) {
  // 表单验证通过
  submitForm();
} else {
  // 表单验证失败
  handleInvalidForm();
}

使用此方法时，开发人员无需编写大量 JavaScript 来检查表单的有效性。该函数会基于构建表单时指定的 HTML5 验证属性自动执行验证。例如：

<form>
  <label for="emailInput">Email Address:</label>
  <input type="email" id="emailInput" name="email" required>

  <label for="passwordInput">Password:</label>
  <input type="password" id="passwordInput" name="password" minlength="8" required>

  <button type="submit">Submit</button>
</form>

在上面的代码中，如果用户没有在 Email Address 输入框中输入值，将无法提交表单。类似地，如果用户的密码长度小于 8 个字符，则无法提交表单。这些验证均是基于 html5 表单属性的。

checkValidity函数的返回值

当调用 checkValidity() 函数时，它将验证整个表单并返回一个布尔值：

• 如果表单验证成功，则返回 true。
• 如果表单验证失败，则返回 false。

我们可以利用此返回值进行一些自定义操作。例如，我们可以在表单提交之前向用户显示出错信息。可以通过HTML5 setCustomValidity 方法来实现，更多信息可以查看 HTML5 Constraint Validation API

使用场景举例

检查输入框是否为空

我们可以在 HTML 中通过 required 属性来确保输入框不为空，但是如果需要在 Javascript 中检查输入框是否为空，可以这样做：

if (inputElem.checkValidity()) {
    // 输入框不为空
} else {
    // 输入框为空
}

自定义正则表达式的验证

有时，我们需要验证输入的值是否符合我们自定义的格式。可以使用 pattern 属性为输入框指定一个正则表达式来进行验证。例如：

<input type="text" pattern="\d{3}-?\d{2}-?\d{4}" required>

该输入框要求用户输入一个由一个三位数字，一个连字符（可选），两个数字，另一个连字符（可选）和四个数字组成的字符串。如果用户输入的值与此模式不匹配，则无法提交表单。 通过使用 checkValidity() 函数，我们可以检查输入框是否符合此模式。

if (inputElem.checkValidity()) {
    // 输入值符合模式
} else {
    // 输入值不符合模式
}

总结

在现代前端开发中，表单验证是必不可少的一部分。HTML5 提供了很多验证属性，可以帮助开发人员执行基本的表单验证。使用 Javascript 的 checkValidity() 函数，我们可以在表单提交之前做一些简单的客户端验证，使得网站更加可靠和健壮。