jquery validate小结

转载自：http://jackyrong.iteye.com/blog/909762

今天发现原来jquery还有jquery validate这个好东西,可以用来验证表单的,下面转载和小结下: 
1 初步使用,很简单,引入jqueryvalidate.js,下载在 
http://bassistance.de/jquery-plugins/jquery-plugin-validation/ 
2 一个例子 
  <script> 
function checkidcard(num){ 
var len = num.length, re; 
if (len == 15) 
re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{3})$/); 
else if (len == 18) 
re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\d)$/); 
else{ 
//alert("请输入15或18位身份证号,您输入的是 "+len+ "位"); 
return false; 
} 
var a = num.match(re); 
if (a != null){ 
if (len==15){ 
var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]); 
var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5]; 
}else{ 
var D = new Date(a[3]+"/"+a[4]+"/"+a[5]); 
var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5]; 
} 
if (!B){ 
//alert("输入的身份证号 "+ a[0] +" 里出生日期不对！"); 
return false; 
} 
} 
return true; 
} 
</script> 

<script type="text/javascript"> 
$.validator.setDefaults({ 
submitHandler: function() { alert("submitted!"); } 
}); 

// 添加验证方法 (身份证号码验证) 
jQuery.validator.addMethod("isIdCardNo", function(value, element) {   
return this.optional(element) || checkidcard(value);   
}, "请正确输入您的身份证号码"); 

$().ready(function() { 
$("#firstform").validate(); 

$("#secondform").validate({ 
/*errorLabelContainer: "#messageBox", //显示错误信息的容器ID 
wrapper: "li", //包含每个错误信息的容器*/ 
rules:{ 
xm:{ 
required: true, 
minlength: 2, 
maxlength: 5 
}, 
pwd:{ 
required: true, 
minlength: 6 
}, 
confirm_pwd:{ 
required: true, 
equalTo: "#pwd" 
}, 
f2csrq:{ 
required: true, 
date: true 
}, 
f2xjzd: { 
required: true
}, 
f2sfzh:{ 
/*digits: true, 
rangelength: [18,20]*/ 
required: true, 
isIdCardNo: true 
} 
}, 
messages:{ 
xm:{ 
required: "请填写姓名", 
minlength: "字符长度不能小于2个字符", 
maxlength: "字符长度不能大于5个字符" 
}, 
pwd:{ 
required: "请填写密码", 
minlength: "字符长度不能小于6个字符" 
}, 
confirm_pwd:{ 
required: "请再次输入密码", 
equalTo: "密码不一致" 
}, 
f2csrq:{ 
required: "请输入出生日期", 
date: "日期格式不正确(例：2009/04/07)" 
}, 
f2xjzd:{ 
required: "请输入地址"
}, 
f2sfzh:{ 
/*digits: "身份证号码只能为数字", 
rangelength: "身份号码长度为18～20个字符"*/ 
required: "请输入身份证号", 
isIdCardNo: "身份证号不正确" 
} 
} 
}); 

/*// 输入框获得焦点时，样式设置   
$('input').focus(function(){   
if($(this).is(":text") || $(this).is(":password"))   
$(this).addClass('focus');   
if ($(this).hasClass('have_tooltip')) {   
$(this).parent().parent().removeClass('field_normal').addClass('field_focus');   
}   
});   

// 输入框失去焦点时，样式设置   
$('input').blur(function() {   
$(this).removeClass('focus');   
if ($(this).hasClass('have_tooltip')) {   
$(this).parent().parent().removeClass('field_focus').addClass('field_normal');   
}   
});*/ 
}); 
</script> 

  注意的是:在INPUT里面class加入required说明是必填项，其他的就是验证相关数据比如email就是验证email的数据结构 

以下列出validate自带的默认验证 
        required: "必选字段", 
        remote: "请修正该字段", 
        email: "请输入正确格式的电子邮件", 
        url: "请输入合法的网址", 
        date: "请输入合法的日期", 
        dateISO: "请输入合法的日期 (ISO).", 
        number: "请输入合法的数字", 
        digits: "只能输入整数", 
        creditcard: "请输入合法的信用卡号", 
        equalTo: "请再次输入相同的值", 
        accept: "请输入拥有合法后缀名的字符串", 
        maxlength: jQuery.format("请输入一个长度最多是 {0} 的字符串"), 
        minlength: jQuery.format("请输入一个长度最少是 {0} 的字符串"), 
        rangelength: jQuery.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"), 
        range: jQuery.format("请输入一个介于 {0} 和 {1} 之间的值"), 
        max: jQuery.format("请输入一个最大为 {0} 的值"), 
        min: jQuery.format("请输入一个最小为 {0} 的值") 
