jQuery validate 新增表單驗證方法

2021-07-11 00:09:15 字數 3557 閱讀 3211

引入jquery庫

引入bootstrap庫

引入jquery validate庫

var register = function

() , "只能包括中文字、英文本母、數字和下劃線" );

// 手機號碼驗證

jquery.validator.addmethod( "ismobile", function

(value, element) )|(15[0-9]))+\d)$/ ;

return

this .optional(element) || (length == 11 && mobile.test(value));

}, "請正確填寫您的手機號碼" );

// 密碼驗證

jquery.validator.addmethod( "ispassword", function

(value, element) , "密碼只能包括數字和字母" );

//顯示驗證

$( '.register-form').show();

$( '.register-form').validate(},}

},password : ,

passwordconfirm : ,

mailbox : ,

nickname : ,

phone : ,

},messages : - 之間的數字、字元、下劃線." ),

remote : "使用者名稱存在" ,// 返回false時的提示資訊

},password : ,

passwordconfirm : ,

mailbox : ,

nickname : ,

phone :

},invalidhandler : function

(event, validator) ,

highlight : function

(element) ,

success : function

(label) ,

onsubmit: false,//預設表單提交

});}

};}();

"hidden"

id ="hiddenspace" />-- 返回錯誤提示資訊 -->

"$" >

class="register_error" >$

div>

-- 返回錯誤提示資訊 -->

class= "control-group">

class= "control-label visible-ie8 visible-ie9"> 使用者名稱

class= "controls">

class= "input-icon left">

class= "icon-user"> class= "m-wrap placeholder-no-fix" type="text" placeholder="使用者名稱"

name="username"

id= "username" />

div>

id= "namespan">

div>

div>

class= "control-group">

class= "control-label visible-ie8 visible-ie9"> 密碼

class= "controls">

class= "input-icon left">

class= "icon-lock"> class= "m-wrap placeholder-no-fix" type="password"

id="register_password" placeholder= "密碼"

name ="password" />

div>

div>

div>

class= "control-group">

class= "control-label visible-ie8 visible-ie9"> 再次輸入密碼

class= "controls">

class= "input-icon left">

class= "icon-ok"> class= "m-wrap placeholder-no-fix" type="password" placeholder="確認密碼"

name="passwordconfirm" />

div>

div>

div>

class= "control-group">

--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->

class= "control-label visible-ie8 visible-ie9"> 郵箱

class= "controls">

class= "input-icon left">

class="icon-envelope" >

< input class ="m-wrap placeholder-no-fix" type= "text" placeholder ="郵箱"

name="mailbox" />

div>

div>

div>

class= "control-group">

class= "control-label visible-ie8 visible-ie9">

class= "controls">

class= "input-icon left">

class= "icon-cloud"> class= "m-wrap placeholder-no-fix" type="text" placeholder="暱稱"

name="nickname" />

div>

div>

div>

class= "control-group">

class= "control-label visible-ie8 visible-ie9">

class= "controls">

class= "input-icon left">

class= "icon-phone"> class= "m-wrap placeholder-no-fix" type="text" placeholder="手機號"

name="phone" />

div>

div>

div>

class= "form-actions">

"submit"

id="register-submit-btn"

class="btn green pull-right">

註冊 class= "m-icon-swapright m-icon-white">

div>

jquery(document).ready( function

() );

script >

參考文件:

jquery validate 校驗心得

1.rule 裡面的設定的各個項是以name 做為關鍵字,莫以id做為唯一值。謹記 2.jquery.validator.format 的使用列子 button click function this is alert str str jquery.validator.format str,worl...

jQuery Validate外掛程式使用

這幾天一直在接觸驗證方面的工作,jquery validate是乙個比較常用的驗證外掛程式,說一下心得吧。效果圖類似 說乙個簡單的,現在需求是模板編號只能是正整數數字。控制項 如下 模板編號 接下來就是使用jquery了,第一步肯定是匯入js庫了,這個不用說,第二步開始寫js 解釋一下吧,首先jqu...

jQuery Validate 觸發機制

lang en charset utf 8 titletitle src jquery 1.11.2.js script src jquery.validate.min.js script document ready function 15 0 9 18 0 9 d test value 請正確填...