Bootstrap 简明教程

Bootstrap - Validation

本章将讨论 Bootstrap 验证。Bootstrap 5 验证通过为用户提供有用的反馈、支持默认浏览器行为、自定义样式和 JavaScript 来增强 HTML5 表单验证。

This chapter will discuss about Bootstrap validation. Bootstrap 5 Validation enhances HTML5 form validation by offering useful feedback to users, supporting default browser behavior, custom styles, and JavaScript.

How form validation works in Bootstrap

The two pseudo-classes :invalid and :valid in CSS are used to provide HTML form validation. It applies to the <textarea>, <select>, and <input> elements.
Bootstrap applies the * :invalid* and :valid styles to the parent .was-validated class. Fields without a value show as invalid when the page loads. You choose when to activate them (usually after a form submission).
To restore the original appearance of the form after dynamic submissions using Ajax, the class .was-validated should be removed from the <form> to reset its appearance.
The pseudo-classes can be replaced with the .is-invalid and .is-valid classes for server-side validation as a fallback, without the need for a .was-validated parent class.
Currently, CSS limitations prevent us from directly applying styles to a <label> element that precedes a form control in the DOM without the help of custom JavaScript.
The constraint validation API, which consists of various JavaScript methods for validating form controls, is supported by all contemporary web browsers.
Use browser default styles or create custom feedback styles using HTML/CSS.
Use setCustomValidity method in JavaScript for unique validity messages.

我们来看看一些自定义表单验证样式、可选的服务端类和浏览器默认设置的示例。

Let’s look at some examples of custom form validation styles, optional server-side classes and browser defaults.

Custom styles

Add novalidate boolean attribute to the <form> to receive custom validation messages from Bootstrap.
Browser default feedback tooltips are disabled with above boolean attribute but JavaScript validation APIs still work. Submitting this form will trigger JavaScript to provide feedback, displaying :invalid and :valid styles on form controls.
Custom feedback styles improve feedback communication by adding colors, borders, focus styles, and backdrop icons. Backdrop icons for <select> are only available for .form-select, and not .form-control.

该示例演示带表单验证功能的 Bootstrap 表单，以确保在提交表单之前正确填写必填字段。

This example demonstrates a Bootstrap form with validation features, to ensure that the required fields are filled out correctly before the form can be submitted.

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
   <title>Bootstrap - Validation</title>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
   <form class="row g-3 needs-validation" novalidate>
     <div class="col-md-4">
       <label for="validationCustomName" class="form-label">Full Name</label>
       <input type="text" class="form-control" id="validationCustomName" value="Jhon Miller" required>
       <div class="invalid-feedback">
           Correct input!
       </div>
     </div>

     <div class="col-md-4">
       <label for="validationCustomEmail" class="form-label">Email Id</label>
       <div class="input-group has-validation">
         <input type="text" class="form-control" id="validationCustomEmail" aria-describedby="inputGroupPrepend" required>
         <span class="input-group-text" id="inputGroupPrepend">@tutorialspoint.com</span>
         <div class="invalid-feedback">
            Please enter correct mail id.
         </div>
       </div>
     </div>

     <div class="col-md-4">
       <label for="validationCustomPhone" class="form-label">Mobile no</label>
       <input type="text" class="form-control" id="validationCustomPhone" required>
       <div class="invalid-feedback">
          please enter correct mobile no.
       </div>
     </div>

     <div class="col-md-6">
       <label for="validationAddress" class="form-label">Address</label>
         <input type="text" class="form-control" id="validationAddress" value="XYZ - 123" required>
         <div class="valid-feedback">
          Correct input!
         </div>
       </div>
     </div>

     <div class="col-md-3">
       <label for="validationCustom" class="form-label">Gender</label>
       <select class="form-select" id="validationCustom" required>
         <option selected disabled value="">Choose...</option>
         <option>Male</option>
         <option>Female</option>
         <option>Others</option>
       </select>
       <div class="invalid-feedback">
          Please select gender.
       </div>
     </div>

     <div class="col-12">
       <div class="form-check">
         <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
         <label class="form-check-label" for="invalidCheck">
            I have reviewed and agree to Terms of Services and Privacy Policy.
         </label>
         <div class="invalid-feedback">
            You must agree before submitting.
         </div>
       </div>
     </div>

     <div class="col-12">
       <button class="btn btn-primary" type="submit">Submit</button>
     </div>
   </form>
  <script>
    (() => {
    'use strict'

    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    const forms = document.querySelectorAll('.needs-validation')

    // Loop over them and prevent submission
    Array.from(forms).forEach(form => {
      form.addEventListener('submit', event => {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }

        form.classList.add('was-validated')
      }, false)
    })
  })()
  </script>
  </body>
  </html>

