该文档转载自 http://ideabean.javaeye.com/blog/363927
官方网站 http://bassistance.de/jquery-plugins/jquery-plugin-validation/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery表单验证例子</title> <link type="text/css" rel="stylesheet" media="screen" href="style/cmxform.css" /> <link type="text/css" rel="stylesheet" media="screen" href="style/reg.css" /> <!--[if lte IE 6]> <link type="text/css" rel="stylesheet" media="screen" href="style/ie.css" /> <![endif]--> <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/jquery.validate.js" charset="gb2312"></script> <script type="text/javascript" src="script/buttonstyle.js"></script> <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> </head> <body> <div id="header"></div> <div id="main"> <form id="firstform" method="get" action=""> <fieldset> <legend>jQuery验证</legend> <div id="xm" class="owinput"> <div class="owlabel"> <label class="req" for="xm"> 姓 名 :</label> </div> <div class="owfield"> <span class="inp"> <input name="xm" class="required" minlength="2"> </span> </div> </div> <div id="xb" class="owinput"> <div class="owlabel"> <label class="req" for="f1pwd"> 密 码 :</label> </div> <div class="owfield"> <span class="inp"> <input id="f1pwd" name="f1pwd" class="required" minlength="6"> </span> </div> </div> <div id="xb" class="owinput"> <div class="owlabel"> <label class="req" for="f1pwd2"> 密码确认 :</label> </div> <div class="owfield"> <span class="inp"> <input value="" name="f1pwd2" type="text" class="required" equalTo="#f1pwd"> </span> </div> </div> <div id="csrq" class="owinput"> <div class="owlabel"> <label class="req" for="f1csrq"> 出生日期 :</label> </div> <div class="owfield"> <span class="inp"> <input name="f1csrq" type="text" class="required date"> </span> </div> </div> <div id="xjzd" class="owinput"> <div class="owlabel"> <label class="req" for="f1xjzd"> 现居住地 :</label> </div> <div class="owfield"> <span class="inp"> <input name="f1xjzd" type="text" class="required"> </span> </div> </div> <div id="sfzh" class="owinput"> <div class="owlabel"> <label class="req" for="f1sfzh"> 身份证号 :</label> </div> <div class="owfield"> <span class="inp"> <input name="f1sfzh" type="text" class="required isIdCardNo" minlength="18" maxlength="19"> </span> </div> </div> </fieldset> <div id="regSubmit"> <span id="btnCreate" class="regBtn" onmouseover="btncreatehover(this);" onmouseout="btncreateout(this);"> <b class="tl"><b class="tr"></b></b><button id="send" type="submit">提 交</button><b class="bl"><b class="br"></b></b> </span> <span id="btnCancel" class="cancelBtn" onmouseover="btncancelhover(this);" onmouseout="btncancelout(this);"> <b class="tl"><b class="tr"></b></b><button id="cancelBtn" type="button">取 消</button><b class="bl"><b class="br"></b></b> </span> </div> </form> <form id="secondform"> <fieldset> <legend>自定义jQuery验证</legend> <div id="xm" class="owinput"> <div class="owlabel"> <label class="req" for="xm"> 姓 名 :</label> </div> <div class="owfield"> <span class="inp"> <input name="xm" type="text"> </span> </div> </div> <div id="xb" class="owinput"> <div class="owlabel"> <label class="req" for="pwd"> 密 码 :</label> </div> <div class="owfield"> <span class="inp"> <input id="pwd" name="pwd" type="text"> </span> </div> </div> <div id="xb" class="owinput"> <div class="owlabel"> <label class="req" for="confirm_pwd"> 密码确认 :</label> </div> <div class="owfield"> <span class="inp"> <input name="confirm_pwd" type="text"> </span> </div> </div> <div id="csrq" class="owinput"> <div class="owlabel"> <label class="req" for="f2csrq"> 出生日期 :</label> </div> <div class="owfield"> <span class="inp"> <input name="f2csrq" type="text"> </span> </div> </div> <div id="xjzd" class="owinput"> <div class="owlabel"> <label class="req" for="f2xjzd"> 现居住地 :</label> </div> <div class="owfield"> <span class="inp"> <input value="" name="f2xjzd" type="text"> </span> </div> </div> <div id="sfzh" class="owinput"> <div class="owlabel"> <label class="req" for="f2sfzh"> 身份证号 :</label> </div> <div class="owfield"> <span class="inp"> <input name="f2sfzh" type="text"> </span> </div> </div> </fieldset> <div id="messageBox"></div> <!-- 此容器用于汇总显示错误信息 --> <div id="regSubmit"> <span id="btnCreate" class="regBtn" onmouseover="btncreatehover(this);" onmouseout="btncreateout(this);"> <b class="tl"><b class="tr"></b></b><button id="send" type="submit">提 交</button><b class="bl"><b class="br"></b></b> </span> <span id="btnCancel" class="cancelBtn" onmouseover="btncancelhover(this);" onmouseout="btncancelout(this);"> <b class="tl"><b class="tr"></b></b><button id="cancelBtn" type="button">取 消</button><b class="bl"><b class="br"></b></b> </span> </div> </form> </div> <div id="footer"></div> </body> </html>
文章来自：http://www.cnblogs.com/chenxizhang/archive/2010/01/24/1655311.html