給表單參數(shù)添加驗(yàn)證（jQuery庫(kù)的使用）

準(zhǔn)備工作：

引入jQuery庫(kù)
引入bootstrap庫(kù)
引入jQuery validate庫(kù)

js文件：

var Register = function() {return {// main function to initiate the moduleinit : function() {// 字符驗(yàn)證 jQuery.validator.addMethod( "stringCheck", function(value, element) { return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value); }, "只能包括中文字、英文字母、數(shù)字和下劃線" );// 手機(jī)號(hào)碼驗(yàn)證 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)); }, "請(qǐng)正確填寫您的手機(jī)號(hào)碼" ); // 密碼驗(yàn)證 jQuery.validator.addMethod( "isPassword", function(value, element) { var mobile = /^[A-Za-z0-9]+$/ ; return this .optional(element) || mobile.test(value); }, "密碼只能包括數(shù)字和字母" );//顯示驗(yàn)證$( '.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],// 用戶名長(zhǎng)度在3~64之間stringCheck : true,remote : { //異步發(fā)送請(qǐng)求到服務(wù)器，驗(yàn)證userNametype : "post",//url : "/adminUser/authName.do",//需要服務(wù)器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 : { // 定義驗(yàn)證信息userName : {required : "用戶名必填" ,rangelength : $.validator.format("輸入的范圍在 {0}-{1} 之間的數(shù)字、字符、下劃線." ),remote : "用戶名存在" ,// 返回false時(shí)的提示信息},password : {required : "密碼必填" ,minlength : "您輸入的數(shù)字或者字符太少，最少為6" ,maxlength : "密碼不能超過16位" ,},passwordConfirm : {equalTo : "兩次輸入的密碼不一致" ,},mailbox : {required : "郵箱必填" ,email : "您輸入的郵箱不合法，請(qǐng)重新輸入" ,},nickName : {maxlength : "您輸入的昵稱已經(jīng)給你超過最大長(zhǎng)度20" ,},phone : {required : "手機(jī)號(hào)必填" ,number : "手機(jī)號(hào)只能是數(shù)字" ,minlength : "您輸入的手機(jī)號(hào)長(zhǎng)度不正確" ,}},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,//默認(rèn)表單提交});}}; }();

調(diào)用的方法( HTML中)

<form class= "form-vertical register-form" action="/adminUser/register.do" method="post"><input type= "hidden" id ="hiddenSpace" /><h3 class= "">用戶注冊(cè) </h3><!-- 返回錯(cuò)誤提示信息 --><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><!-- 返回錯(cuò)誤提示信息 --><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="確認(rèn)密碼" 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="手機(jī)號(hào)" name="phone" /></div></div></div><div class= "form-actions"><button type= "submit" id="register-submit-btn" class="btn green pull-right">注冊(cè) <i class= "m-icon-swapright m-icon-white"></ i></button></div></form>

以及對(duì)js文件的引入：

<script >jQuery(document).ready( function() {App.init();Register.init();}); </script >

參考文檔：
http://blog.csdn.net/qinnimei/article/details/51074797

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。