摹退拔捅毫雀纠抵绒酥姓刺猫
使用validate来校验表单数据
register.js代码;
// jquery validate表单验证
$('form[name=register]').validate({
rules:{
account:{
required:true,//不能为空
rangelength:[5,17]//长度5-17
}
},
messages:{
account:{
required:'账号不能为空',
rangelength:'账号必须在5-17位之间'
}
}
});
messages用于定义不符合规则的输出信息，不写messages则默认输出英文的提示信息：
其中validate中汉字算一个字符，即与英文字母a一样都算作一个字符
添加自定义校验规则：
复制validate的邮箱校验 再修改代码
原来复制的代码：
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");
isZipCode是方法名称，自己命名即可，需要修改的是正则匹配规则，及提示信息
修改后的代码：
jQuery.validator.addMethod("user", function(value, element) {
var tel = /^[a-zA-Z][\w]{4,16}$/;
return this.optional(element) || (tel.test(value));
}, "以字母开头，5-17 字母、数字、下划线'_' ");
user:方法名称
正则解释：
/^$/定界符，[a-zA-Z]：字母a-z，A-Z,{4,16}:4-16位，加上字母最少一位，所以长度为5-17位
修改后的代码及调用：
jQuery.validator.addMethod("user", function(value, element) {
var tel = /^[a-zA-Z][\w]{4,16}$/;
return this.optional(element) || (tel.test(value));
}, "以字母开头，5-17 字母、数字、下划线'_' ");
$('form[name=register]').validate({
rules:{
account:{
required:true,//不能为空
user:true
}
},
messages:{
account:{
required:'账号不能为空'
}
}
});
将出错信息提示放置在span标签中，正确输入后就给label标签添加一个类success,并在css中书写代码：
errorElement:’span’,//指定错误提示信息显示在span标签里
success:function(label){
label.addClass(‘success’);
},
在Public的css中的regis.css中添加检校失败的类样式和成功的类样式
/*****jQuery Validate 错误信息*****/
input.error{
border:1px solid red;
}
input.valid {
border:1px solid #1d95f6;
}
span.error{
background : url(../Images/unchecked.gif) no-repeat 0 0;
padding-left: 16px;
color: #f00;
}
span.success{
background : url(../Images/checked.gif) no-repeat 0 0;
padding-left: 16px;
}
显示效果：
成功：
失败:
register.js表单验证源码：
// jquery validate表单验证
/**
* 添加验证方法
* 以字母开头，5-17 字母、数字、下划线"_"
*/
jQuery.validator.addMethod("user", function(value, element) {
var tel = /^[a-zA-Z][\w]{4,16}$/;
return this.optional(element) || (tel.test(value));
}, "以字母开头，5-17 字母、数字、下划线'_' ");
$('form[name=register]').validate({
errorElement:'span',//指定错误提示信息显示在span标签里
success:function(label){
label.addClass('success');
},
rules:{
account:{
required:true,//不能为空
user:true
},
pwd:{
required:true,
user:true
},
pwded:{
required:true,
equalTo:"#pwd"//与id为pwd的一致，注意这里必须 是id所以密码必须设置id属性
},
uname:{
required:true,
rangelength:[2,10]
}
},
messages:{
account:{
required:'账号不能为空'
},
pwd:{
required:'密码不能为空'
},
pwded:{
required:'请确认密码',
equalTo:'两次输入的密码不一致'
},
uname:{
required:'请填写昵称',
rangelength:'昵称在2-10个字之间'
}
}
});
娄拦瞎魏睡梧案称信钢恭胖琼