以下 JavaScript 代码片段在有无效字段时禁用表单提交。它通过在表单中添加事件侦听器，以及如果表单无效则阻止默认表单提交行为，以实现此目的。

The following JavaScript code snippet disables form submissions if there are invalid fields. It achieves this by adding event listeners to the forms and preventing the default form submission behavior if the form is not valid.

    // Example JavaScript starter for disabling form submissions if there are invalid fields
    (() => {
      'use strict'

      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      const forms = document.querySelectorAll('.needs-validation')

      // Loop over them and prevent submission
      Array.from(forms).forEach(form => {
        form.addEventListener('submit', event => {
          if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
          }

          form.classList.add('was-validated')
        }, false)
      })
    })()

Browser defaults

We can also use browser default messages instead of custom validation message. Depending on your browser and OS, feedback style varies slightly.
Although CSS cannot be used to style these feedback styles, JavaScript can still be used to alter the feedback text.

尝试提交以下示例中的表单，以了解默认浏览器验证消息是如何显示的。

Try submitting the form in the following example to how default browser validation messages show up.

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Form - Validation</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <form class="row g-3">
        <div class="col-md-4">
          <label for="validationDefaultName" class="form-label">Full Name</label>
          <input type="text" class="form-control" id="validationDefaultName" value="name" required>
        </div>
        <div class="col-md-4">
          <label for="validationDefaultEmail" class="form-label">Email Id</label>
          <div class="input-group">
            <input type="text" class="form-control" id="validationDefaultEmail" aria-describedby="inputGroupPrepend" required>
            <span class="input-group-text" id="inputGroupPrepend">@tutorialspoint.com</span>
          </div>
        </div>
        <div class="col-md-4">
          <label for="validationDefaultMob" class="form-label">Mobile No</label>
          <input type="text" class="form-control" id="validationDefaultMob" value="" required>
        </div>
        <div class="col-md-6">
          <label for="validationDefaultAddress" class="form-label">Address</label>
          <input type="text" class="form-control" id="validationDefaultAddress" required>
        </div>
        <div class="col-md-3">
          <label for="validationDefaultGender" class="form-label">Gender</label>
          <select class="form-select" id="validationDefaultGender" required>
            <option selected disabled value="">Choose...</option>
            <option>Male</option>
            <option>Female</option>
            <option>Others</option>
          </select>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
            <label class="form-check-label" for="invalidCheck2">
              I have reviewed and agree to Terms of Services and Privacy Policy.
            </label>
          </div>
        </div>
        <div class="col-12">
          <button class="btn btn-primary" type="submit">Submit</button>
        </div>
      </form>
    </body>
    </html>

Server-side

Client-side validation is recommended, but in case of server-side validation, use .is-invalid and .is-valid directives to indicate form field status. Also consider using .invalid-feedback with these classes.
Use aria-describedby attribute to link invalid feedback/error message to the form field in the case of invalid fields. (Allows more than one id to be referenced if field connects to other form text.)
Input groups need an additional .has-validation class for dealing with issues with border radius.

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Validation</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <form class="row g-3">
      <div class="col-md-4">
        <label for="validationServerName" class="form-label">Full name</label>
        <input type="text" class="form-control is-valid" id="validationServerName" value="Mark" required>
        <div class="valid-feedback">
          enter your name
        </div>
      </div>
      <div class="col-md-4">
        <label for="validationServerEmail" class="form-label">Email Id</label>
        <div class="input-group has-validation">
          <input type="text" class="form-control is-invalid" id="validationServerEmail"
            aria-describedby="inputGroupPrepend3 validationServerEmailFeedback" required>
          <span class="input-group-text" id="inputGroupPrepend3">@tutorialspoint.com</span>
          <div id="validationServerEmailFeedback" class="invalid-feedback">
            Please enter mail id.
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <label for="validationServerMob" class="form-label">Mobile no</label>
        <input type="text" class="form-control is-valid" id="validationServerMob" value="" required>
        <div class="valid-feedback">
          Please enter mobile no
        </div>
      </div>
      <div class="col-md-6">
        <label for="validationServerAddress" class="form-label">Address</label>
        <input type="text" class="form-control is-invalid" id="validationServerAddress"
          aria-describedby="validationServerAddressFeedback" required>
        <div id="validationServerAddressFeedback" class="invalid-feedback">
          Please enter a valid Address.
        </div>
      </div>
      <div class="col-md-3">
        <label for="validationServer04" class="form-label">Gender</label>
        <select class="form-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback"
          required>
          <option selected disabled value="">Choose...</option>
          <option>Male</option>
          <option>Female</option>
          <option>Others</option>
        </select>
        <div id="validationServer04Feedback" class="invalid-feedback">
          Please select a valid gender.
        </div>
      </div>
      <div class="col-12">
        <div class="form-check">
          <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheckPolicy"
            aria-describedby="invalidCheckFeedback" required>
          <label class="form-check-label" for="invalidCheckPolicy">
            I have reviewed and agree to Terms of Services and Privacy Policy.
          </label>
          <div id="invalidCheckFeedback" class="invalid-feedback">
            You must agree before submitting.
          </div>
        </div>
      </div>
      <div class="col-12">
        <button class="btn btn-primary" type="submit">Submit</button>
      </div>
    </form>
  </body>
  </html>;

