表单验证是一个非常基础的功能，当你的表单项少的时候，可以自己写验证，但是当你的表单有很多的时候，就需要一些验证的插件。今天介绍一款很好用的表单验证插件，formvalidation。其前身叫做bootstrapValidator.

官网：http://formvalidation.io/

下载：目前的最新版本是收费的，但是我们可以下载之前的版本。下载地址：http://down.htmleaf.com/1505/201505101833.zip

下载之后，解压，整个文件夹里面除了最基本的js和css，还包含了很多实例，有兴趣的可以自己去看看。接下来简要介绍一下它的用法。

1.导入包

css:

  1. <link rel="stylesheet"
  2.     href="./static/formvalidation/vendor/bootstrap/css/bootstrap.min.css">
  3. <link rel="stylesheet"
  4.     href="./static/formvalidation/dist/css/formValidation.css">

js:

  1. <script type="text/javascript" src="./static/formvalidation/vendor/jquery/jquery.min.js"></script>
  2.     <script type="text/javascript" src="./static/formvalidation/vendor/bootstrap/js/bootstrap.min.js"></script>
  3.     <script type="text/javascript" src="./static/formvalidation/dist/js/formValidation.js"></script>
  4.     <script type="text/javascript" src="./static/formvalidation/dist/js/framework/bootstrap.js"></script>
  5.     <script type="text/javascript" src="./static/formvalidation/dist/js/language/zh_CN.js"></script>

需要注意的是，即便你已经在项目中导入了bootstrap.js，还是需要再导入上述的bootstrap.js文件，因为它和你之前导入的并不相同。

还有就是即便你已经导入了jquery.min.js，最好还是导入这边的jquery.min.js，因为如果不导入，可能会导致remote类型的验证失效。

2.表单

表单项的填写需要遵从两个原则，表单项的class需标记为：form-control。并且提交按钮的id或者name不要设为sumbit,否则在验证之后会出现无法提交的情况，一个典型的表单如下所示。

  1.     <form id="thisForm" method="post" action="">
  2.                 <input type="hidden" name="type" value="1" />
  3.                 <div class="container-fluid ">
  4.                     <div class="col-xs-12">
  5.                         <div class="panel-body ">
  6.                             <div class="box box-danger box-padding">
  7.                                 <div class="row row-margin">
  8.                                     <div class="col-xs-8 col-xs-offset-1 tipinfo">
  9.                                         <div class="input-group">
  10.                                             <div class="input-group-btn">
  11.                                                 <button type="button" class="btn btn-danger">合伙人账号</button>
  12.                                             </div>
  13.                                             <!-- /btn-group -->
  14.                                             <input type="text" class="form-control" name="partnerName">
  15.                                         </div>
  16.  
  17.                                     </div>
  18.                                 </div>
  19.                                 <div class="row row-margin">
  20.                                     <div class="col-xs-8 col-xs-offset-1 tipinfo">
  21.                                         <div class="input-group">
  22.                                             <div class="input-group-btn">
  23.                                                 <button type="button" class="btn btn-danger">合伙人手机</button>
  24.                                             </div>
  25.                                             <!-- /btn-group -->
  26.                                             <input type="text" class="form-control" name="phone">
  27.                                         </div>
  28.  
  29.                                     </div>
  30.                                 </div>
  31.                                 <div class="row row-margin">
  32.                                     <div class="col-xs-8 col-xs-offset-1 tipinfo">
  33.                                         <div class="input-group">
  34.                                             <div class="input-group-btn">
  35.                                                 <button type="button" class="btn btn-danger">真实名称</button>
  36.                                             </div>
  37.                                             <!-- /btn-group -->
  38.                                             <input type="text" class="form-control" name="realName">
  39.                                         </div>
  40.                                     </div>
  41.                                 </div>
  42.                                 <div class="row row-margin">
  43.                                     <div class="col-xs-8 col-xs-offset-1 tipinfo">
  44.                                         <div class="input-group">
  45.                                             <div class="input-group-btn">
  46.                                                 <button type="button" class="btn btn-danger">所属级别</button>
  47.                                             </div>
  48.                                             <!-- /btn-group -->
  49.                                             <select class="form-control" name="partnerLevelId">
  50.                                                 <option value="1">市级合伙人</option>
  51.                                                 <option value="2">生活馆关注</option>
  52.                                                 <option value="3">VIP合伙人</option>
  53.                                             </select>
  54.                                         </div>
  55.                                     </div>
  56.                                 </div>
  57.                                 <div class="row row-margin">
  58.                                     <div class="col-xs-8 col-xs-offset-1 tipinfo">
  59.                                         <div class="input-group">
  60.                                             <div class="input-group-btn">
  61.                                                 <button type="button" class="btn btn-danger">上级合伙人</button>
  62.                                             </div>
  63.                                             <!-- /btn-group -->
  64.                                             <select name="parentPartnerId" class="form-control">
  65.                                                 <OPTION value="0">无</OPTION>
  66.                                                 <c:forEach items="${parentPartnerList}" var="parentPartner">
  67.                                                     <option value="${parentPartner.partnerId}">${parentPartner.partnerName}</option>
  68.                                                 </c:forEach>
  69.                                             </select>
  70.                                         </div>
  71.                                     </div>
  72.                                 </div>
  73.                                         <div class="row row-margin">
  74.                                     <div class="col-xs-8 col-xs-offset-1 tipinfo">
  75.                                         <div class="input-group">
  76.                                             <div class="input-group-btn">
  77.                                                 <button type="button" class="btn btn-danger">投资金额</button>
  78.                                             </div>
  79.                                             <!-- /btn-group -->
  80.                                             <input type="text" class="form-control" name="joinFee" placeholder="元">
  81.                                         </div>
  82.                                     </div>
  83.                                 </div>
  84.                                 <div class="row row-margin">
  85.                                     <div class="col-xs-5  col-xs-offset-4">
  86.                                         <button type="button" class="btn btn-default "
  87.                                             onClick="goback();">返回</button>
  88.                                         &nbsp&nbsp
  89.                                         <button type="button" class="btn btn-primary btn-danger"
  90.                                             id="submit1">提交</button>
  91.                                     </div>
  92.                                 </div>
  93.                             </div>
  94.  
  95.                         </div>
  96.                     </div>
  97.                 </div>
  98.             </form>

