验证样式的使用及示例

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

颜色提示运行效果图

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

图标提示运行效果图

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

文字提示运行效果图

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