Supported elements

以下表单控件和组件支持验证样式：

The following form controls and components support validation styles:

<textarea> and <input> using the .form-control (allowing input groups to contain up to one .form-control).
<select> using .form-select
.form-check

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Form - Validation</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <form class="was-validated">
        <div class="mb-3">
          <label for="validationTextarea" class="form-label">Add comment</label>
          <textarea class="form-control" id="validationTextarea" placeholder="Comment Here" required></textarea>
          <div class="invalid-feedback">
            Add comment
          </div>
        </div>
        <div class="form-check mb-3">
          <input type="checkbox" class="form-check-input" id="validationFormCheck" required>
          <label class="form-check-label" for="validationFormCheck">Item One</label>
          <div class="invalid-feedback">Invalid Answer</div>
        </div>
        <div class="form-check">
          <input type="radio" class="form-check-input" id="validationFormRadio1" name="radio-stacked" required>
          <label class="form-check-label" for="validationFormRadio1">Item Two</label>
        </div>
        <div class="form-check mb-3">
          <input type="radio" class="form-check-input" id="validationFormRadio2" name="radio-stacked" required>
          <label class="form-check-label" for="validationFormRadio2">Item Three</label>
          <div class="invalid-feedback">Invalid Answer</div>
        </div>
        <div class="mb-3">
          <select class="form-select" required aria-label="select example">
            <option value="">Gender</option>
            <option value="1">Male</option>
            <option value="2">Female</option>
            <option value="3">Others</option>
          </select>
          <div class="invalid-feedback">Invalid selection</div>
        </div>
        <div class="mb-3">
          <input type="file" class="form-control" aria-label="file example" required>
          <div class="invalid-feedback">File size more than 256kb</div>
        </div>
        <div class="mb-3">
          <button class="btn btn-primary" type="submit" disabled>Submit</button>
        </div>
      </form>
    </body>
    </html>

Tooltips

To display validation feedback in a styled tooltip, swap the classes .{valid|invalid}-feedback for .{valid|invalid}-tooltip if the layout permits it.
To position the tooltip, make sure the parent has the property position: relative.

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Validation</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <form class="row g-3 needs-validation" novalidate>
      <div class="col-md-4 position-relative">
        <label for="validationTooltipName" class="form-label">Full Name</label>
        <input type="text" class="form-control" id="validationTooltipName" value="Jhon Miller" required>
        <div class="valid-tooltip">
          Correct Input!
        </div>
      </div>
      <div class="col-md-4 position-relative">
        <label for="validationTooltipEmail" class="form-label">Email Id</label>
        <div class="input-group has-validation">
          <input type="text" class="form-control" id="validationTooltipEmail" aria-describedby="validationTooltipEmailPrepend" required>
          <span class="input-group-text" id="validationTooltipEmailPrepend">@tutorialspoint.com</span>
          <div class="invalid-tooltip">
           Please enter mail id.
          </div>
        </div>
      </div>
      <div class="col-md-4 position-relative">
        <label for="validationTooltipMob" class="form-label">Mobile no</label>
        <input type="text" class="form-control" id="validationTooltipMob" required>
        <div class="invalid-tooltip">
          Please enter mobile no.
        </div>
      </div>

      <div class="col-md-6 position-relative">
        <label for="validationTooltipAddress" class="form-label">Address</label>
        <input type="text" class="form-control" id="validationTooltipAddress" value="XYZ - 123" required>
        <div class="valid-tooltip">
         Correct Input!
        </div>
      </div>
      <div class="col-md-3 position-relative">
        <label for="validationTooltip04" class="form-label">Gender</label>
        <select class="form-select" id="validationTooltip04" required>
          <option selected disabled value="">Choose...</option>
          <option>Male</option>
          <option>Female</option>
          <option>Others</option>
        </select>
        <div class="invalid-tooltip">
          Please select a valid gender.
        </div>
      </div>

      </div>
      <div class="col-12">
        <button class="btn btn-primary" type="submit">Submit</button>
      </div>
    </form>
    <script>
      (() => {
    'use strict'

    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    const forms = document.querySelectorAll('.needs-validation')

    // Loop over them and prevent submission
    Array.from(forms).forEach(form => {
      form.addEventListener('submit', event => {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }

        form.classList.add('was-validated')
      }, false)
    })
  })()
    </script>
  </body>
  </html>