Skip to main content Skip to docs navigation
View on GitHub

Validation校验

Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.通过浏览器默认行为或自定义样式和JavaScript，通过HTML5表单验证向用户提供有价值的、可操作的反馈。

On this page本页内容
We are aware that currently the client-side custom validation styles and tooltips are not accessible, since they are not exposed to assistive technologies. 我们知道，目前无法访问客户端自定义验证样式和工具提示，因为它们未暴露于辅助技术。While we work on a solution, we’d recommend either using the server-side option or the default browser validation method.在处理解决方案时，建议使用服务器端选项或默认浏览器验证方法。

How it works工作原理

Here’s how form validation works with Bootstrap:以下是表单验证如何与Bootstrap一起工作：

  • HTML form validation is applied via CSS’s two pseudo-classes, :invalid and :valid. HTML表单校验是通过CSS的两个伪类:invalid和:valid来应用的。It applies to <input>, <select>, and <textarea> elements.它适用于<input>、<select>和<textarea>。
  • Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the <form>. Bootstrap将:invalid和:valid样式作用于父级.was-validated类，通常应用<form>。Otherwise, any required field without a value shows up as invalid on page load. 否则，任何没有值的必填字段在页面加载时显示为无效。This way, you may choose when to activate them (typically after form submission is attempted).这样，您可以选择何时激活它们（通常在尝试提交表单之后）。
  • To reset the appearance of the form (for instance, in the case of dynamic form submissions using AJAX), remove the .was-validated class from the <form> again after submission.要重置表单的外观（例如，在使用AJAX提交动态表单的情况下），请在提交之后从<form>上删除.was-validated类。
  • As a fallback, .is-invalid and .is-valid classes may be used instead of the pseudo-classes for server-side validation. 作为回退，.is-invalid类和.is-valid类可以代替伪类用于服务器端验证。They do not require a .was-validated parent class.它们不需要.was-validated的父类。
  • Due to constraints in how CSS works, we cannot (at present) apply styles to a <label> that comes before a form control in the DOM without the help of custom JavaScript.由于CSS工作方式的限制，如果不借助于自定义JavaScript的帮助，我们（目前）无法将样式应用于位于DOM中的表单控件之前的<label>。
  • All modern browsers support the constraint validation API, a series of JavaScript methods for validating form controls.所有现代浏览器都支持约束验证API，这是一系列验证表单控件的JavaScript方法。
  • Feedback messages may utilize the browser defaults (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS.反馈消息可以利用浏览器默认值（每个浏览器不同，并且不可通过CSS缩放）或我们的自定义反馈样式以及其他HTML和CSS。
  • You may provide custom validity messages with setCustomValidity in JavaScript.您可以使用JavaScript中的setCustomValidity提供自定义有效性消息。

With that in mind, consider the following demos for our custom form validation styles, optional server-side classes, and browser defaults.考虑到这一点，考虑以下自定义演示样式：自定义表单验证样式、可选服务器端类和浏览器默认值。

Custom styles自定义样式

For custom Bootstrap form validation messages, you’ll need to add the novalidate boolean attribute to your <form>. 对于自定义Bootstrap表单验证消息，您需要将novalidate布尔属性添加到<form>。This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. 这将禁用浏览器默认的反馈工具提示，但仍提供对JavaScript中表单验证API的访问。Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. 尝试提交以下表单；我们的JavaScript将截取提交按钮并向您传递反馈。When attempting to submit, you’ll see the :invalid and :valid styles applied to your form controls.尝试提交时，您将看到应用于表单控件的:invalid和:valid样式。

Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback. 自定义反馈样式应用自定义颜色、边框、焦点样式和背景图标以更好地传达反馈。Background icons for <select>s are only available with .form-select, and not .form-control.<select>的背景图标仅可用于.form-select，而不可用于.form-control。

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting. 
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-4">
<label for="validationCustom01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationCustom02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationCustomUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">@</span>
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
<div class="col-md-6">
<label for="validationCustom03" class="form-label">City</label>
<input type="text" class="form-control" id="validationCustom03" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3">
<label for="validationCustom04" class="form-label">State</label>
<select class="form-select" id="validationCustom04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3">
<label for="validationCustom05" class="form-label">Zip</label>
<input type="text" class="form-control" id="validationCustom05" required>
<div class="invalid-feedback">
Please provide a valid zip.
</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">
Agree to terms and conditions
</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 form</button>
</div>
</form>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
  var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
  Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()

Browser defaults浏览器默认值

Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? 对自定义验证反馈消息或编写JavaScript来更改表单行为不感兴趣？All good, you can use the browser defaults. 很好，您可以使用浏览器默认设置。Try submitting the form below. 尝试提交下面的表单。Depending on your browser and OS, you’ll see a slightly different style of feedback.根据您的浏览器和操作系统，您将看到略有不同的反馈风格。

While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.虽然这些反馈样式不能使用CSS设置样式，但您仍然可以通过JavaScript自定义反馈文本。

@ 
<form class="row g-3">
<div class="col-md-4">
<label for="validationDefault01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationDefault01" value="Mark" required>
</div>
<div class="col-md-4">
<label for="validationDefault02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationDefault02" value="Otto" required>
</div>
<div class="col-md-4">
<label for="validationDefaultUsername" class="form-label">Username</label>
<div class="input-group">
<span class="input-group-text" id="inputGroupPrepend2">@</span>
<input type="text" class="form-control" id="validationDefaultUsername"  aria-describedby="inputGroupPrepend2" required>
</div>
</div>
<div class="col-md-6">
<label for="validationDefault03" class="form-label">City</label>
<input type="text" class="form-control" id="validationDefault03" required>
</div>
<div class="col-md-3">
<label for="validationDefault04" class="form-label">State</label>
<select class="form-select" id="validationDefault04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
</div>
<div class="col-md-3">
<label for="validationDefault05" class="form-label">Zip</label>
<input type="text" class="form-control" id="validationDefault05" required>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
<label class="form-check-label" for="invalidCheck2">
Agree to terms and conditions
</label>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>

Server side服务器端

We recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with .is-invalid and .is-valid. 我们建议使用客户端验证，但如果需要服务器端验证，可以使用.is-invalid和.is-valid指示无效和有效的表单字段。Note that .invalid-feedback is also supported with these classes.请注意这些类也支持.invalid-feedback。

For invalid fields, ensure that the invalid feedback/error message is associated with the relevant form field using aria-describedby (noting that this attribute allows more than one id to be referenced, in case the field already points to additional form text).对于无效字段，请确保使用aria-describedby将无效反馈/错误消息与相关表单字段相关联（注意，如果字段已指向其他表单文本，则此属性允许引用多个id）。

To fix issues with border radii, input groups require an additional .has-validation class.要解决边界半径的问题，输入控件组需要额外的.has-validation类。

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting. 
<form class="row g-3">
<div class="col-md-4">
<label for="validationServer01" class="form-label">First name</label>
<input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationServer02" class="form-label">Last name</label>
<input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationServerUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend3">@</span>
<input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3 validationServerUsernameFeedback" required>
<div id="validationServerUsernameFeedback" class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
<div class="col-md-6">
<label for="validationServer03" class="form-label">City</label>
<input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
<div id="validationServer03Feedback" class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3">
<label for="validationServer04" class="form-label">State</label>
<select class="form-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div id="validationServer04Feedback" class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3">
<label for="validationServer05" class="form-label">Zip</label>
<input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
<div id="validationServer05Feedback" class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
<label class="form-check-label" for="invalidCheck3">
Agree to terms and conditions
</label>
<div id="invalidCheck3Feedback" class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>

Supported elements受支持的元素

Validation styles are available for the following form controls and components:验证样式可用于以下表单控件和组件：

  • <input>s and <textarea>s with .form-control (including up to one .form-control in input groups)带有.form-control的<input>和<textarea>（输入控件组中最多包括一个.form-control）
  • <select>s with .form-select带有.form-select的<select>
  • .form-checks
Please enter a message in the textarea.
Example invalid feedback text
More example invalid feedback text
Example invalid select feedback
Example invalid form file feedback
<form class="was-validated">
<div class="mb-3">
<label for="validationTextarea" class="form-label">Textarea</label>
<textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
<div class="invalid-feedback">
Please enter a message in the textarea.
</div>
</div>
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" id="validationFormCheck1" required>
<label class="form-check-label" for="validationFormCheck1">Check this checkbox</label>
<div class="invalid-feedback">Example invalid feedback text</div>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="validationFormCheck2" name="radio-stacked" required>
<label class="form-check-label" for="validationFormCheck2">Toggle this radio</label>
</div>
<div class="form-check mb-3">
<input type="radio" class="form-check-input" id="validationFormCheck3" name="radio-stacked" required>
<label class="form-check-label" for="validationFormCheck3">Or toggle this other radio</label>
<div class="invalid-feedback">More example invalid feedback text</div>
</div>
<div class="mb-3">
<select class="form-select" required aria-label="select example">
<option value="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="invalid-feedback">Example invalid select feedback</div>
</div>
<div class="mb-3">
<input type="file" class="form-control" aria-label="file example" required>
<div class="invalid-feedback">Example invalid form file feedback</div>
</div>
<div class="mb-3">
<button class="btn btn-primary" type="submit" disabled>Submit form</button>
</div>
</form>

Tooltips工具提示

If your form layout allows it, you can swap the .{valid|invalid}-feedback classes for .{valid|invalid}-tooltip classes to display validation feedback in a styled tooltip. 如果表单布局允许，可以将.{valid|invalid}-feedback类替换为.{valid|invalid}-tooltip类，以在样式化工具提示中显示验证反馈。Be sure to have a parent with position: relative on it for tooltip positioning. 确保有一个带有position: relative的父项用于工具提示定位。In the example below, our column classes have this already, but your project may require an alternative setup.在下面的示例中，我们的列类已经有了这种设置，但是您的项目可能需要另一种设置。

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip. 
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-4 position-relative">
<label for="validationTooltip01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-4 position-relative">
<label for="validationTooltip02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-4 position-relative">
<label for="validationTooltipUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
<input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
<div class="invalid-tooltip">
Please choose a unique and valid username.
</div>
</div>
</div>
<div class="col-md-6 position-relative">
<label for="validationTooltip03" class="form-label">City</label>
<input type="text" class="form-control" id="validationTooltip03" required>
<div class="invalid-tooltip">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 position-relative">
<label for="validationTooltip04" class="form-label">State</label>
<select class="form-select" id="validationTooltip04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-tooltip">
Please select a valid state.
</div>
</div>
<div class="col-md-3 position-relative">
<label for="validationTooltip05" class="form-label">Zip</label>
<input type="text" class="form-control" id="validationTooltip05" required>
<div class="invalid-tooltip">
Please provide a valid zip.
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>

Sass

Variables变量

$form-feedback-margin-top:          $form-text-margin-top;
$form-feedback-font-size:           $form-text-font-size;
$form-feedback-font-style:          $form-text-font-style;
$form-feedback-valid-color:         $success;
$form-feedback-invalid-color:       $danger;
$form-feedback-icon-valid-color:    $form-feedback-valid-color;
$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
$form-feedback-icon-invalid-color:  $form-feedback-invalid-color;
$form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>");

Mixins杂合体

Two mixins are combined together, through our loop, to generate our form validation feedback styles.两个杂合体通过我们的循环组合在一起，以生成表单验证反馈样式。

@mixin form-validation-state-selector($state) {
@if ($state == "valid" or $state == "invalid") {
.was-validated #{if(&, "&", "")}:#{$state},
#{if(&, "&", "")}.is-#{$state} {
@content;
}
} @else {
#{if(&, "&", "")}.is-#{$state} {
@content;
}
}
}
@mixin form-validation-state(
$state,
$color,
$icon,
$tooltip-color: color-contrast($color),
$tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
$focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
) {
.#{$state}-feedback {
display: none;
width: 100%;
margin-top: $form-feedback-margin-top;
@include font-size($form-feedback-font-size);
font-style: $form-feedback-font-style;
color: $color;
}
.#{$state}-tooltip {
position: absolute;
top: 100%;
z-index: 5;
display: none;
max-width: 100%; // Contain to parent when possible
    padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
