跳到主要内容
在 GitHub 查看原文

表单校验

通过浏览器默认行为或自定义样式和 JavaScript，使用 HTML5 表单验证向你的用户提供有价值的、可操作的反馈。

本页目录

我们意识到，目前客户端自定义验证样式和工具提示无法访问，因为它们未向辅助技术公开。在我们努力解决方案的同时，我们建议使用服务器端选项或默认的浏览器验证方法。

它是如何工作的

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

  • HTML 表单验证是通过 CSS 的两个伪类来实现的， :invalid 和 :valid。它适用于 <input>, <select>，和 <textarea> 元素。
  • Bootstrap 将 :invalid 和 :valid 样式限定在父元素 .was-validated 类中（通常加在 <form> 上）。否则，任何没有值的必填字段在页面加载时都会显示为无效。这样，你可以选择何时激活它们（通常在尝试提交表单之后）。
  • 要重置表单的外观（例如，在使用 Ajax 的动态表单提交的情况下），请在再次提交前，从 <form> 上移除 .was-validated 类。
  • 作为替代方案，可以使用 .is-invalid 和 .is-valid 类代替伪类，用于服务器端验证。它们不需要父级 .was-validated 类。
  • 由于 CSS 的工作方式有限制，我们目前无法将样式应用到一个 <label> 在不借助自定义 JavaScript 的情况下，在 DOM 中位于表单控件之前的元素。
  • 所有现代浏览器都支持 约束验证 API，一系列用于验证表单控件的 JavaScript 方法。
  • 反馈信息可能会使用 浏览器默认设置 （每个浏览器不同，并且无法通过 CSS 样式化）或使用我们自定义的反馈样式，附加 HTML 和 CSS。
  • 你可以提供自定义有效性消息 setCustomValidity 在 JavaScript 中。

考虑到这一点，请查看以下我们自定义表单验证样式、可选服务器端类以及浏览器默认设置的演示。

自定义样式

对于自定义 Bootstrap 表单验证消息，你需要添加 novalidate 布尔属性到你的 <form>这会禁用浏览器默认的反馈工具提示，但仍然可以通过 JavaScript 访问表单验证 API。尝试提交下面的表单；我们的 JavaScript 会拦截提交按钮并向你传递反馈。在尝试提交时，你会看到 :invalid 和 :valid 应用于你的表单控件的样式。

自定义反馈样式应用自定义颜色、边框、焦点样式和背景图标，以更好地传达反馈。<select>的背景图标仅在.form-select中可用，而在.form-control中不可用。

看起来不错！
看起来不错！
@
请选择一个用户名。
请提供一个有效的城市。
请选择一个有效的州。
请提供有效的邮政编码。
你必须同意才能提交。
HTML
<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
(() => {
  '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<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'was-validated'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span>

})
})()

浏览器默认设置

不想要自定义验证反馈消息或编写 JavaScript 来更改表单行为？没问题，你可以使用浏览器默认设置。试着提交下面的表单。根据你的浏览器和操作系统，你会看到略微不同风格的反馈。

虽然这些反馈样式不能通过 CSS 进行样式化，但你仍然可以通过 JavaScript 自定义反馈文本。

@
HTML
<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>

服务器端

我们建议使用客户端验证，但如果你需要服务器端验证，你可以使用.is-invalid和.is-valid来标记无效和有效的表单字段。请注意，这些类也支持.invalid-feedback。

对于无效的字段，确保将无效反馈/错误信息与相关表单字段关联，使用 aria-describedby（请注意，该属性允许引用多个 id，以防该字段已经指向其他表单文本）。

为了解决 边框圆角问题，输入组需要额外的 .has-validation 类。

看起来不错！
看起来不错！
@
请选择一个用户名。
请提供一个有效的城市。
请选择一个有效的州。
请提供有效的邮政编码。
你必须同意才能提交。
HTML
<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>

支持的元素

以下表单控件和组件可用验证样式：

  • <input>和 <textarea>带有s .form-control （包括最多一个 .form-control 在输入组中）
  • <select>带有s .form-select
  • .form-checks
请在文本区域输入消息。
示例无效反馈文本
更多示例无效反馈文本
示例无效选择反馈
示例无效表单文件反馈
HTML
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea" class="form-label">Textarea</label>
    <textarea class="form-control" 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>

