脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap表单控件

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

 更新时间：2016年08月04日 14:28:02   作者：诗闵  
这篇文章主要介绍了Bootstrap中表单控件状态(验证状态) 的相关资料,还给大家介绍了在Bootstrap框架中提供的机制验证效果，非常不错，需要的朋友可以参考下

在制作表单时，难免要做表单验证。同样也需要提供验证状态样式，在Bootstrap框架中同样提供这几种效果。

1、.has-warning:警告状态（黄色）

2、.has-error：错误状态（红色）

3、.has-success：成功状态（绿色）

使用的时候只需要在form-group容器上对应添加状态类名。

<form role="form">
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">成功状态</label>
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">警告状态</label>
<input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">错误状态</label>
<input type="text" class="form-control" id="inputError1" placeholder="错误状态">
</div>
</form>

运行效果如下或查看右侧结果窗口：

很多时候，在表单验证的时候，不同的状态会提供不同的icon，比如成功是一个对号（√），错误是一个叉号（×）等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示icon出来，只需要在对应的状态下添加类名“has-feedback”。请注意，此类名要与“has-error”、“has-warning”和“has-success”在一起：

<form role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess1">成功状态</label>
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning1">警告状态</label>
<input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError1">错误状态</label>
<input type="text" class="form-control" id="inputError1" placeholder="错误状态">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>

运行效果如下或查看右侧结果窗口：

从效果图中可以看出，图标都居右。在Bootstrap的小图标都是使用@font-face来制作（后面的内容中将会着重用一节内容来介绍）。而且必须在表单中添加了一个span元素：

<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>

以上所述是小编给大家介绍的Bootstrap中表单控件状态(验证状态) ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • javascript封装的sqlite操作类实例

    javascript封装的sqlite操作类实例

    这篇文章主要介绍了javascript封装的sqlite操作类,可实现SQLite数据库的初始化及执行SQL语句的功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • JavaScript实现页面一键全选或反选

    JavaScript实现页面一键全选或反选

    这篇文章主要为大家详细介绍了JavaScript实现页面一键全选或反选，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 小程序实现多选框功能

    小程序实现多选框功能

    这篇文章主要为大家详细介绍了小程序实现多选框功能，小程序实现单选全选多选删除操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-10-10
  • JS中Json数据的处理和解析JSON数据的方法详解

    JS中Json数据的处理和解析JSON数据的方法详解

    JSON （JavaScript Object Notation）一种简单的数据格式，比xml更轻巧，这篇文章主要介绍了JS中Json数据的处理和解析JSON数据的方法详解的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-06-06
  • JavaScript获取表单内所有元素值的方法

    JavaScript获取表单内所有元素值的方法

    这篇文章主要介绍了JavaScript获取表单内所有元素值的方法,实例分析了javascript操作表单元素的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • JavaScript返回0-1之间随机数的方法

    JavaScript返回0-1之间随机数的方法

    这篇文章主要介绍了JavaScript返回0-1之间随机数的方法,涉及javascript中Math对象random方法的使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • 详解如何用JavaScript编写一个单元测试

    详解如何用JavaScript编写一个单元测试

    测试代码是确保代码稳定的第一步。能做到这一点的最佳方法之一就是使用单元测试。这篇文章主要介绍了如何用JavaScript编写你的第一个单元测试，感兴趣的可以了解一下
    2022-11-11
  • javascript控制swfObject应用介绍

    javascript控制swfObject应用介绍

    本文将详细介绍js控制swfObject的实现方法，需要了解的朋友可以参考下
    2012-11-11
  • JavaScript动态设置div的样式的方法

    JavaScript动态设置div的样式的方法

    这篇文章主要介绍了JavaScript动态设置div的样式的方法的相关资料,需要的朋友可以参考下
    2015-12-12
  • javascript编写实用的省市选择器

    javascript编写实用的省市选择器

    这篇文章主要介绍了javascript编写实用的省市选择器的方法及示例分享，非常不错，推荐给有相同需求的小伙伴们。
    2015-02-02

最新评论