表单验证之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