工作之余整理一些工作中編寫的代碼，記錄自己工作中的技術(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：""}，提供是否需要后臺(tái)請(qǐng)求驗(yàn)證的url地址。只需要對(duì)取驗(yàn)證的DOM綁定$("ID").initValidate(options)。通過給input控件添加自定義屬性，自定義屬性規(guī)則如下：

 <div id="panda">
  <input type="text" validate="true" ctr-type="mobile" />
 </div>

以上一個(gè)簡(jiǎn)單的demo是驗(yàn)證輸入格式是否為手機(jī)號(hào)，如果輸入的信息不符合規(guī)則，錯(cuò)誤信息會(huì)提示在輸入框下一行，如下圖：

validate="true" // 執(zhí)行驗(yàn)證，這個(gè)不設(shè)置為true其他屬性都不驗(yàn)證；
isrequired="true" // 必填驗(yàn)證
checkunique="true" // 后臺(tái)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();
提交按鈕提交之前對(duì)所有輸入進(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è)置都不會(huì)驗(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)證表單格式的使用方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論