jQuery是一个快速、简洁的js库,为网站的快速开发简化了HTML文档遍历,事件处理,动画,以及Ajax交互。使用jQuery将极大的提高编写java script代码的效率, 让写出来的代码更加优雅, 更加健壮。
jquery.validate.js是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法
1.jquery包的引入:
引入jquery包:
2.添加校验说明:
主要使用的是java script编写的验证库——jQuery.Validate,这个验证库是属于jQuery的插件。
引入:
jQuery.Validate是监控form的,在任何提交表单的操作前jQuery.Validate都会检测表单里的输入项是否满足规则,满足才允许提交。所以需要在jQuery(document).ready()时为form进行验证注册,格式: $(“#formid”).validate(jsonobj)。
其中formid是文件中form表单的id,jsonobj包含两个属性:rules和messages,rules用来指明每个字段上添加的校验规则,messages用来说明相应的校验出错时对应的提示语。
messages为非必须,如果自己不定义该属性,会采用默认的提示。
例如/test/validate/formvalidate.jsp:
"http://www.w3.org/1999/xhtml">
"Content-Type" content="text/html; charset=ISO-8859-1" />
表单校验
注意:nameput是input标签的name。
Required、minlength、maxlength都是jQuery校验的内置验证方式。jQuery内置验证方式参考jQuery.validate.js的API。
3.自定义验证方式
下面是自定义的验证方式:
$.validator.addMethod("stringlength", function(value, element,params) {
//默认值 : {trim:true,minLength:-1,maxLength:-1
params = $.extend([true,-1,-1],params); //对于默认参数支持
if(params[0]){ //过滤首尾空格
value=$.trim(value);
}
value = value.replace(/<( :.)* >/g,""); //验证时过滤标签
return this.optional(element) || ((params[1]<0 || value.length>=params[1])&&(params[2]<0 || value.length<=params[2]));
}, jQuery.format("长度在{1}-{2}之间"));
例如home工程中的登录校验:
$('#loginform').validate({//登陆校验
rules:{
"userAccount.userName":{
"requiredstring":["true"],
" requiredstring ":true,
"stringlength":["true","3","40"]
},
"userAccount.userPwd":{
"requiredstring":["true"],
"stringlength":["true","1","20"]
}
},
messages:{
"userAccount.userName":{
"requiredstring":"用户名必填",
"stringlength":jQuery.format("用户名长度在{1}和{2}之间")
},
"userAccount.userPwd":{
"requiredstring":"密码不可以为空",
"stringlength":jQuery.format("密码长度在{1}和{2}之间")
}
}
})
userAccount.userName是页面对应的input的name,requiredstring、requiredstring、stringlength是自己定义的校验,定义在/image/hi/common/js/zxwvalidate.js里。
{1}、{2}等是rules里面对应验证方式的第几个元素,从0开始。
简单的实例:
$.validator.addMethod("twd", function(value, element,params) { //默认值 : {trim:true,minLength:-1,maxLength:-1
params = $.extend([true,-1,-1],params); //对于默认参数支持
if(params[0]){
value=$.trim(value);
}
})