工具提示

如果你的表单布局允许，你可以将.{valid|invalid}-feedback类换成.{valid|invalid}-tooltip类，以在样式化的提示工具中显示验证反馈。确保其父元素上有position: relative以便提示工具定位。在下面的示例中，我们的列类已经具备此功能，但你的项目可能需要其他设置。

看起来不错！
看起来不错！
@
请选择一个独特且有效的用户名。
请提供一个有效的城市。
请选择一个有效的州。
请提供有效的邮政编码。
HTML
<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>

CSS

变量

在 v5.3.0 中添加

作为 Bootstrap 不断发展的 CSS 变量方法的一部分，表单现在使用本地 CSS 变量进行验证，以增强实时定制。CSS 变量的值通过 Sass 设置，因此仍然支持 Sass 定制。

scss/_root.scss
--#{$prefix}form-valid-color: #{$form-valid-color};
--#{$prefix}form-valid-border-color: #{$form-valid-border-color};
--#{$prefix}form-invalid-color: #{$form-invalid-color};
--#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};

这些变量也是颜色模式自适应的，这意味着它们在暗模式下会改变颜色。

Sass 变量

scss/_variables.scss
$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.73.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.1'/></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>");

scss/_variables.scss
$form-valid-color:                  $form-feedback-valid-color;
$form-valid-border-color:           $form-feedback-valid-color;
$form-invalid-color:                $form-feedback-invalid-color;
$form-invalid-border-color:         $form-feedback-invalid-color;
scss/_variables-dark.scss
$form-valid-color-dark:             $green-300;
$form-valid-border-color-dark:      $green-300;
$form-invalid-color-dark:           $red-300;
$form-invalid-border-color-dark:    $red-300;

Sass mixin

通过我们的循环，两个 mixin 被组合在一起，以生成我们的表单验证反馈样式。