3.加载验证器

在页面加载完整之后，通过如下js代码加载验证器。

  1. $(function() {
  2.     $('#thisForm').formValidation({
  3.         message : 'This value is not valid',
  4.         icon : {
  5.             valid : 'glyphicon glyphicon-ok',
  6.             invalid : 'glyphicon glyphicon-remove',
  7.             validating : 'glyphicon glyphicon-refresh'
  8.         },
  9.         fields : {
  10.             partnerName : {
  11.                 message : '合伙人名称验证不通过',
  12.                 validators : {
  13.                     notEmpty : {
  14.                         message : '不能为空'
  15.                     },
  16.                 /*
  17.                  * stringLength: { min: 6, max: 30, message: 'The username must
  18.                  * be more than 6 and less than 30 characters long' },
  19.                  */
  20.                 /*
  21.                  * remote: { url: 'remote.php', message: 'The username is not
  22.                  * available' },
  23.                  */
  24.                 /*
  25.                  * regexp: { regexp: /^[a-zA-Z0-9_\.]+$/, message: 'The username
  26.                  * can only consist of alphabetical, number, dot and underscore' }
  27.                  */
  28.                 }
  29.             },
  30.             realName : {
  31.                 validators : {
  32.                     notEmpty : {
  33.                         message : '不能为空'
  34.                     },
  35.                 }
  36.             },
  37.             phone : {
  38.                 validators : {
  39.                     notEmpty : {
  40.                         message : '不能为空'
  41.                     },
  42.                     phone : {
  43.                         message : '不是有效的电话号码',
  44.                         country:'CN'
  45.                     },
  46.                      remote: {
  47.                                 type: 'POST',
  48.                                 url: 'partnerByPhone',
  49.                                 message: '该号码已经存在',
  50.                                 // delay: 1000
  51.                             }
  52.                 }
  53.             },
  54.              joinFee: {
  55.                         validators: {
  56.                             notEmpty: {
  57.                                 message:'不能为空'
  58.                                 },
  59.                             digits: {
  60.                                 message:'不是有效的金额'
  61.                                 },
  62.                             greaterThan: {
  63.                                 value: 0
  64.                             },
  65.  
  66.                         }
  67.                     }
  68.         }
  69.     })
  70. });

相信很容易就可以看懂上述验证器的逻辑，就是一个封装好的json对象，以表单的name作为键，对每一个表单规定验证规则，以及验证失败后输出的message。以上列出了几种常见的验证规则，如果想要更多验证规则，可以从下载的文件中去找寻demo.

这里再列出一些比较有用的验证规则，都是我从demo上面摘抄下来的。

