表单验证之JQuery Validate控件

概述

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代码中）中调用

 $.validator.addMethod("zhongwen", function(value, element) {
     var hz = /^[\u4e00-\u9fa5]+$/;
     return this.optional(element) || hz.test(value);
     }, "请填写中文字符");

代码示例

部分验证框，样式设置在公用css中

 <div class="form-group  margin-top-20">
                                   <label class="control-label col-md-3">姓名
                                       <span class="required"> * </span>
                                   </label>
                                   <div class="col-md-4">
                                       <div class="input-icon right">
                                           <i class="fa"></i>
                                           <input type="text" class="form-control" name="name" /> </div>
                                   </div>
                               </div>
                               <div class="form-group  margin-top-20">
                                   <label class="control-label col-md-3">昵称
                                       <span class="required"> * </span>
                                   </label>
                                   <div class="col-md-4">
                                       <div class="input-icon right">
                                           <i class="fa"></i>
                                           <input type="text" class="form-control" name="nickname" /> </div>
                                   </div>
                               </div>
                               <div class="form-group">
                                   <label class="control-label col-md-3">邮箱
                                       <span class="required"> * </span>
                                   </label>
                                   <div class="col-md-4">
                                       <div class="input-icon right">
                                           <i class="fa"></i>
                                           <input type="text" class="form-control" name="email" /> </div>
                                   </div>
                               </div>
                               <div class="form-group">
                                   <label class="control-label col-md-3">手机
                                       <span class="required"> * </span>
                                   </label>
                                   <div class="col-md-4">
                                       <div class="input-icon right">
                                           <i class="fa"></i>
                                           <input type="text" class="form-control" name="mobile" /> </div>
                                       <span class="help-block"></span>
                                   </div>
                               </div>

验证JS

 function JqValidate()
           {
               return $( '#formLogin' ).validate({

                 errorElement: 'span', //default input error message container
                 errorClass: 'help-block help-block-error', // default input error message class
                 focusInvalid: false, // do not focus the last invalid input
                 ignore: "",  // validate all fields including form hidden input
                 rules: {//校验规则
                     name: {
                         required: true,
                          zhongwen:true,
                          minlength:2,
                          maxlength:15,
                     },
                     nickname: {
                         required: true,
                         NickName:true
                     },
                     email: {
                         required: true,
                         email: true
                     },
                     mobile:{
                         required: true,
                         isMobile:true,
                     },
                     phone:{
                         required: true,
                         isPhone:true,
                     },
                     IDcard:{
                         required: true,
                         isIDCard:true,
                     },

                     creditcard: {
                         required: true,
                         creditcard: true
                     },
                 },
                 messages: {    //自定义提示信息
                     name: {
                       required: "请输入姓名",
                       minlength: "姓名至少由两个汉字组成",
                       maxlength: "姓名不超过15个汉字"
                     },
                     email: "请输入一个正确的邮箱",
                     gender:"必须选择一个性别属性",
                     agree:"请接受我方条款",
                   },
                 errorPlacement: function (error, element) { // 错误信息显示位置
                     var icon = $(element).parent('.input-icon').children('i');
                     icon.removeClass('fa-check').addClass("fa-warning");
                     icon.attr("data-original-title", error.text()).tooltip({'container': 'body'});
                 },

                 highlight: function (element) { // 高亮显示错误（错误变红）
                     $(element)
                         .closest('.form-group').removeClass("has-success").addClass('has-error'); // set error class to the control group
                 },

                 unhighlight: function (element) { // revert the change done by hightlight

                 },

                 success: function (label, element) {//数据正确输入后由红色编程绿色
                     var icon = $(element).parent('.input-icon').children('i');
                     $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group
                     icon.removeClass("fa-warning").addClass("fa-check");
                 },

                 submitHandler: function (form) {
                     alert("数据校验正确!");
                     //form[0].submit(); // submit the form
                 }
               });
           }

效果

参考网站

菜鸟教程的JQuery validate