jquery 插件 validate 总结

★  第一部分：HelloWorld

1. jQuery.validate插件的作用

jquery.validate是jquery旗下的一个验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入，还可以自己扩充自己的验证方法，并且对国际化也有很好的支持。

2. HelloWorld

说明：需要JQuery版本：1.2.6+

步骤：

1，导入的jQuery.js与jquery.validate.js等文件，注意顺序不要颠倒
<script type="text/javascript" src="jquery.js">
<script type="text/javascript" src="jquery.metadata.js">
<script type="text/javascript" src="jquery.validate.js">

2，指定哪个（或哪些）表单要在提交前先进行验证
<script type="text/javascript">

       $(function(){

            $("#testForm").validate();

        });

</script>

3，指定每个字段的验证规则
名称 *<input type="text"name="loginName" class="required">
其中class="required"表示本字段必须要填写。

 

效果如下图：

 

★  第二部分：基础知识

1. 指定验证规则的方式

1.1. 把验证规则写到字段元素的class属性中

例：

用户名：<inputtype="password" name="password" class="required">

电子邮件：<inputtype="text" name="email" class="required email">

密码：<inputtype="password" name="password" id="password1"

class="{required:true, minlength: 3}">

再次输入密码：<inputtype="password" name="password2"

class="{equalTo:'[#password1]'} required">

 

以上用了两种方式：

1，指定多个class名称（验证规则），多个class名称之间用空格隔开，如：class="requiredemail"。

2，使用JSON对象，指定多个属性，如：class="{required:true, minlength: 3}"。可以为某验证规则指定所用的参数，如minlength规则需要指定最小长度，这里为3。

3，混合使用，如：class="{equalTo:'[#password1]'}required"。

 

说明：

1，如果使用第2种方式（JSON对象），就必须引入：jquery.metadata.js，作用是解析JSON对象。

2，如果表单字段的name不能重复，则只有最前面的配置起作用。

1.2. 调用validate()方法时指定验证规则

$(function() {

   $("#testForm").validate({

       rules: {

           loginName:{ required: true, minlength: 2},

           password: { required: true },

           password2: { equalTo: "#password1" }

        }

    });

});

2. 可以使用哪些验证规则（内置的验证规则）

required:true	必填字段
remote:"/checkName.do"	使用ajax方式访问”/checkName.do”，通过返回true或false表示输入值通过或未通过验证
email:true	必须输入正确格式的电子邮件
url:true	必须输入正确格式的网址
date:true	必须输入正确格式的日期
dateISO:true	必须输入正确格式的日期(ISO)，例如：2010-01-01，2010/01/01 只验证格式，不验证有效性
number:true	必须输入合法的数字(负数，小数)
digits:true	必须输入整数
creditcard:	必须输入合法的信用卡号
equalTo:"expr"	输入值必须和$(“expr”)的值相同， expr例子：#fieldId
accept: "gif|png|jpg"	输入拥有合法后缀名的字符串（上传文件的后缀），多个后缀之间用’|’隔开
maxlength:5	输入长度最多是5的字符串(汉字算一个字符)
minlength:3	输入长度最小是3的字符串(汉字算一个字符)
rangelength:[5,10]	输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
range:[5,10]	输入值必须介于 5 和 10 之间
max:5	输入值不能大于5
min:10	输入值不能小于10

说明：

1，remote是远程验证。比如注册验证用户名是否已被注册，返回值只能是true（验证成功）或false（验证失败）。在访问指定的url时，会自动把当前字段的值做为参数传递过去（以字段的name值为key，value为参数值）。

2，例如使用remote验证用户名是否存在，当添加一个用户后，在当前窗口中（同一个窗口），再次添加一个同名的用户，validate不能提示该用户已存在，这是因为缓存的原因，jquery仍认为该用户名可用。解决方法是在页面中添加如下代码：
    $().ready(function(){
        $.ajaxSetup ({
                cache: false //关闭ajax相应的缓存
         });
     });

3，某些属性值中的引号不能省略，否则出错。如accept、equalTo等，因为这时他需要的是一个字符串。

 

3. 有关错误提示消息

3.1. 更改默认的错误提示消息

jQuery.extend(jQuery.validator.messages, {

    required: "请填写本字段",

    remote: "验证失败",

    email: "请输入正确的电子邮件",

    url: "请输入正确的网址",

    date: "请输入正确的日期",

    dateISO: "请输入正确的日期(ISO).",

    number: "请输入正确的数字",

    digits: "请输入正确的整数",

    creditcard: "请输入正确的信用卡号",

    equalTo: "请再次输入相同的值",

    accept: "请输入指定的后缀名的字符串",

    maxlength:jQuery.validator.format("允许的最大长度为 {0}个字符"),

    minlength:jQuery.validator.format("允许的最小长度为 {0}个字符"),

    rangelength:jQuery.validator.format("允许的长度为{0}和{1}之间"),

    range:jQuery.validator.format("请输入介于 {0}和 {1} 之间的值"),

    max:jQuery.validator.format("请输入一个最大为 {0}的值"),

    min:jQuery.validator.format("请输入一个最小为 {0}的值")

});