scss/mixins/_forms.scss
@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),
$border-color: $color
) {
.#{$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: $border-color;


  <span class="token keyword">@if</span> <span class="token selector"><span class="token variable">$enable-validation-icons</span> </span><span class="token punctuation">{</span>
    <span class="token property">padding-right</span><span class="token punctuation">:</span> <span class="token variable">$input-height-inner</span><span class="token punctuation">;</span>
    <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">escape-svg</span><span class="token punctuation">(</span><span class="token variable">$icon</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span>
    <span class="token property">background-position</span><span class="token punctuation">:</span> right <span class="token variable">$input-height-inner-quarter</span> center<span class="token punctuation">;</span>
    <span class="token property">background-size</span><span class="token punctuation">:</span> <span class="token variable">$input-height-inner-half</span> <span class="token variable">$input-height-inner-half</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector"><span class="token parent important">&amp;</span>:focus </span><span class="token punctuation">{</span>
    <span class="token property">border-color</span><span class="token punctuation">:</span> <span class="token variable">$border-color</span><span class="token punctuation">;</span>
    <span class="token keyword">@if</span> <span class="token selector"><span class="token variable">$enable-shadows</span> </span><span class="token punctuation">{</span>
      <span class="token keyword">@include</span> <span class="token function">box-shadow</span><span class="token punctuation">(</span><span class="token variable">$input-box-shadow</span><span class="token punctuation">,</span> <span class="token variable">$focus-box-shadow</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">@else</span> <span class="token punctuation">{</span>
      <span class="token comment">// Avoid using mixin so we can pass custom focus shadow properly</span>
      <span class="token property">box-shadow</span><span class="token punctuation">:</span> <span class="token variable">$focus-box-shadow</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

}
// 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: $border-color;
  <span class="token keyword">@if</span> <span class="token selector"><span class="token variable">$enable-validation-icons</span> </span><span class="token punctuation">{</span>
    &amp;<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[multiple]<span class="token punctuation">)</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[size]<span class="token punctuation">)</span><span class="token punctuation">,</span>
    &amp;<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[multiple]<span class="token punctuation">)</span><span class="token selector">[size="1"] </span><span class="token punctuation">{</span>
      <span class="token property">--<span class="token variable">#{$prefix}</span>form-select-bg-icon</span><span class="token punctuation">:</span> #<span class="token punctuation">{</span><span class="token function">escape-svg</span><span class="token punctuation">(</span><span class="token variable">$icon</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
      <span class="token property">padding-right</span><span class="token punctuation">:</span> <span class="token variable">$form-select-feedback-icon-padding-end</span><span class="token punctuation">;</span>
      <span class="token property">background-position</span><span class="token punctuation">:</span> <span class="token variable">$form-select-bg-position</span><span class="token punctuation">,</span> <span class="token variable">$form-select-feedback-icon-position</span><span class="token punctuation">;</span>
      <span class="token property">background-size</span><span class="token punctuation">:</span> <span class="token variable">$form-select-bg-size</span><span class="token punctuation">,</span> <span class="token variable">$form-select-feedback-icon-size</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

  <span class="token selector"><span class="token parent important">&amp;</span>:focus </span><span class="token punctuation">{</span>
    <span class="token property">border-color</span><span class="token punctuation">:</span> <span class="token variable">$border-color</span><span class="token punctuation">;</span>
    <span class="token keyword">@if</span> <span class="token selector"><span class="token variable">$enable-shadows</span> </span><span class="token punctuation">{</span>
      <span class="token keyword">@include</span> <span class="token function">box-shadow</span><span class="token punctuation">(</span><span class="token variable">$form-select-box-shadow</span><span class="token punctuation">,</span> <span class="token variable">$focus-box-shadow</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">@else</span> <span class="token punctuation">{</span>
      <span class="token comment">// Avoid using mixin so we can pass custom focus shadow properly</span>
      <span class="token property">box-shadow</span><span class="token punctuation">:</span> <span class="token variable">$focus-box-shadow</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

}
.form-control-color {
@include form-validation-state-selector($state) {
@if $enable-validation-icons {
width: add($form-color-width, $input-height-inner);
}
}
}
.form-check-input {
@include form-validation-state-selector($state) {
border-color: $border-color;
  <span class="token selector"><span class="token parent important">&amp;</span>:checked </span><span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token variable">$color</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector"><span class="token parent important">&amp;</span>:focus </span><span class="token punctuation">{</span>
    <span class="token property">box-shadow</span><span class="token punctuation">:</span> <span class="token variable">$focus-box-shadow</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">~ .form-check-label </span><span class="token punctuation">{</span>
    <span class="token property">color</span><span class="token punctuation">:</span> <span class="token variable">$color</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

}
.form-check-inline .form-check-input {
~ .#{$state}-feedback {
margin-left: .5em;
}
}
.input-group {
> .form-control:not(:focus),
> .form-select:not(:focus),
> .form-floating:not(:focus-within) {
@include form-validation-state-selector($state) {
@if $state == "valid" {
z-index: 3;
} @else if $state == "invalid" {
z-index: 4;
}
}
}
}
}

Sass 映射

这是来自 _variables.scss 的验证 Sass 映射。覆盖或扩展此映射以生成不同或额外的状态。

scss/_variables.scss
$form-validation-states: (
  "valid": (
    "color": var(--#{$prefix}form-valid-color),
    "icon": $form-feedback-icon-valid,
    "tooltip-color": #fff,
    "tooltip-bg-color": var(--#{$prefix}success),
    "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
    "border-color": var(--#{$prefix}form-valid-border-color),
  ),
  "invalid": (
    "color": var(--#{$prefix}form-invalid-color),
    "icon": $form-feedback-icon-invalid,
    "tooltip-color": #fff,
    "tooltip-bg-color": var(--#{$prefix}danger),
    "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),
    "border-color": var(--#{$prefix}form-invalid-border-color),
  )
);

$form-validation-states 的Map可以包含三个可选参数，用于覆盖工具提示和焦点样式。

Sass 循环

用于迭代 $form-validation-states 映射值以生成我们的验证样式。对上面的 Sass 映射所做的任何修改都将通过此循环反映在你编译的 CSS 中。

scss/表单/_验证.scss
@each $state, $data in $form-validation-states {
  @include form-validation-state($state, $data...);
}

自定义

验证状态可以通过 Sass 使用 $form-validation-states 映射进行自定义。位于我们的 _variables.scss 文件中，这个 Sass 映射是我们生成默认 valid/invalid 验证状态的方式。包含一个嵌套映射，用于自定义每个状态的颜色、图标、提示颜色和焦点阴影。虽然浏览器不支持其他状态，但使用自定义样式的人可以轻松添加更复杂的表单反馈。