最近项目用到了jquery的validate验证，自己查了一下资料，在这里写一下自己做这个的时候经验和见解。
首先，要用jquery的验证，需要引个jquery的包，jquery-1.6.4.js（我用的是这个版本，目前好像已经有11版本的了，这个随便，只要支持validate）和jquery.validate.js。
然后，我们建一个页面必须有form表单，下面是我写的一个页面。
<s:form action="personalInfoEdit" namespace="/personalService" name="personalInfo_form" id="personalInfo_form" theme="simple">
<input id="sex" name="sex" value="${userPersonal.sex}" type="hidden"/>
<input id="identifyType" name="identifyType" value="${userPersonal.identifyType}" type="hidden"/>
<s:hidden name="ajaxable" value="true"></s:hidden>
<div class="per_header">
<p><i></i><span>个人信息</span></p>
</div>
<div class="per_container">
<h1>温馨提示：为了保障您的权益，请认真填写您的个人信息</h1>
<table class="con">
<tr>
<td class="_width380">姓名：</td>
<td><input type="text" value="${userPersonal.userName }" placeholder="请输入姓名" name="userName" id="userName" maxlength="20"/>
<span id="userName_info" style="color: #F60;"></span>
</td>
</tr>
<tr>
<td>证件类型： </td>
<td>
<select id="identifyTypeSel" name="identifyTypeSel" onchange="sexIdentifyType();" class="w_172px" style="width: 198px;"></select>
<span id="identifyTypeSel_info" style="color: #F60;"></span>
</td>
</tr>
<tr>
<td>证件号码：</td>
<td><input type="text" value="${userPersonal.identifyNumber }" id="identifyNumber" name="identifyNumber" maxlength="18"/>
<span id="identifyNumber_info" style="color: #F60;"></span>
</td>
</tr>
<tr>
<td>出生日期：</td>
<td>
<s:textfield id="birthday" readonly="true" onblur="checkInsurDate()" name="birthday" size="12" cssClass="textfield datepicker" title="" />
<span id="birthday_info" style="color: #F60;"></span>
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="button" class="${userPersonal.sex==1061 ? 'man woman' : 'man' }" value="男" id="gender" name="gender" onclick="setSex('1');" />
<input type="button" class="${userPersonal.sex==1062 ? 'man woman' : 'man' }" value="女" id="gender" name="gender" onclick="setSex('2');"/>
<span id="gender_info" style="color: #F60;"></span>
</td>
</tr>
<tr>
<td>固定电话： </td>
<td><input type="text" value="${userPersonal.homePhone}" id="gphone" name="homePhone"/>
<span id="gphone_info" style="color: #F60;"></span>
</td>
</tr>
<tr>
<td><i>＊</i>手机号码：</td>
<td><input type="text" value="${userPersonal.mobilePhone}" class="tel" id="phone" name="mobilePhone" maxlength="11"/>
<span id="phone_info" style="color: #F60;"></span>
</td>
</tr>
<tr class="hide">
<td>验证码：</td>
<td><input type="text" class="check" id="validatemobile" class="yzm" maxlength="5" name="activeCode"/>
<input type="button" class="check_has" value="获取验证码" onclick="return updateUserMobile();" />
<span id="validatemobile_info" style="color: #F60;"></span>
</td>
</tr>
<tr>
<td>邮箱： </td>
<td><input type="text" value="${userPersonal.email}" id="email" name="email" maxlength="50" />
<span id="email_info" style="color: #F60;"></span>
</td>
</tr>
<tr>
<td>收件地址：</td>
<td><input type="text" value="${userPersonal.contactAddress}" class="address" id="address" name="contactAddress" maxlength="50"/>
<span id="address_info" style="color: #F60;"></span>
</td>
</tr>
<tr>
<td></td>
<td>
<div class="last">
<a href="javascript:void(0)" onclick="return editInfo();">
<input type="button" value="保存" id="save_button" />
<input type="text">
</a>
<a href="javascript:void(0)" class="a_pos" onclick="return resetInfo()">取消</a>
</div>
</td>
</tr>
</table>
</div>
</s:form>
第三步，给这个表单加上验证方法，如下
function validateEditInfo() {
var validator = $("#personalInfo_form").validate({
rules : {
'userName' : {
required : true,
username_v:true,
maxlength : 20
},
'identifyTypeSel' : {
required : true
},
'identifyNumber' : {
required : true,
identifyNumber_v:true
},
'birthday' : {
birthday_v:true
},
'sex' : {
sex_v : true
},
'homePhone' : {
homephone_v : true
},
'mobilePhone' : {
required : true,
mobilephone_v:true,
maxlength : 11
},
'activeCode' : {
required : true,
maxlength:5
},
'email' : {
email_v:true
},
'contactAddress' : {
contactAddress_v : true
}
},
messages : {
'userName' : {
required : "请输入姓名 ",
username_v : "姓名格式错误 ",
maxlength : "姓名 长度最大允许输入20位"
},
'identifyTypeSel' : {
required :"请输入证件类型 "
},
'identifyNumber' : {
required : "请输入证件号码 "
},
'mobilePhone' : {
required : "请输入手机号",
maxlength:"手机号为11位"
},
'activeCode' : {
required : "请输入手机验证码"
}
},
errorPlacement: function(error, element) {
var id = $(element).attr("id");
if(id=="sex"){
id = "gender";
}
if (!validateFlag && $(element).val() == "") {
$("#"+id+"_info").html("").hide();
} else {
$("#"+id+"_info").html("").append(error).append('<div class="clear"></div>').css({display:'inline'});
}
},
success: function(label) {
var obj = $(label).parent();
$(obj).html("");
$(obj).hide();
}
});
return validator.form();
}
第四步，给验证方法里的自己定义的验证方法初始化。
//修改个人信息中邮箱验证
jQuery.validator.addMethod("email_v",function(value, element, params) {
return /(^(\\w)+(.\\w+)*@(\\w)+((\\.\\w+)+)$)/.test(value);
},"邮箱输入有误");
//修改个人信息中姓名验证
jQuery.validator.addMethod("username_v",function(value, element, params) {
return /^[\u0391-\uFFE5a-zA-Z·。.]*$/.test(value);
},"请输入正确的姓名");
//修改个人信息中手机号验证
jQuery.validator.addMethod("mobilephone_v",function(value, element, params) {
return /^[1][3-8]+\d{9}$/.test(value);
},"手机号输入有误");
//修改个人信息中收件地址验证
jQuery.validator.addMethod("contactAddress_v", function (value, element, params) {
return /^[\u0391-\uFFE5a-zA-Z·。.]{1,100}$/.test(value);
}, "收件地址格式错误");
//修改个人信息中座机地址验证
jQuery.validator.addMethod("homephone_v",function(value, element, params) {
if(value==""){
return true;
}else{
var flag = true;
var pattern2=/^\d{3}-\d{8}$/;
var pattern3=/^\d{4}-\d{7}$/;
if(!pattern2.exec(value) && !pattern3.exec(value)){
flag = false;
}
return flag;
}
},"格式错误(如：999-999999)");
//修改个人信息中座机地址验证
var identifyNumberError;
jQuery.validator.addMethod("identifyNumber_v",function(value, identifyNumber, params) {
var flag = validateIdentifyNumber(value);
if(!flag) {
return true;
} else {
identifyNumberError = flag;
return false;
}
},function() {return identifyNumberError;});
//修改个人信息中出生日期验证
jQuery.validator.addMethod("birthday_v",function(value, birthday, params) {
if(value==""){
return true;
}
var flag = validateBirthday(value);
return flag;
},"请确认身份证号与出生日期匹配");
//修改个人信息中性别验证
jQuery.validator.addMethod("sex_v",function(value, element, params) {
return validateSex(value);
},"请确认身份证号与性别匹配");
/**
* 校验证件号码
* @param {Object} element
* @param {Object} args
*/
function validateIdentifyNumber(identifyNumber) {
var identifyType=$("#identifyType").val();
identifyNumber = identifyNumber.replace('X', 'x');
var returnVal;
if(identifyType=='01'){ //身份证
var error = checkId(identifyNumber);
if(error.length==18) { //身份证号码正确，带值
returnVal = false;
} else {
returnVal = error;
}
}
return returnVal;
}
/**
* 校验出生日期
* @param {Object} birthday
*/
function validateBirthday(birthday){
var identifyType=$("#identifyType").val();
var identifyNumber=$("#identifyNumber").val();
identifyNumber = identifyNumber.replace('X', 'x');
if (identifyType == '01' && checkId(identifyNumber) == identifyNumber) {
if (getBirthday(identifyNumber) != birthday) {
return false;
}
}
return true;
}
/**
* 截取身份证中的出生日期
* @param {Object} identifyNumber
*/
function getBirthday(identifyNumber) {
return birthday = identifyNumber.substr(6,4)//
+"-"+identifyNumber.substr(10,2)//
+"-"+identifyNumber.substr(12,2);
}
/**
* 与身份证号一致
* @param {Object} value
*/
function validateSex(value) {
var identifyType=$("#identifyType").val();
var identifyNumber=$("#identifyNumber").val();
identifyNumber = identifyNumber.replace('X', 'x');
if (identifyType == '01' && checkId(identifyNumber) == identifyNumber) {
var sexVal = getSex(identifyNumber);
if(value%2 != sexVal) { //性别不一致返回false
return false;
}
}
return true;
}
/**
* 截取身份证中的性别
* @param {Object} identifyNumber
*/
function getSex(identifyNumber) {
var sexVal;
if(identifyNumber.length == 18){
sexVal = identifyNumber.substr(16,1);
}else{
sexVal = identifyNumber.substr(14,1);
}
return sexVal%2;
}
var newPid;
/**
* 校验身份证号格式
* */
function checkId(pId){
//检查身份证号码
var arrVerifyCode = [1,0,"x",9,8,7,6,5,4,3,2];
var Wi = [7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2];
var Checker = [1,9,8,7,6,5,4,3,2,1,1];
if( pId.length != 18) return "身份证号输入错误";
var Ai = pId.length == 18 ? pId.substring(0,17) : pId.slice(0,6) + "19" + pId.slice(6,16);
if (!/^\d+$/.test(Ai)) return "身份证除最后一位外，必须为数字！";
var yyyy = Ai.slice(6,10), mm = Ai.slice(10,12) - 1, dd=Ai.slice(12,14);
var d = new Date(yyyy,mm,dd), now=new Date();
var year = d.getFullYear(), mon = d.getMonth(), day=d.getDate();
if (year != yyyy || mon != mm || day != dd || d > now || year < 1910) return "身份证号输入错误！";
for(var i = 0, ret = 0; i < 17; i++)
ret += parseInt(Ai.charAt(i) * Wi[i]);
Ai += arrVerifyCode[ret %=11];
newPid= Ai;
return pId.length == 18 && pId != Ai ? "身份证号输入错误！" : Ai;
}
