夏日博客

A-A+

jQuery表单验证插件jqBootstrapValidation使用示例

2016年01月08日 前端设计 暂无评论 阅读 8 views 次

jqBootstrapValidation是一个bootstrap表单的jQuery验证插件了，与以往的验证插件有一些区别了，下面小编为各位介绍一下插件的用法。

jqBootstrapValidation是一个bootstrap框架样式表单的jQuery验证插件，他能够验证基本的表单字段类型，比如电子邮箱格式、纯数字、纯子母、字段是否为空等，依赖于bootstrap框架的表单样式和Jquery JavaScript框架查找和编辑HTML标签。

jqBootstrapValidation是一个bootstrap表单的jQuery验证插件

安装:

下载jqbootstrapvalidation包括你的网页的脚本标签,代码如下:

  1. <script src="/js/jquery.min.js"></script> <!-- or use local jquery -->  
  2. <script src="/js/jqBootstrapValidation.js"></script>  

应用插件你想验证jqbootstrapvalidation元素应用到,代码如下:

  1. <script>  
  2.     $(function(){   
  3.         $("input,select,textarea").not("[type=submit]").jqBootstrapValidation();   
  4.     });  
  5. </script>  

jqbootstrapvalidation将直接在元素中检查HTML5验证器属性，加上通过指定的数据属性的任何额外的选项，参见这里的说明。

校验字段类型,代码如下:

  1. 电子邮件  
  2. <form class="form-horizontal">  
  3.     <div class="control-group">  
  4.         <label class="control-label">Email address</label>  
  5.         <div class="controls">  
  6.             <input type="email" />  
  7.             <p class="help-block"></p>  
  8.         </div>  
  9.     </div>  
  10. </form>  
  11. Attribute Value Req?  
  12. type email  √  
  13. data-validation-email-message (your failure message)   
  14. 数字类型  
  15. <form class="form-horizontal">  
  16.     <div class="control-group">  
  17.         <label class="control-label">Type a number</label>  
  18.         <div class="controls">  
  19.             <input type="number" />  
  20.             <p class="help-block"></p>  
  21.         </div>  
  22.     </div>  
  23. </form>  
  24. Attribute Value Req?  
  25. type “number”  √  
  26. data-validation-number-message your failure message   
  27. 不能为空  
  28. <form class="form-horizontal">  
  29.     <div class="control-group">  
  30.         <label class="control-label">Type something</label>  
  31.         <div class="controls">  
  32.             <input type="text" name="some_field" required />  
  33.             <p class="help-block"></p>  
  34.         </div>  
  35.     </div>  
  36. </form>  
  37. Attribute   Value   Req?  
  38. required    (doesn’t need a value)   √  
  39. data-validation-required-message    (your failure message)  

当然这里只是简单的介绍到了这个jquery表单验证插件的最基础的功能了，大家可以深入的去研究一下。

标签：

给我留言