jQuery驗(yàn)證表單格式的使用方法
工作之余整理一些工作中編寫的代碼,記錄自己工作中的技術(shù)要點(diǎn),便于自己記憶已經(jīng)整合。以下是關(guān)于此jQuery驗(yàn)證的一些標(biāo)記以及使用方法:
整個(gè)js代碼都放入jquery_validate_1.1.0.js中,通過一個(gè)匿名函數(shù),jQuery的擴(kuò)展方法,擴(kuò)展方法為:initValidate函數(shù),方法中帶一個(gè)options配置參數(shù),目前配置參數(shù)只有一個(gè)屬性,{handlerUrl:""}
,提供是否需要后臺請求驗(yàn)證的url地址。只需要對取驗(yàn)證的DOM綁定$("ID").initValidate(options)
。通過給input控件添加自定義屬性,自定義屬性規(guī)則如下:
<div id="panda"> <input type="text" validate="true" ctr-type="mobile" /> </div>
以上一個(gè)簡單的demo是驗(yàn)證輸入格式是否為手機(jī)號,如果輸入的信息不符合規(guī)則,錯(cuò)誤信息會提示在輸入框下一行,如下圖:
validate="true" // 執(zhí)行驗(yàn)證,這個(gè)不設(shè)置為true其他屬性都不驗(yàn)證; isrequired="true" // 必填驗(yàn)證 checkunique="true" // 后臺Ajax唯一性驗(yàn)證,如果不唯一則驗(yàn)證失??; ctr-type="email" // 格式是email, pwd:密碼,char:姓名,number:數(shù)字,float:帶小數(shù)的數(shù)字,mobile:手機(jī),idcard:身份證; repeatpwd="true" // 密碼重復(fù)性檢驗(yàn),這個(gè)標(biāo)簽必須同時(shí)出現(xiàn)在兩個(gè)需要檢驗(yàn)的密碼和重復(fù)輸入密碼控件。 初始化示例: $('#panda').initValidate(); 提交按鈕提交之前對所有輸入進(jìn)行驗(yàn)證: $('.okbtn').click(function () { return $('#panda').validateAllControls() }); Email驗(yàn)證使用示例: <input type="text" ctr-type="email" checkunique="true" isrequired="true" validate="true" name="myEmail" id="myEmail"/> <label class="error"></label> 密碼驗(yàn)證使用示例: <input type="password" ctr-type="pwd" isrequired="true" validate="true" repeatpwd="true" name="newPassword"/> <label class="error"></label>
以上的驗(yàn)證,前提條件是validate="true"
,這個(gè)屬性是驗(yàn)證其他規(guī)則的一切,如果沒有設(shè)置這個(gè)屬性,其他的任何設(shè)置都不會驗(yàn)證。此jquery驗(yàn)證為光標(biāo)失去焦點(diǎn)的驗(yàn)證事件。
如果需要手動(dòng)調(diào)用驗(yàn)證的話,調(diào)用單獨(dú)的驗(yàn)證方法:$("#panda").validateAllControls(options)
;輸入框的自定義以上面一樣設(shè)置。
文件的url路徑:http://files.cnblogs.com/files/panda-/jquery_validate_1.1.0.js,點(diǎn)擊查看,不知道怎么添加壓縮文件,這邊留下一個(gè)url路徑,為以后自己備份一份。
以上所述是小編給大家介紹的jQuery驗(yàn)證表單格式的使用方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
使用jQuery調(diào)用XML實(shí)現(xiàn)無刷新即時(shí)聊天
這篇文章主要介紹了使用jQuery調(diào)用XML實(shí)現(xiàn)無刷新即時(shí)聊天的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08基于jquery實(shí)現(xiàn)ajax無刷新評論
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)ajax無刷新評論的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考2016-05-05jquery插件splitScren實(shí)現(xiàn)頁面分屏切換模板特效
這篇文章主要介紹了jquery插件splitScren實(shí)現(xiàn)頁面分屏切換模板特效的相關(guān)資料,需要的朋友可以參考下2015-06-06jquery Moblie入門—hello world的示例代碼學(xué)習(xí)
jquery Moblie入門:Hello World的示例代碼學(xué)習(xí),感興趣的朋友可以了解下哦2013-01-01