概述
jQuery Validation Plugin v1.14.0，基于JQuery，官网http://jqueryvalidation.org/
该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误提示信息，且已翻译成其他 37 种语言，调用插件包就可以切换为中文等语言。
其他控件parsley.js Version 2.3.9，该插件是基于JavaScript语言的，官网http://parsleyjs.org，在此不做研究。
引用插件
<script src="${base!}/assets/global/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="${base!}/assets/global/plugins/jquery-validation/js/additional-methods.min.js" type="text/javascript"></script>
<script src="${base!}/assets/global/plugins/jquery-validation/js/localization/messages_zh.min.js" type="text/javascript"></script>
jquery.validate.min.js中包括插件基本验证规则；
additional-methods.min.js这个文件中有扩展的验证规则，以及添加新的验证规则需要写在该文件中；
messages_zh.min.js是提示信息汉字包；
添加自定义验证规则
在validate-methods.js中使用addMethod(name,method,message)方法；其中，参数 name 是添加的方法的名字。参数 method 是一个函数，接收三个参数 (value,element,param) 。value 是元素的值，element 是元素本身，param 是参数。Message是提示信息的设定。下面是添加了一个验证中文的方法，这样就可以在rules（js代码中）中调用
1 $.validator.addMethod("zhongwen", function(value, element) { 2 var hz = /^[u4e00-u9fa5]+$/; 3 return this.optional(element) || hz.test(value); 4 }, "请填写中文字符");
代码示例
部分验证框，样式设置在公用css中
1 <div class="form-group margin-top-20"> 2 <label class="control-label col-md-3">姓名 3 <span class="required"> * </span> 4 </label> 5 <div class="col-md-4"> 6 <div class="input-icon right"> 7 <i class="fa"></i> 8 <input type="text" class="form-control" name="name" /> </div> 9 </div> 10 </div> 11 <div class="form-group margin-top-20"> 12 <label class="control-label col-md-3">昵称 13 <span class="required"> * </span> 14 </label> 15 <div class="col-md-4"> 16 <div class="input-icon right"> 17 <i class="fa"></i> 18 <input type="text" class="form-control" name="nickname" /> </div> 19 </div> 20 </div> 21 <div class="form-group"> 22 <label class="control-label col-md-3">邮箱 23 <span class="required"> * </span> 24 </label> 25 <div class="col-md-4"> 26 <div class="input-icon right"> 27 <i class="fa"></i> 28 <input type="text" class="form-control" name="email" /> </div> 29 </div> 30 </div> 31 <div class="form-group"> 32 <label class="control-label col-md-3">手机 33 <span class="required"> * </span> 34 </label> 35 <div class="col-md-4"> 36 <div class="input-icon right"> 37 <i class="fa"></i> 38 <input type="text" class="form-control" name="mobile" /> </div> 39 <span class="help-block"></span> 40 </div> 41 </div>
验证JS
1 function JqValidate() 2 { 3 return $( '#formLogin' ).validate({ 4 5 errorElement: 'span', //default input error message container 6 errorClass: 'help-block help-block-error', // default input error message class 7 focusInvalid: false, // do not focus the last invalid input 8 ignore: "", // validate all fields including form hidden input 9 rules: {//校验规则 10 name: { 11 required: true, 12 zhongwen:true, 13 minlength:2, 14 maxlength:15, 15 }, 16 nickname: { 17 required: true, 18 NickName:true 19 }, 20 email: { 21 required: true, 22 email: true 23 }, 24 mobile:{ 25 required: true, 26 isMobile:true, 27 }, 28 phone:{ 29 required: true, 30 isPhone:true, 31 }, 32 IDcard:{ 33 required: true, 34 isIDCard:true, 35 }, 36 37 creditcard: { 38 required: true, 39 creditcard: true 40 }, 41 }, 42 messages: { //自定义提示信息 43 name: { 44 required: "请输入姓名", 45 minlength: "姓名至少由两个汉字组成", 46 maxlength: "姓名不超过15个汉字" 47 }, 48 email: "请输入一个正确的邮箱", 49 gender:"必须选择一个性别属性", 50 agree:"请接受我方条款", 51 }, 52 errorPlacement: function (error, element) { // 错误信息显示位置 53 var icon = $(element).parent('.input-icon').children('i'); 54 icon.removeClass('fa-check').addClass("fa-warning"); 55 icon.attr("data-original-title", error.text()).tooltip({'container': 'body'}); 56 }, 57 58 highlight: function (element) { // 高亮显示错误（错误变红） 59 $(element) 60 .closest('.form-group').removeClass("has-success").addClass('has-error'); // set error class to the control group 61 }, 62 63 unhighlight: function (element) { // revert the change done by hightlight 64 65 }, 66 67 success: function (label, element) {//数据正确输入后由红色编程绿色 68 var icon = $(element).parent('.input-icon').children('i'); 69 $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group 70 icon.removeClass("fa-warning").addClass("fa-check"); 71 }, 72 73 submitHandler: function (form) { 74 alert("数据校验正确!"); 75 //form[0].submit(); // submit the form 76 } 77 }); 78 }
效果
参考网站
菜鸟教程的JQuery validate