Bootstrap中表单控件状态(验证状态)

Bootstrap是一款流行的前端框架，它提供了丰富的表单控件状态（验证状态）来帮助开发者快速构建现代化的Web表单。本篇攻略将详细讲解Bootstrap中表单控件状态的使用方法。

表单控件状态分类

在Bootstrap中，表单控件的状态共分为以下四种：

1. 默认状态
2. 成功状态
3. 警告状态
4. 错误状态

使用方法

默认状态

表单控件默认状态不需要特殊设置，只需要按照Bootstrap的样式进行设计即可。

<input type="text" class="form-control" placeholder="请输入内容">

成功状态

当用户输入的表单内容符合要求时，我们可以将表单控件设置为成功状态。成功状态的表单控件会显示一个绿色钩子图标。

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess">成功状态</label>
  <input type="text" class="form-control" id="inputSuccess" placeholder="请输入内容">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

警告状态

当用户输入的表单内容不符合要求时，我们可以将表单控件设置为警告状态。警告状态的表单控件会显示一个黄色感叹号图标。

<div class="form-group has-warning">
  <label class="control-label" for="inputWarning">警告状态</label>
  <input type="text" class="form-control" id="inputWarning" placeholder="请输入内容">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>

错误状态

当用户输入的表单内容不符合要求且无法提交表单时，我们可以将表单控件设置为错误状态。错误状态的表单控件会显示一个红色叉号图标。

<div class="form-group has-error">
  <label class="control-label" for="inputError">错误状态</label>
  <input type="text" class="form-control" id="inputError" placeholder="请输入内容">
  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>

注意事项

1. 每个表单控件都必须包含在一个form-group中，否则状态样式无法生效。
2. 每个表单控件状态对应的的class名为：has-success、has-warning、has-error

示例说明

示例一

以下是一个包含成功状态的文本框示例：

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess">邮箱地址</label>
  <input type="email" class="form-control" id="inputSuccess" placeholder="请输入邮箱地址">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

示例二

以下是一个包含错误状态的密码框示例：

<div class="form-group has-error">
  <label class="control-label" for="inputError">密码</label>
  <input type="password" class="form-control" id="inputError" placeholder="请输入密码">
  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
  <span id="helpBlock" class="help-block">密码必须包含大小写字母、数字和特殊字符。</span>
</div>

在这个示例中，我们添加了一个帮助文本，用于提示用户正确的密码格式。