验证样式的使用及示例

1、在做表单验证的时候我们希望能够给出成功或者警告的提示，Bootstrap提供了三种不同状态的提示。 has-warning：警告状态，显示黄色。 has-error：错误状态，显示红色。 has-success：成功状态，显示绿色。我们只需在"form-group"容器标签上添加对应的样式即可。当然，使用了该类容器中的"label-control"、"form-control"都会受影响，使用方式如下：

3、上面的样式除颜色不同外没有太大的区别，如果我们需要显示一些图标，使其更加突出，则只需在验证样式的容器上添加class="has-feedback"，在input标签后面添加一个<span>标签，并且指定对应的样式即可，代码如下

5、在代码中要注意的是<span class="glyphicon*"></span>，这是控制上面图标显示的代码，当然我们也可以自定义图标。在Bootstrap中提供了很多小图标，在后续的过程中会提到。除颜色提示、图标提示外，很多时候还需要使用文字提示，Bootstrap也提供了这种机制。我们在<input>后面继续添加一个<span>用于显示提示的文本信息，这里就不需要做其他的处理了，代码如下：

7、上面的代码有两个特殊之处，即第一个输入框显示了文本信息，第二个没有显示，但是代码中写了提示信息“验证成功”。这里主要是使用了class="sr-only"，使用这个样式可以隐藏该元素。第二个组件是一个输入框组，不再是简单的表单输入框，具体在后面会有说明。