--长度要求和正则表达式

  1.    username: {
  2.                         message: 'The username is not valid',
  3.                         validators: {
  4.                             notEmpty: {
  5.                                 message: 'The username is required and can\'t be empty'
  6.                             },
  7.                             stringLength: {
  8.                                 min: 6,
  9.                                 max: 30,
  10.                                 message: 'The username must be more than 6 and less than 30 characters long'
  11.                             },
  12.                             regexp: {
  13.                                 regexp: /^[a-zA-Z0-9_\.]+$/,
  14.                                 message: 'The username can only consist of alphabetical, number, dot and underscore'
  15.                             }
  16.                         }
  17.                     },

--email:

  1.  email: {
  2.                         validators: {
  3.                             notEmpty: {
  4.                                 message: 'The email address is required and can\'t be empty'
  5.                             },
  6.                             emailAddress: {
  7.                                 message: 'The input is not a valid email address'
  8.                             }
  9.                         }
  10.                     },

--电话

  1.       phone: {
  2.                     validators: {
  3.                         notEmpty: {
  4.                             message: '不能为空'
  5.                         },
  6.                         phone:{
  7.                              message: '不是合法电话',
  8.                              country:'CN'
  9.                         }
  10.  
  11.                 }
  12.             }

--网站

  1.  website: {
  2.                         validators: {
  3.                             uri: {
  4.                                 message: 'The input is not a valid URL'
  5.                             }
  6.                         }
  7.                     }

--邮编

  1.   zipCode: {
  2.                         validators: {
  3.                             zipCode: {
  4.                                 country: 'CN',//中国邮编
  5.                                 message: 'The input is not a valid US zip code'
  6.                             }
  7.                         }
  8.                     }

--密码及确认

  1.       password: {
  2.                         validators: {
  3.                             notEmpty: {
  4.                                 message: 'The password is required and can\'t be empty'
  5.                             }
  6.                         }
  7.                     },
  8.                     confirmPassword: {
  9.                         validators: {
  10.                             notEmpty: {
  11.                                 message: 'The confirm password is required and can\'t be empty'
  12.                             },
  13.                             identical: {
  14.                                 field: 'password',
  15.                                 message: 'The password and its confirm are not the same'
  16.                             }
  17.                         }
  18.                     },

--数字

  1.    age: {
  2.                         validators: {
  3.                             notEmpty: {},
  4.                             digits: {},
  5.                             greaterThan: {
  6.                                 value: 18
  7.                             },
  8.                             lessThan: {
  9.                                 value: 100
  10.                             }
  11.                         }
  12.                     },

 --整数

  1.   'limitPromotion.stock': {
  2.                         validators: {
  3.                             notEmpty: {
  4.                                 message:'不能为空'
  5.                                 },
  6.                                regexp: {
  7.                                 regexp: /^([0-9][0-9]*)$/,
  8.                                 message: '必须为整数'
  9.                             }
  10.  
  11.                         }
  12.              },

 --日期

  1. 'employee.birthday' : {
  2.                 message : '表单校验失败',
  3.                 validators : {
  4.                     notEmpty : {
  5.                         message : '不能为空'
  6.                     },
  7.                     //日期格式
  8.                      date: {
  9.                                 format: 'YYYY-MM-DD hh:mm:ss',
  10.                                 message : '不是合法的日期'
  11.                             }
  12.                 }
  13.             },

--远程调用

  1.   username: {
  2.                         message: 'The username is not valid',
  3.                         validators: {
  4.                             notEmpty: {
  5.                                 message: 'The username is required and can\'t be empty'
  6.                             },
  7.                             remote: {
  8.                                 type: 'POST',
  9.                                 url: 'partnerByPhone',
  10.                                 message: '电话号码已使用',
  11.                                 //delay: 1000
  12.                             }
  13.                         }
  14.                     }

关于远程调用就是需要去访问服务端的接口，来验证输入的表单是否有效，经常出现的场景是我们需要验证一个用户名是否已经被注册过了。该远程调用返回的响应是一个json的数据，如果是{ “valid”: true }表示通过验证，否则{ “valid”: false}表示验证失败。

其中服务端的代码示例如下：

  1.     @ResponseBody
  2.     @RequestMapping("partnerByPhone")
  3.     public Map<String, Object> partnerByPhone(String phone) {
  4.         TPartner partner = partnerService.getPartnerByPhone(phone);
  5.         Map<String, Object> maps = new HashMap<String, Object>();
  6.         if (partner == null) {
  7.             maps.put("valid", true);
  8.         } else {
  9.             maps.put("valid", false);
  10.         }
  11.         return maps;
  12.     }