margin-top: .1rem;
@include font-size($form-feedback-tooltip-font-size);
line-height: $form-feedback-tooltip-line-height;
color: $tooltip-color;
background-color: $tooltip-bg-color;
@include border-radius($form-feedback-tooltip-border-radius);
}
@include form-validation-state-selector($state) {
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
}
.form-control {
@include form-validation-state-selector($state) {
border-color: $color;
@if $enable-validation-icons {
padding-right: $input-height-inner;
background-image: escape-svg($icon);
background-repeat: no-repeat;
background-position: right $input-height-inner-quarter center;
background-size: $input-height-inner-half $input-height-inner-half;
}
&:focus {
border-color: $color;
box-shadow: $focus-box-shadow;
}
}
}
// stylelint-disable-next-line selector-no-qualifying-type
  textarea.form-control {
@include form-validation-state-selector($state) {
@if $enable-validation-icons {
padding-right: $input-height-inner;
background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
}
}
}
.form-select {
@include form-validation-state-selector($state) {
border-color: $color;
@if $enable-validation-icons {
&:not([multiple]):not([size]),
&:not([multiple])[size="1"] {
padding-right: $form-select-feedback-icon-padding-end;
background-image: escape-svg($form-select-indicator), escape-svg($icon);
background-position: $form-select-bg-position, $form-select-feedback-icon-position;
background-size: $form-select-bg-size, $form-select-feedback-icon-size;
}
}
&:focus {
border-color: $color;
box-shadow: $focus-box-shadow;
}
}
}
.form-check-input {
@include form-validation-state-selector($state) {
border-color: $color;
&:checked {
background-color: $color;
}
&:focus {
box-shadow: $focus-box-shadow;
}
~ .form-check-label {
color: $color;
}
}
}
.form-check-inline .form-check-input {
~ .#{$state}-feedback {
margin-left: .5em;
}
}
.input-group .form-control,
.input-group .form-select {
@include form-validation-state-selector($state) {
@if $state == "valid" {
z-index: 1;
} @else if $state == "invalid" {
z-index: 2;
}
&:focus {
z-index: 3;
}
}
}
}