3.2. 仅对当前表单改变提示消息

方法一：在class中指定某验证规则的错误消息

<input type="file" name="parResource"

class="{
  required: true, accept: 'zip',
  messages: {required:'请选择文件', accept:'请选择正确的文件'}
}">    （提示：使用时不能换行）

 

方法二：在调用validate()方法时指定某验证规则的错误消息

$(function() {

    $("#myForm").validate({

       messages:{

            username:{required: "请填写用户名" },

           email: { required: '请填写email', email: "请填与正确的email"}

        }

    });

});

3.3. 设置错误消息的显示样式

指定label.error的样式就可以了，如下：

<style type="text/css">

    label.error{

        margin-left: 10px;

        color: red;

    }

</style>

 

说明：label.error指class为error的label元素，如：
<label for="username" class="error">

★  第三部分：扩展

1. 自定义验证规则

除了内置的验证规则，validation还允许自定义验证规则。这是通过validation的addMethod()方法实现的，语法 为：

jQuery.validator.addMethod("name",function,message)

其中:

1，name为验证规则的名称

2，function定义验证的规则。参数有?。返回值为?。

3，message是验证失败时的提示信息。

 

2. 让错误提示信息显示到指定的位置

$(function(){

    $("form").validate({wrapper:'div'});

});

3.   对于radio与checkbox等的验证指定

4.   附录

 

 

 

 

jquery.validate remote 和 自定义验证方法