4.提交表单时候手动调用验证

一般情况下，当我们提交表单的时候，需要手动调用验证，可以用如下代码来实现。针对上述表单。

  1.  
  1.   $("#submit1").click(function() {
  2.         var $form = $("#thisForm");
  3.         var bv = $form.data('formValidation');
  4.         bv.validate();
  5.         if(bv.isValid()){
  6.             $.ajax({
  7.                 type:'post',
  8.                 url:'partnerSave',
  9.                 data:$('#thisForm').serialize(),
  10.                 dataType:'html',
  11.                 success:function(data){
  12.                     if(data>0){
  13.                         alert("成功");
  14.                         location.href="partnerHome";
  15.                     }else{
  16.                         alert("失败");
  17.                     }
  18.                 }
  19.  
  20.             });
  21.         }
  22.     });
  1.  

怎么样，就是这么简单。我们来看看效果吧。当然提示错误的语言和一些标签的样式你可以自己去修改。

总的来说，这还是一款比较容易上手的验证器，有需要的朋友可以尝试一下。

表单验证插件--formvalidation的更多相关文章

  1. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  2. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

  3. jQuery学习之：Validation表单验证插件

    http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...

  4. jquery validate表单验证插件

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  5. 表单验证插件 - formValidator

    表单验证插件 - formValidator * 引入formValidator插件文件 * 引入formValidator插件的主文件 * 引入formValidator插件的正则有关文件 * 引入 ...

  6. JS表单验证插件(支持Ajax验证)

    自己编写了一个表单验证插件,支持ajax验证,使用起来很简单. 每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空:ru ...

  7. 轻量级实用JQuery表单验证插件：validateForm5

    表单验证是Web项目一个必不可少的环节,而且是一项重复的劳动,于是小菜封装了一款简单的表单验证插件,名字叫:validateForm5. validateForm5插件基于Jquery,并向HTML5 ...

  8. 【jquery】Validform，一款不错的 jquery 表单验证插件

    关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...

  9. 【jQuery基础学习】06 jQuery表单验证插件-Validation

    jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...

随机推荐

  1. 初识ajax

    ajax优势:不刷新整个页面,只刷新局部(无刷新) 无刷新的好处: 只更新部分页面,有效利用宽带 提供连续的用户体验 提供类似C/S的交互效果,操作更方面 什么是ajax AJAX :代表 Async ...

  2. 注册Azure AD 2.0 应用程序

    作者:陈希章 发表于 2017年3月22日 上一篇 介绍了Microsoft Graph应用程序的一些概念,以及目前还比较普遍的Azure AD 1.0应用程序的注册方式.但正如我多次提到的那样,虽然 ...

  3. json的那些事

    1.什么是json? json(javascript object notation)全称是javascript对象表示法,它是一种数据交换的文本格式,而不是一种编程语言,用于读取结构化数据.简单来说 ...

  4. (五)：C++分布式实时应用框架——支撑复杂的业务通讯关系

    C++分布式实时应用框架--支撑复杂的业务通讯关系 技术交流合作QQ群:436466587 欢迎讨论交流 版权声明:本文版权及所用技术归属smartguys团队所有,对于抄袭,非经同意转载等行为保留法 ...

  5. 【python】递归（阶乘、斐波纳契、汉诺塔）

  6. MongoDB入门系列（二）：Insert、Update、Delete、Drop

    概述 本章节介绍Insert.Update.Delete.Drop操作基本语法. 环境: Version:3.4 insert insert()基本语法如下: db.collection.insert ...

  7. Python学习日记：day2

    1.格式化输出 name = input("请输入你的名字:") age =input("请输入你的年龄:") job =input("请输入你的工作 ...

  8. VisualVM 分析full GC问题记录

    背景:JAVA APP,主要功能是处理日志并存入db 现象:运行一段时间就出现OOM问题,查看GC log发现运行没多久就一直Full GC,并且抛出OOM的异常. [Full GC (Ergonom ...

  9. Java零碎总结

    获取当前类运行的根目录(即classpath,如bin.classes.AppName等)的方式有: 1.Thread.currentThread().getContextClassLoader(). ...

  10. BZOJ4970 IOI2004 empodia障碍段

    4970: [ioi2004]empodia 障碍段 Time Limit: 10 Sec  Memory Limit: 128 MB Description 古数学及哲学家毕氏相信自然之本质为数学. ...