給表單參數添加驗證（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=)