Map映射

This is the validation Sass map from _variables.scss. 这是来自_variables.scss的验证Sass映射。Override or extend this to generate different or additional states.覆盖或扩展此选项以生成不同或其他状态。

$form-validation-states: (
"valid": (
"color": $form-feedback-valid-color,
"icon": $form-feedback-icon-valid
),
"invalid": (
"color": $form-feedback-invalid-color,
"icon": $form-feedback-icon-invalid
)
);

Maps of $form-validation-states can contain three optional parameters to override tooltips and focus styles.$form-validation-states的映射可以包含三个可选参数，以覆盖工具提示和焦点样式。

Loop循环

Used to iterate over $form-validation-states map values to generate our validation styles. 用于迭代$form-validation-states映射值以生成验证样式。Any modifications to the above Sass map will be reflected in your compiled CSS via this loop.对上述Sass映射的任何修改都将通过此循环反映在编译的CSS中。

@each $state, $data in $form-validation-states {
@include form-validation-state($state, $data...);
}

Customizing定制

Validation states can be customized via Sass with the $form-validation-states map. 可以使用$form-validation-states映射通过Sass自定义验证状态。Located in our _variables.scss file, this Sass map is how we generate the default valid/invalid validation states. Included is a nested map for customizing each state’s color, icon, tooltip color, and focus shadow. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.包括一个嵌套贴图，用于自定义每个州的颜色、图标、工具提示颜色和焦点阴影。虽然浏览器不支持其他状态，但使用自定义样式的浏览器可以轻松添加更复杂的表单反馈。

Please note that we do not recommend customizing $form-validation-states values without also modifying the form-validation-state mixin.请注意，我们不建议在不修改form-validation-state杂合体的情况下自定义$form-validation-states值。