jQuery validate 添加表单验证方法
给表单参数添加验证（jQuery库的使用）
准备工作：
引入jQuery库
引入bootstrap库
引入jQuery validate库
js文件：
var Register = function() {
return {
// main function to initiate the module
init : function() {
// 字符验证
jQuery.validator.addMethod( "stringCheck", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "只能包括中文字、英文字母、数字和下划线" );
// 手机号码验证
jQuery.validator.addMethod( "isMobile", function(value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/ ;
return this .optional(element) || (length == 11 && mobile.test(value));
}, "请正确填写您的手机号码" );
// 密码验证
jQuery.validator.addMethod( "isPassword", function(value, element) {
var mobile = /^[A-Za-z0-9]+$/ ;
return this .optional(element) || mobile.test(value);
}, "密码只能包括数字和字母" );
//显示验证
$( '.register-form').show();
$( '.register-form').validate({
errorElement : 'label', // default input error message container
errorClass : 'help-inline', // default input error message class
focusInvalid : false, // do not focus the last invalid input
ignore : "",
rules : {
userName : {
required : true,
rangelength : [fields.min_username_length,fields.max_username_length],// 用户名长度在3~64之间
stringCheck : true,
remote : { //异步发送请求到服务器，验证userName
type : "post",
//url : "/adminUser/authName.do",//需要服务器controllor 中提供用户名检查的方法
data : {
userName : function() {
return $("#userName").val();
}
},
}
},
password : {
required : true,
minlength : fields.min_password_length,
maxlength : fields.max_password_length,
isPassword : true
},
passwordConfirm : {
equalTo : "#register_password" ,
},
mailbox : {
required : true,
email : true
},
nickName : {
maxlength : fields.max_nickname_length,
},
phone : {
required : true,
number : true,
minlength : fields.phonenum_length,
isMobile : true
},
},
messages : { // 定义验证信息
userName : {
required : "用户名必填" ,
rangelength : $.validator.format("输入的范围在 {0}-{1} 之间的数字、字符、下划线." ),
remote : "用户名存在" ,// 返回false时的提示信息
},
password : {
required : "密码必填" ,
minlength : "您输入的数字或者字符太少，最少为6" ,
maxlength : "密码不能超过16位" ,
},
passwordConfirm : {
equalTo : "两次输入的密码不一致" ,
},
mailbox : {
required : "邮箱必填" ,
email : "您输入的邮箱不合法，请重新输入" ,
},
nickName : {
maxlength : "您输入的昵称已经给你超过最大长度20" ,
},
phone : {
required : "手机号必填" ,
number : "手机号只能是数字" ,
minlength : "您输入的手机号长度不正确" ,
}
},
invalidHandler : function(event, validator) { // display error alert on form submit
},
highlight : function(element) { // hightlight error inputs
$(element).closest( '.control-group').addClass('error' ); // set errorclass to the control group
},
success : function(label) {
label.closest( '.control-group').removeClass('error' );
label.remove();
},
onsubmit: false,//默认表单提交
});
}
};
}();调用的方法( HTML中)
以及对js文件的引入：
<script >
jQuery(document).ready( function() {
App.init();
Register.init();
});
script >参考文档：
http://blog.csdn.net/qinnimei/article/details/51074797