如何在Bootstrap对表单控件进行状态校验

校验状态

Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 

.has-warning

、

.has-error

 或  

.has-success

 类到这些控件的父元素即可。任何包含在此元素之内的  

.control-label

、

.form-control

 和  

.help-block

 元素都将接受这些校验状态的样式。

将验证状态传达给辅助设备和盲人用户

使用这些校验样式只是为表单控件提供一个可视的、基于色彩的提示，但是并不能将这种提示信息传达给使用辅助设备的用户 - 例如屏幕阅读器 - 或者色盲用户。

为了确保所有用户都能获取正确信息，Bootstrap 还提供了另一种提示方式。例如，你可以在表单控件的 

<label>

标签上以文本的形式显示提示信息（就像下面代码中所展示的）；包含一个   Glyphicon 字体图标  （还有赋予  

.sr-only

 类的文本信息 - 参考 Glyphicon 字体图标实例）；或者提供一个额外的   辅助信息  块。另外，对于使用辅助设备的用户，无效的表单控件还可以赋予一个  

aria-invalid="true"

 属性。

Input with success

Input with warning

Input with error

Checkbox with success

Checkbox with warning

Checkbox with error

复制

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>