验证方式

验证-Bootstrap 5和Material Design 2.0表格

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

注意:我们当前建议使用自定义验证样式(原生) 浏览器默认验证消息未始终暴露于以下辅助技术中 所有浏览器(最著名的是台式机和移动设备上的Chrome)。


基本例子

对于自定义MDB表单验证消息,您需要添加 您的 novalidate 布尔属性<form>.这将禁用 浏览器默认的反馈工具提示,但仍提供对表单验证API的访问权限 JavaScript。尝试提交以下表格;我们的JavaScript会拦截“提交”按钮, 将反馈转发给您。尝试提交时,您会看到:invalid :valid 样式应用于您的表单控件。

自定义反馈样式将自定义颜色,边框,焦点样式和背景图标应用于 更好地传达反馈。

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid zip.
You must agree before submitting.

          <form class="row g-3 needs-validation" novalidate>
            <div class="col-md-4">
              <div class="form-outline">
                <input
                  type="text"
                  class="form-control"
                  id="validationCustom01"
                  value="Mark"
                  required
                />
                <label for="validationCustom01" class="form-label">First name</label>
                <div class="valid-feedback">Looks good!</div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-outline">
                <input
                  type="text"
                  class="form-control"
                  id="validationCustom02"
                  value="Otto"
                  required
                />
                <label for="validationCustom02" class="form-label">Last name</label>
                <div class="valid-feedback">Looks good!</div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="input-group form-outline">
                <span class="input-group-text" id="inputGroupPrepend">@</span>
                <input
                  type="text"
                  class="form-control"
                  id="validationCustomUsername"
                  aria-describedby="inputGroupPrepend"
                  required
                />
                <label for="validationCustomUsername" class="form-label">Username</label>
                <div class="invalid-feedback">Please choose a username.</div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-outline">
                <input type="text" class="form-control" id="validationCustom03" required />
                <label for="validationCustom03" class="form-label">City</label>
                <div class="invalid-feedback">Please provide a valid city.</div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-outline">
                <input type="text" class="form-control" id="validationCustom05" required />
                <label for="validationCustom05" class="form-label">Zip</label>
                <div class="invalid-feedback">Please provide a valid zip.</div>
              </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.prototype.slice.call(forms).forEach((form) => {
              form.addEventListener('submit', (event) => {
                if (!form.checkValidity()) {
                  event.preventDefault();
                  event.stopPropagation();
                }
                form.classList.add('was-validated');
              }, false);
            });
          })();
        

这个怎么运作

