jquery.validate.js 应用例子
?? 验证表单是我们经常需要做的，今天发现了jQuery一个很强大的验证表单插件(jquery.validate.js 下载地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation/)，研究了一下发现他不光强大而且十分易于上手。真是不用不知道，一种真奇妙啊！
??
?? 下面附上我写的一个小例子：
jquery.validate.js
<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",//显示错误信息的容器IDwrapper: "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><div id="header"></div><div id="main"><form id="firstform" method="get" action=""><fieldset> <legend>jQuery验证</legend> <div id="xm" for="xm"> 姓 名 :</label> </div><div minlength="2"> </span></div> </div> <div id="xb" for="f1pwd"> 密 码 :</label> </div><div name="f1pwd" minlength="6"> </span></div> </div> <div id="xb" for="f1pwd2"> 密码确认 :</label> </div> <div name="f1pwd2" type="text" equalTo="#f1pwd"> </span></div> </div> <div id="csrq" for="f1csrq"> 出生日期 :</label> </div><div type="text" for="f1xjzd"> 现居住地 :</label> </div><div type="text" for="f1sfzh"> 身份证号 :</label> </div><div type="text" minlength="18" maxlength="19"> </span></div> </div> </fieldset> <div id="regSubmit"> <span id="btnCreate" onmouseover="btncreatehover(this);" onmouseout="btncreateout(this);"> <b type="submit">提 交</button><b onmouseover="btncancelhover(this);" onmouseout="btncancelout(this);"> <b type="button">取 消</button><b for="xm"> 姓 名 :</label> </div><div type="text"> </span></div> </div> <div id="xb" for="pwd"> 密 码 :</label> </div><div name="pwd" type="text"> </span></div> </div> <div id="xb" for="confirm_pwd"> 密码确认 :</label> </div> <div type="text"> </span></div> </div> <div id="csrq" for="f2csrq"> 出生日期 :</label> </div><div type="text"> </span></div> </div> <div id="xjzd" for="f2xjzd"> 现居住地 :</label> </div><div name="f2xjzd" type="text"> </span></div> </div> <div id="sfzh" for="f2sfzh"> 身份证号 :</label> </div><div type="text"> </span></div> </div> </fieldset> <div id="messageBox"></div><!-- 此容器用于汇总显示错误信息 --> <div id="regSubmit"> <span id="btnCreate" onmouseover="btncreatehover(this);" onmouseout="btncreateout(this);"> <b type="submit">提 交</button><b onmouseover="btncancelhover(this);" onmouseout="btncancelout(this);"> <b type="button">取 消</button><b /> 非常好