如何在不使用 <form> 元素的情况下触发 HTML5 表单验证？

2024-03-27 12:37:40

不使用

元素触发 HTML5 验证

概述

HTML5 表单验证是一种强大的工具，可帮助确保用户输入的数据有效且完整。传统上，表单验证通过将表单元素包装在 <form> 元素中来触发。但在某些情况下，将所有字段包装在 <form> 元素中并不切实际。本文将探讨如何绕过 <form> 元素来触发 HTML5 验证。

绕过元素的验证

触发 HTML5 验证而不使用 <form> 元素，有三种方法：

JavaScript 提交表单： 可使用 submit() 方法显式提交表单。将此方法附加到非 <form> 元素（如按钮或链接）上即可。
formdata 对象： 可手动创建 formdata 对象收集表单数据并将其发送到服务器，而无需使用 <form> 元素。
HTML5 自动的验证： 对于某些输入类型（如电子邮件地址和电话号码），HTML5 提供了内置验证功能，会在用户输入时自动验证。可使用 pattern 属性指定自定义验证规则。

代码示例

以下代码演示了如何在不使用 <form> 元素的情况下验证电子邮件地址字段：

<div class="container">
  <h1>HTML5 Validation without <form></h1>
  <label for="email">Email:</label>
  <input type="email" name="email" id="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}<div class="container">
  <h1>HTML5 Validation without <form></h1>
  <label for="email">Email:</label>
  <input type="email" name="email" id="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required>
  <button type="button" id="submit-button">Submit</button>
</div>
quot; required>
  <button type="button" id="submit-button">Submit</button>
</div>

document.getElementById("submit-button").addEventListener("click", function() {
  const emailField = document.getElementById("email");
  if (emailField.checkValidity()) {
    alert("Valid email address!");
  } else {
    alert("Invalid email address!");
  }
});

结论

虽然 <form> 元素通常用于触发 HTML5 验证，但在某些情况下，将其用于所有字段并不切实际。通过利用 JavaScript、formdata 对象和 HTML5 自动验证，我们可以绕过 <form> 元素并仍然触发 HTML5 验证。这提供了在不牺牲验证功能的情况下设计复杂表单的灵活性。