非常灵活实用的页面合法性校验框架
jQueryvalidate本身是一个非常灵活实用的校验框架，实现了大部分的前台校验情况。
validate进一步封装
wos_validate.js
$(document).ready(
function(){
一）/**//*设置修改默认属性，使validate符合自己的要求*/
$.validator.setDefaults({
submitHandler:function(form){
//防重复提交校验
$(form).find(":submit").attr("disabled",true).attr("value","提交中...");
form.submit();
},
//设置错误提示元素，默认span
errorElement:'div',
//设置提示信息样式
errorClass:'error_desc',
//忽略什么样的元素，默认hidden、disable...
ignore:''
});
二）下面是自定义校验方法，提供自己特殊或符合具体业务的校验
//字符验证
jQuery.validator.addMethod("stringCheck",function(value,element){
returnthis.optional(element)
||/^[\u0391-\uFFE5\w]+$/.test(value);
},"只能包括中文字、英文字母、数字和下划线");
//中文字两个字节
jQuery.validator.addMethod("byteRangeLength",function(value,
element,param){
varlength=value.length;
for(vari=0;i<value.length;i++){
if(value.charCodeAt(i)>127){
length++;
}
}
returnthis.optional(element)
||(length>=param[0]&&length<=param[1]);
},"请确保输入的值在3-15个字节之间(一个中文字算2个字节)");
//字符长度校验汉字字母均按1个计算
jQuery.validator.addMethod("charLength",function(value,
element,param){
varlength=value.length;
returnlength<=param;
},"请确保输入的值在${0}字符之内(一个中文字算1个字符)");
//身份证号码验证
jQuery.validator.addMethod("isIdCardNo",function(value,element){
returnthis.optional(element)||isIdCardNo(value);
},"请正确输入您的身份证号码");
//手机号码验证
jQuery.validator.addMethod("isMobile",function(value,element){
varlength=value.length;
varmobile=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
returnthis.optional(element)
||(length==11&&mobile.test(value));
},"请正确填写您的手机号码");
//电话号码验证
jQuery.validator.addMethod("isTel",function(value,element){
vartel=/^\d{3,4}-?\d{7,9}$/;//电话号码格式010-12345678
returnthis.optional(element)||(tel.test(value));
},"请正确填写您的电话号码");
//验证数字
jQuery.validator.addMethod("isNumber",function(value,element){
varnum=/^[0-9]*$/;
returnthis.optional(element)||(num.test(value));
},"请正确填写您的电话号码");
//联系电话(手机/电话皆可)验证
jQuery.validator.addMethod("isPhone",function(value,element){
varlength=value.length;
varmobile=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
vartel=/^\d{3,4}-?\d{7,9}$/;
returnthis.optional(element)
||(tel.test(value)||mobile.test(value));
},"请正确填写您的联系电话");
//价格金额
jQuery.validator.addMethod("isPrice",function(value,element){
varprice=/^\d+\.?\d{0,2}$/;//--/^[0-9]*.?[0-9]*$/;
returnthis.optional(element)||(price.test(value));
},"请正确填写您的价格金额");
//邮政编码验证
jQuery.validator.addMethod("isZipCode",function(value,element){
vartel=/^[0-9]{6}$/;
returnthis.optional(element)||(tel.test(value));
},"请正确填写您的邮政编码");
jQuery.validator.addMethod("endDate",
function(value,element,param){
varstartDate=$(param).val();
returnnewDate(Date.parse(startDate.replace("-","/")))<=newDate(Date.parse(value.replace("-","/")));
},
"结束日期必须大于开始日期!");
jQuery.validator.addMethod("nowDate",
function(value,element){
returnnewDate()<=strToDate(value);
},
"所选时间不能早于当前时间");
jQuery.validator.addMethod("mulityName",
function(value,element,param){
$.ajax({
type:"GET",
contentType:'application/json',
url:'mulityName.json',
async:false,//同步方法，如果用异步的话，flag永远为1
data:{'param':param},
success:function(msg){
if(msg=='yes'){
flag=0;
}
}
});
if(flag==0){
returnfalse;
}else{
returntrue;
}
},
"当前值已经存在请重新输入新值");
jQuery.validator.addMethod("dateTime",
function(value,element){
return/^(?:(?:(?:(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00)))(\/|-)(?:0?2\1(?:29)))|(?:(?:(?:1[6-9]|[2-9]\d)?\d{2})(\/|-)(?:(?:(?:0?[13578]|1[02])\2(?:31))|(?:(?:0?[1,3-9]|1[0-2])\2(29|30))|(?:(?:0?[1-9])|(?:1[0-2]))\2(?:0?[1-9]|1\d|2[0-8])))))\s(?:([0-1]\d|2[0-3]):[0-5]\d:[0-5]\d)$/m.test(value);
},
"请输入合法的时间（Time）");
jQuery.validator.methods.compareDate=function(value,element,param){
varstartDate=jQuery(param).val();
vardate1=strToDate(startDate);
vardate2=strToDate(value);
returndate1<date2;
};
functionstrToDate(str){
vartempStrs=str.split("");
vardateStrs=tempStrs[0].split("-");
varyear=parseInt(dateStrs[0],10);
varmonth=parseInt(dateStrs[1],10)-1;
varday=parseInt(dateStrs[2],10);
vardate;
if(tempStrs[1].length>0){
vartimeStrs=tempStrs[1].split(":");
varhour=parseInt(timeStrs[0],10);
varminute=parseInt(timeStrs[1],10)-1;
varsecond=parseInt(timeStrs[2],10);
date=newDate(year,month,day,hour,minute,second);
}else{
date=newDate(year,month,day);
}
returndate;
}
三）.改善jQueryvalidate的校验方式：被动校验--》主动校验
//开始验证
//获取所有的form表单
$('form').each(function(){
//获取每个form中所有需要校验的（带有validate_id和_desc(可选)）校验规则和信息，并进行格式化成validate所要的格式
varwosRules='';
varerroDesc='';
$(this).find(':input[validate_id]').each(function(){
varrule=$(this).attr('validate_id');
wosRules=wosRules+$(this).attr('name')+":{"+rule+'},';
if($(this).attr('validate_desc')!=undefined){
erroDesc=erroDesc+$(this).attr('name')+":{"+$(this).attr('validate_desc')+'},';
}
});
wosRules="{"+wosRules.substring(0,wosRules.length-1)+"}";
erroDesc="{"+erroDesc.substring(0,erroDesc.length-1)+"}";
varwosORules=eval('('+wosRules+')');
//console.log(wosRules);
//console.log(erroDesc);
$(this).validate({
//设置规则
rules:wosORules,
//rules:{name:{required:true},sort:{required:true,isNumber:true}},
//设置错误信息
messages:eval('('+erroDesc+')'),
//messages:{sort:{required:'请输入排序',isNumber:'请输入合法的数字'}},
/**//*设置验证触发事件*/
focusInvalid:false,
onkeyup:false,
/**//*设置错误信息提示DOM*/
errorPlacement:function(error,element){
error.appendTo(element.parent());
}
});
});
});
校验框架使用
1.引入js包：
<script
src="<%=request.getContextPath()%>/common/js/jquery/jquery-1.10.2.min.js"></script>
<scriptsrc="<%=request.getContextPath()%>/common/js/jquery/jquery.validate.min.js"></script>
<script
src="<%=request.getContextPath()%>/common/js/jquery/messages_zh.js"></script>
<script
src="<%=request.getContextPath()%>/common/js/page/wos_validate.js"></script>
2.在需要校验的表单的元素中添加validate_id和可选的validate_desc元素属性
validate_id规则：required：true，isNumber:true,compareTo:startDate...
Validate_desc规则：isNumber:‘请输入合法的数字’,compareTo:‘结束时间不能大于开始时间’
例子：
<formid="addcategory_form"...
<dd>
<spanfor="name">分类名称：</span>
<inputvalidate_id="required:true,charLength:30"
name="name"type="text"class="OrderEditInp">
</dd>
<dd>
<span>排序：</span>
<inputvalidate_id="required:true,isNumber:true"
validate_desc="required:'请输入排序',isNumber:'请输入合法的数字'"
name="sort"type="text"class="OrderEditInp">
</dd>
</form>
待扩展
目前只能校验form表单中的元素，对非表单元素校验有待于扩展。欢迎大家丰富。。。