表单验证如何与MDB一起使用:

  • HTML表单验证是通过CSS的两个伪类应用的, :invalid:valid. 适用于 <input><textarea> 元素。
  • MDB范围 :invalid:valid父样式 .was-validated 类,通常应用于 <form>. 否则,任何没有值的必填字段在页面加载时都将显示为无效。这条路, 您可以选择何时激活它们(通常在尝试提交表单后)。
  • 重置表单的外观(例如,在动态表单提交的情况下) 使用AJAX),将 .was-validated 类从 <form>提交后再次提交。
  • 作为备用,可以使用 .is-invalid .is-valid 类 而不是用于服务器端验证的伪类。 它们不需要 .was-validated 父类。
  • 由于CSS运作方式的限制,我们目前无法将样式套用至 <label> t在DOM的表单控件之前没有帽子 自定义JavaScript。
  • 所有现代的浏览器都支持 约束验证API, 一系列用于验证表单控件的JavaScript方法。
  • 反馈消息可以利用 浏览器默认值(每个浏览器都不同,并且 (无法通过CSS进行样式化)或带有其他HTML和CSS的自定义反馈样式。
  • 您可以通过以下方式提供自定义有效性消息: JavaScript中的 setCustomValidity

考虑到这一点,请考虑以下有关我们自定义表单验证样式的演示, 可选的服务器端类,以及浏览器默认值。


浏览器默认值

对自定义验证反馈消息或编写JavaScript以更改表单不感兴趣 行为?一切都很好,您可以使用浏览器的默认值。尝试提交以下表格。 根据您的浏览器和操作系统,您会看到略有不同的反馈样式。

虽然这些反馈样式无法使用CSS设置样式,但您仍然可以自定义反馈 通过JavaScript文本。

@

          <form class="row g-3">
            <div class="col-md-4">
              <div class="form-outline">
                <input
                  type="text"
                  class="form-control"
                  id="validationDefault01"
                  value="Mark"
                  required
                />
                <label for="validationDefault01" class="form-label">First name</label>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-outline">
                <input
                  type="text"
                  class="form-control"
                  id="validationDefault02"
                  value="Otto"
                  required
                />
                <label for="validationDefault02" class="form-label">Last name</label>
              </div>
            </div>
            <div class="col-md-4">
              <div class="input-group form-outline">
                <span class="input-group-text" id="inputGroupPrepend2">@</span>
                <input
                  type="text"
                  class="form-control"
                  id="validationDefaultUsername"
                  aria-describedby="inputGroupPrepend2"
                  required
                />
                <label for="validationDefaultUsername" class="form-label">Username</label>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-outline">
                <input type="text" class="form-control" id="validationDefault03" required />
                <label for="validationDefault03" class="form-label">City</label>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-outline">
                <input type="text" class="form-control" id="validationDefault05" required />
                <label for="validationDefault05" class="form-label">Zip</label>
              </div>
            </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-valid .is-valid 。注意 这些类还支持 .invalid-feedback

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid zip.
You must agree before submitting.

          <form class="row g-3">
            <div class="col-md-4">
              <div class="form-outline">
                <input
                  type="text"
                  class="form-control is-valid"
                  id="validationServer01"
                  value="Mark"
                  required
                />
                <label for="validationServer01" class="form-label">First name</label>
                <div class="valid-feedback">Looks good!</div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-outline">
                <input
                  type="text"
                  class="form-control is-valid"
                  id="validationServer02"
                  value="Otto"
                  required
                />
                <label for="validationServer02" class="form-label">Last name</label>
                <div class="valid-feedback">Looks good!</div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="input-group form-outline">
                <span class="input-group-text" id="inputGroupPrepend3">@</span>
                <input
                  type="text"
                  class="form-control is-invalid"
                  id="validationServerUsername"
                  aria-describedby="inputGroupPrepend3"
                  required
                />
                <label for="validationServerUsername" class="form-label">Username</label>
                <div class="invalid-feedback">Please choose a username.</div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-outline">
                <input
                  type="text"
                  class="form-control is-invalid"
                  id="validationServer03"
                  required
                />
                <label for="validationServer03" class="form-label">City</label>
                <div class="invalid-feedback">Please provide a valid city.</div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-outline">
                <input
                  type="text"
                  class="form-control is-invalid"
                  id="validationServer05"
                  required
                />
                <label for="validationServer05" class="form-label">Zip</label>
                <div class="invalid-feedback">Please provide a valid zip.</div>
              </div>
            </div>
            <div class="col-12">
              <div class="form-check">
                <input
                  class="form-check-input is-invalid"
                  type="checkbox"
                  value=""
                  id="invalidCheck3"
                  required
                />
                <label class="form-check-label" for="invalidCheck3">
                  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>
        

支持的元素

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

  • <input>s and <textarea>s with .form-control (including up to one .form-control in input groups)
  • .form-checks
Please enter a message in the textarea.
Example invalid feedback text
More example invalid feedback text
Example invalid form file feedback

          <form class="was-validated">
            <div class="mb-3 pb-1">
              <div class="form-outline">
                <textarea
                  class="form-control is-valid"
                  id="validationTextarea"
                  placeholder="Required example textarea"
                  required
                ></textarea>
                <label for="validationTextarea" class="form-label">Textarea</label>
                <div class="invalid-feedback">Please enter a message in the textarea.</div>
              </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">
              <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 的父对象 定位。在下面的示例中,我们的列类已经具有此功能,但是您的项目可能 需要其他设置。

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid zip.

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

客制化

验证状态可以通过Sass通过 $ form-validation-states 映射。位于我们的 _variables.scss 文件中, 此Sass映射被循环生成默认的 valid / invalid 验证状态。其中包括用于自定义各州颜色的嵌套地图。虽然没有别的 状态受浏览器支持,使用自定义样式的浏览器可以轻松添加更复杂的表单 反馈。

请注意,我们建议您在不修改以下值的情况下自定义这些值 form-validation-state 混合。

这是 _variables.scss 中的Sass映射。覆盖此并重新编译您的Sass 产生不同的状态:


          $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 ) );
        

这是来自 forms / _validation.scss 的循环。对以上Sass的任何修改 映射将通过以下循环反映在编译的CSS中:


          @each $state, $data in $form-validation-states { @include form-validation-state($state,
          map-get($data, color), map-get($data, icon)); }