Bootstrap 5 表单验证

表单验证是“网页表单验证用户输入准确性的技术过程”。表单将通知用户其错误或要求他们更正。它允许用户提前显示验证。表单是真实的，用户可以继续他们的用户交互。

最初，表单验证功能验证所有必填字段是否包含数据。它只需要一个 bootstrap 5 表单验证类来遍历每个表单字段并检查数据。其次，必须验证输入的数据是否具有正确的格式和值。

语法

以下语法有助于使用 bootstrap 5 类在表单中创建验证。

Bootstrap 5 表单验证的工作原理

以下是 Bootstrap 5 表单验证的工作原理

• CSS 的两个伪类 ":invalid" 和 ":valid" 用于验证 HTML 表单。它适用于元素 <input>、<select> 和 <textarea>。
• Bootstrap 5 将 ":invalid" 和 ":valid" 样式应用于父类 "was-validated"。 "was-validated" 类通常与 <form> 元素关联。页面加载后，没有值的每个必要字段都显示为无效。因此，我们可以在表单提交后选择验证。
• 提交后，".was-validated" 类从 <form> 元素中删除验证，以重置表单的外观。
• 作为后备方案，".is-invalid" 和 ".is-valid" 类可用于服务器端验证，而不是伪类。
• 由于 CSS 的限制，目前无法将样式应用于在表单控件之前的 DOM <label>，除非使用自定义 JavaScript。
• 约束验证 API 是一组用于验证表单控件的 JavaScript 方法，所有现代浏览器都支持该 API。
• 反馈消息可以使用浏览器默认值或我们定制的反馈样式，并带有附加的 HTML 和 CSS。
• JavaScript 的 setCustomvalidity 函数允许自定义验证消息。

注册表单示例

以下示例显示了文本、数字、电子邮件、文本区域和复选框输入元素，并带有表单验证。我们可以使用用户名、电子邮件、手机号码和消息数据字段创建注册表单。输入字段使用 <div> 标签分配表单验证类。

输出

下图显示了带验证的注册表单。

登录表单示例

以下示例显示了带有表单验证的文本、电子邮件。我们可以使用电子邮件和密码输入字段创建登录表单。

输出

下图显示了带验证的登录表单。

结论

此功能使用 bootstrap 5 类在网页中创建用户交互和有效的表单。 Bootstrap 5 表单验证可帮助用户填写必填字段。无效消息默认显示为红色文本。输入正确的数据后，表单字段变为有效。