$(function(){

var validator =$("#enterRegForm").validate({
debug:false, //调试模式取消submit的默认提交功能
//errorClass: "error",//默认为错误的样式类为：error
//validClass: "check",//验证成功后的样式，默认字符串valid
focusInvalid: true,//表单提交时,焦点会指向第一个没有通过验证的域
//focusCleanup:true;//焦点指向错误域时，隐藏错误信息，不可与focusInvalid一起使用！
onkeyup: true,
errorElement: "div",
submitHandler: function(form){ //表单提交句柄,为一回调函数，带一个参数：form
form.submit(); //提交表单
},

rules: { 
"enterprise.enName": {
 required: true,
 minlength: 6,
 remote:{
  url: "/nameServlet",    //后台处理程序 
  type: "get",              //数据发送方式
  dataType: "json",          //接受数据格式    
  data: {                    //要传递的数据
   enName: function() {
   return $("#enName").val();
   }
  }
 
}
},

"user.passWord":{
 required:true,
 rangelength:[6,18]
},
passWordConf:{
 required:true,
 rangelength:[6,18],
 equalTo:"#passWord" //此处的passWord是<input id="passWord">一开始还以为是name的值呢，气死了
}

},

messages: { //自定义验证消息
"enterprise.enName": {
 required: "请填写企业名称！",
 minlength: $.format("至少要{0}个字符！"),
 remote:$.format("该企业名称已存在！")
 
},
"user.passWord":{
  required:"请填写确认密码！",
  rangelength:$.format("密码要在{0}-{1}个字符之间！")
 },
passWordConf:{
  required:"请填写确认密码！",
  rangelength:$.format("确认密码要在{0}-{1}个字符之间！"),
  equalTo:"确认密码要和密码一致！"
 },

errorPlacement:function(error, element) { //验证消息放置的地方
//error.appendTo(element.parent("td").next("td").children(".msg"));
 error.appendTo(element.parent(".field").next("div"));
},
highlight: function(element, errorClass) { //针对验证的表单设置高亮
$(element).addClass(errorClass);
},
success: function(div) {
div.addClass("valid");
}
});

});

 

 

自定义方法;

新建一个js文件：$(document).ready(function(){
  // 字符最小长度验证（一个中文字符长度为2）
   jQuery.validator.addMethod("stringMinLength", function(value, element,param) {
     var length = value.length;
     for ( var i = 0; i <value.length; i++) {
      if (value.charCodeAt(i)> 127) {
       length++;
      }
     }
     return this.optional(element) ||(length >= param);
    }, $.validator.format("长度不能小于{0}!"));
   
    // 字符最大长度验证（一个中文字符长度为2）
   jQuery.validator.addMethod("stringMaxLength", function(value,element, param) {
     var length = value.length;
     for ( var i = 0; i <value.length; i++) {
      if (value.charCodeAt(i)> 127) {
       length++;
      }
     }
     return this.optional(element) ||(length <= param);
    }, $.validator.format("长度不能大于{0}!"));

 // 字符验证       
  jQuery.validator.addMethod("stringCheck",function(value, element) {       
     return this.optional(element)|| /^[/u0391-/uFFE5/w]+$/.test(value);       
  }, "只能包括中文字、英文字母、数字和下划线");   
   
  // 中文字两个字节       
  jQuery.validator.addMethod("byteRangeLength",function(value, element, param) {       
      var length =value.length;       
      for(var i = 0; i< value.length; i++){       
         if(value.charCodeAt(i) > 127){       
         length++;       
         }       
      }       
      returnthis.optional(element) || ( length >= param[0] && length <=param[1] );       
  }, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");   
    
  // 字符验证
   jQuery.validator.addMethod("string", function(value, element) {
     return this.optional(element) ||/^[/u0391-/uFFE5/w]+$/.test(value);
    }, "不允许包含特殊符号!");
    // 必须以特定字符串开头验证
    jQuery.validator.addMethod("begin",function(value, element, param) {
     var begin = newRegExp("^" + param);
     return this.optional(element) ||(begin.test(value));
    }, $.validator.format("必须以 {0}开头!"));
    // 验证两次输入值是否不相同
   jQuery.validator.addMethod("notEqualTo", function(value, element, param){
     return value != $(param).val();
    }, $.validator.format("两次输入不能相同!"));
 // 验证值不允许与特定值等于
   jQuery.validator.addMethod("notEqual", function(value, element,param) {
     return value != param;
    }, $.validator.format("输入值不允许为{0}!"));
   
    // 验证值必须大于特定值(不能等于)
    jQuery.validator.addMethod("gt",function(value, element, param) {
     return value > param;
    }, $.validator.format("输入值必须大于{0}!"));
   
    // 验证值小数位数不能超过两位
   jQuery.validator.addMethod("decimal", function(value, element) {
     var decimal =/^-?/d+(/./d{1,2})?$/;
     return this.optional(element) ||(decimal.test(value));
    }, $.validator.format("小数位数不能超过两位!"));
  //字母数字
    jQuery.validator.addMethod("alnum",function(value, element) {
    return this.optional(element) ||/^[a-zA-Z0-9]+$/.test(value);
    }, "只能包括英文字母和数字");
 // 汉字
   jQuery.validator.addMethod("chcharacter", function(value, element) {
    var tel = /^[/u4e00-/u9fa5]+$/;
    return this.optional(element) ||(tel.test(value));
    }, "请输入汉字");
  // 身份证号码验证       
  jQuery.validator.addMethod("isIdCardNo",function(value, element) { 
      returnthis.optional(element) ||/^[1-9]/d{7}((0/d)|(1[0-2]))(([0|1|2]/d)|3[0-1])/d{3}$/.test(value)||/^[1-9]/d{5}[1-9]/d{3}((0/d)|(1[0-2]))(([0|1|2]/d)|3[0-1])((/d{4})|/d{3}[A-Z])$/.test(value);       
  }, "请正确输入您的身份证号码");
       
  // 手机号码验证       
  jQuery.validator.addMethod("isMobile",function(value, element) {       
      var length =value.length;   
      var mobile =/^(((13[0-9]{1})|(15[0-9]{1}))+/d{8})$/;   
      returnthis.optional(element) || (length == 11 && mobile.test(value));       
  }, "请正确填写您的手机号码");       
       
  // 电话号码验证       
  jQuery.validator.addMethod("isTel", function(value,element) {       
      var tel =/^/d{3,4}-?/d{7,9}$/;    //电话号码格式010-12345678   
      returnthis.optional(element) || (tel.test(value));       
  }, "请正确填写您的电话号码");   
    
  // 联系电话(手机/电话皆可)验证   
  jQuery.validator.addMethod("isPhone",function(value,element) {   
      var length =value.length;   
      var mobile =/^(((13[0-9]{1})|(15[0-9]{1}))+/d{8})$/;   
      var tel =/^/d{3,4}-?/d{7,9}$/;   
      returnthis.optional(element) || (tel.test(value) || mobile.test(value));   
    
  }, "请正确填写您的联系电话");   
       
  // 邮政编码验证       
  jQuery.validator.addMethod("isZipCode",function(value, element) {       
      var tel =/^[0-9]{6}$/;       
      returnthis.optional(element) || (tel.test(value));       
  }, "请正确填写您的邮政编码");    
   

});

 

该文件要先被引用再对form进行验证。

注意：remote中的url 为servlet，但是这个servlet该怎么写呢

一开始以为是跟平时的一样：out.println("用户名"+name+"已存在！");

虽然可以验证，但是还是存在问题：输入个不存在的name还是提示存在。

后来还是Google，看到别人也是犯了这样的错误，解决方法时返回true,false.

但是 doGet是void类型的，return true是行不通的。

后来又请教群里的高手，正确写法是out.println("true");就可以了。

哎，费了老长时间

总算是把问题给解决了。

 

错误存放位置：

<form id="myform" action="">
<label>UserName: </label>
<input id="username" name="username"/>
<br>
<label>password: </label>
<input id="password" name="password"/>
<br>

<div id="error_username" >error: </div>

<br>
<input  type="submit" value="Submit"/>
</form>

$("#myform").validate({
        rules: {
           username: {required:true}
        },
        errorPlacement: function(error,element) {   
        if(element.attr("name") == "username" )  {
           
           error.appendTo("#error_username"); 
        } 
        else    
           error.insertAfter(element); 
        }
    });