給表單參數添加驗證（jQuery庫的使用）

準備工作：

引入jQuery庫
引入bootstrap庫
引入jQuery validate庫

js文件：

var Register = function() {return {// main function to initiate the moduleinit : 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 containererrorClass : 'help-inline', // default input error message classfocusInvalid : false, // do not focus the last invalid inputignore : "",rules : {userName : {required : true,rangelength : [fields.min_username_length,fields.max_username_length],// 用戶名長度在3~64之間stringCheck : true,remote : { //異步發送請求到服務器，驗證userNametype : "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

總結

以上是生活随笔為你收集整理的jQuery validate 添加表单验证方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。