How to verify bootstrap form

Bootstrap provides form verification capabilities that can be added to projects by importing CSS and JavaScript. Create a form element and force the fields or pattern attributes to be filled in with the required attribute to verify a specific format. You can also customize the verification message. When a form is submitted, Bootstrap automatically performs a check, displays an error message and blocks the submission. FAQ: Disable verification removes the required and pattern attributes; the checkValidity() method can be manually triggered; the validity attribute can obtain the verification result.

Bootstrap Form Verification

Bootstrap provides simple and easy-to-use form verification functions to help developers easily verify form input.

How to use Bootstrap form verification

1. Importing Bootstrap CSS and JavaScript

    <code class="html"><link rel="stylesheet" href="path/to/bootstrap.min.css"> <script src="path/to/bootstrap.bundle.min.js"></script></code>

2. Create form elements

    <code class="html"><form> <input type="text" id="name" name="name" placeholder="姓名" required> <input type="email" id="email" name="email" placeholder="邮箱" required> <button type="submit" class="btn btn-primary">提交</button> </form></code>

3. Add verification rules
   Use required attribute to force the fields to be filled in. You can also specify regular expressions using pattern attribute to verify that the input complies with a specific format, such as an email address:

    <code class="html"><input type="email" id="email" name="email" placeholder="邮箱" required pattern="[a-z0-9._% -] @[a-z0-9.-] \.[az]{2,}$"></code>

4. Custom verification message
   You can use data attribute to customize verification message:

    <code class="html"><input type="text" id="name" name="name" placeholder="姓名" required data-invalid-feedback="请输入您的姓名"></code>

5. Submit Form
   When a form is submitted, Bootstrap will automatically perform verification. If the verification fails, an error message is displayed and the form is submitted is blocked.

Frequently Asked Questions

• How to disable verification?
  Removes required and pattern properties.

• How to trigger verification manually?
  Use checkValidity() method:

   <code class="javascript">document.getElementById("form").checkValidity();</code>

• How to get the verification result?
  Use validity property:

   <code class="javascript">const nameInput = document.getElementById("name"); console.log(nameInput.validity.valid); // 返回true 或false</code>

The above is the detailed content of How to verify bootstrap form. For more information, please follow other related articles on the PHP Chinese website!