validate ()的可选项 
debug：进行调试模式 
$ (".selector").validate 
({ 
   debug: true 
}) 
  把调试设置为默认 
$ .validator.setDefaults 
({ 
   debug: true 
}) 
submitHandler：用其他方式替代默认的SUBMIT,比如用AJAX的方式提交 
$ (".selector").validate 
({ 
   submitHandler: function(form) { 
   $ (form).ajaxSubmit(); 
   } 
}) 
ignore：忽略某些元素不验证 
$ ("#myform").validate 
({ 
   ignore: ".ignore" 
}) 
rules： 默认下根据form的classes, attributes, metadata判断，但也可以在validate函数里面声明 
Key/value 可自定义规则. Key是对象的名字 value是对象的规则，可以组合使用 class/attribute/metadata rules. 
以下代码特别验证selector类中name='name'是必填项并且 email是既是必填又要符合email的格式 
$ (".selector").validate 
({ 
   rules: { 
     // simple rule, converted to {required:true} 
     name: "required", 
     // compound rule 
     email: { 
       required: true, 
       email: true 
     } 
   } 
}) 
messages：更改默认的提示信息 
$ (".selector").validate 
({ 
   rules: { 
     name: "required", 
     email: { 
       required: true, 
       email: true 
     } 
   }, 
   messages: { 
     name: "Please specify your name", 
     email: { 
       required: "We need your email address to contact you", 
       email: "Your email address must be in the format of name@domain.com" 
     } 
   } 
}) 
groups：定义一个组，把几个地方的出错信息同意放在一个地方，用errorPlacement控制把出错信息放在哪里 
$ ("#myform").validate 
({ 
  groups: { 
    username: "fname lname" 
  }, 
  errorPlacement: function(error, element) { 
     if (element.attr("name") == "fname" || element.attr("name") == "lname" ) 
       error.insertAfter("#lastname"); 
     else 
       error.insertAfter(element); 
   }, 
   debug:true 
}) 

3 补充多一个jquery validate验证日期的例子: 
   <script type="text/javascript" src="script/jquery.js"></script> 
  <script type="text/javascript" src="script/jquery.validate.js"></script> 
  <SCRIPT LANGUAGE="JavaScript"> 
  <!-- 
    jQuery(function(){        
        jQuery.validator.methods.compareDate = function(value, element, param) { 
            //var startDate = jQuery(param).val() + ":00";补全yyyy-MM-dd HH:mm:ss格式 
            //value = value + ":00"; 
            
            var startDate = jQuery(param).val(); 
            
            var date1 = new Date(Date.parse(startDate.replace("-", "/"))); 
            var date2 = new Date(Date.parse(value.replace("-", "/"))); 
            return date1 < date2; 
        }; 
        
        jQuery("#form1").validate({ 
            focusInvalid:false, 
            rules:{ 
                "timeStart":{ 
                    required: true 
                }, 
                "timeEnd": { 
                    required: true, 
                    compareDate: "#timeStart" 
                } 
            }, 
            messages:{ 
                "timeStart":{ 
                    required: "开始时间不能为空" 
                }, 
                "timeEnd":{ 
                    required: "结束时间不能为空", 
                    compareDate: "结束日期必须大于开始日期!" 
                } 
            } 
        }); 
    }); 
  //--> 
  </SCRIPT> 
</HEAD> 

<BODY> 
<form id="form1" name="form1" method="post" action="demo.html"> 
   <p>timeStart: 
     <input name="timeStart" type="text" id="timeStart" value="2011-02-17 10:00:00"> yyyy-MM-dd HH:mm:ss 
   </p> 
   <p>timeEnd: 
     <input name="timeEnd" type="text" id="timeEnd" value="2011-02-17 9:00:00"> yyyy-MM-dd HH:mm:ss 
   </p> 
   <p> 
     <input type="submit" name="Submit" value="提交"> 
   </p> 
</form>