给表单参数添加验证（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 == && 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中)
<form class= "form-vertical register-form" action="/adminUser/register.do" method="post">
<input type= "hidden" id ="hiddenSpace" />
<h3 class= "">用户注册 </h3>
<!-- 返回錯誤提示信息 -->
<div>
<c:choose>
<c:when test= "${ response.result == 'true' }" >
</c:when>
<c:otherwise>
<span class="register_error" >${ response.message} </span>
</c:otherwise>
</c:choose>
</div>
<!-- 返回錯誤提示信息 -->
<div class= "control-group">
<label class= "control-label visible-ie8 visible-ie9"> 用户名</label >
<div class= "controls">
<div class= "input-icon left">
<i class= "icon-user"></i > <input class= "m-wrap placeholder-no-fix" type="text" placeholder="用户名" name="userName" id= "userName" />
</div>
<span id= "namespan"></span >
</div>
</div>
<div class= "control-group">
<label class= "control-label visible-ie8 visible-ie9"> 密码</label >
<div class= "controls">
<div class= "input-icon left">
<i class= "icon-lock"></i > <input class= "m-wrap placeholder-no-fix" type="password" id="register_password" placeholder= "密码" name ="password" />
</div>
</div>
</div>
<div class= "control-group">
<label class= "control-label visible-ie8 visible-ie9"> 再次输入密码</label >
<div class= "controls">
<div class= "input-icon left">
<i class= "icon-ok"></i > <input class= "m-wrap placeholder-no-fix" type="password" placeholder="确认密码" name="passwordConfirm" />
</div>
</div>
</div>
<div class= "control-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<label class= "control-label visible-ie8 visible-ie9"> 邮箱</label >
<div class= "controls">
<div class= "input-icon left">
<i class="icon-envelope" ></i> < input class ="m-wrap placeholder-no-fix" type= "text" placeholder ="邮箱" name="mailbox" />
</div>
</div>
</div>
<div class= "control-group">
<label class= "control-label visible-ie8 visible-ie9"></ label>
<div class= "controls">
<div class= "input-icon left">
<i class= "icon-cloud"></i > <input class= "m-wrap placeholder-no-fix" type="text" placeholder="昵称" name="nickName" />
</div>
</div>
</div>
<div class= "control-group">
<label class= "control-label visible-ie8 visible-ie9"></ label>
<div class= "controls">
<div class= "input-icon left">
<i class= "icon-phone"></i > <input class= "m-wrap placeholder-no-fix" type="text" placeholder="手机号" name="phone" />
</div>
</div>
</div>
<div class= "form-actions">
<button type= "submit" id="register-submit-btn" class="btn green pull-right">
注册 <i class= "m-icon-swapright m-icon-white"></ i>
</button>
</div>
</form>
以及对js文件的引入：
<script >
jQuery(document).ready( function() {
App.init();
Register.init();
});
</script >
参考文档：
http://blog.csdn.net/qinnimei/article/details/51074797
![【web素材】01-10款大气的购物商城网站模板[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)