校验状态
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" 属性。
<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>