快捷導航

jQuery驗證表單格式的使用方法

更新時間：2017年01月10日 08:38:54 作者：轉(zhuǎn)角那一刻

本文給大家講解關(guān)于此jQuery驗證的一些標記以及使用方法，非常不錯，具有參考借鑒借鑒價值，需要的朋友參考下

工作之余整理一些工作中編寫的代碼，記錄自己工作中的技術(shù)要點，便于自己記憶已經(jīng)整合。以下是關(guān)于此jQuery驗證的一些標記以及使用方法：

整個js代碼都放入jquery_validate_1.1.0.js中，通過一個匿名函數(shù)，jQuery的擴展方法，擴展方法為：initValidate函數(shù)，方法中帶一個options配置參數(shù)，目前配置參數(shù)只有一個屬性，{handlerUrl：""}，提供是否需要后臺請求驗證的url地址。只需要對取驗證的DOM綁定$("ID").initValidate(options)。通過給input控件添加自定義屬性，自定義屬性規(guī)則如下：

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

以上一個簡單的demo是驗證輸入格式是否為手機號，如果輸入的信息不符合規(guī)則，錯誤信息會提示在輸入框下一行，如下圖：

validate="true" // 執(zhí)行驗證，這個不設(shè)置為true其他屬性都不驗證；
isrequired="true" // 必填驗證
checkunique="true" // 后臺Ajax唯一性驗證，如果不唯一則驗證失??；
ctr-type="email" // 格式是email, pwd：密碼，char：姓名，number：數(shù)字，float：帶小數(shù)的數(shù)字，mobile：手機，idcard：身份證；
repeatpwd="true" // 密碼重復性檢驗，這個標簽必須同時出現(xiàn)在兩個需要檢驗的密碼和重復輸入密碼控件。
初始化示例：
$('#panda').initValidate();
提交按鈕提交之前對所有輸入進行驗證：
$('.okbtn').click(function () { return $('#panda').validateAllControls() });
Email驗證使用示例：
<input type="text" ctr-type="email" checkunique="true" isrequired="true" validate="true" name="myEmail" id="myEmail"/>
<label class="error"></label>
密碼驗證使用示例：
<input type="password" ctr-type="pwd" isrequired="true" validate="true" repeatpwd="true" name="newPassword"/>
<label class="error"></label>

以上的驗證，前提條件是validate="true"，這個屬性是驗證其他規(guī)則的一切，如果沒有設(shè)置這個屬性，其他的任何設(shè)置都不會驗證。此jquery驗證為光標失去焦點的驗證事件。

如果需要手動調(diào)用驗證的話，調(diào)用單獨的驗證方法：$("#panda").validateAllControls(options);輸入框的自定義以上面一樣設(shè)置。

文件的url路徑：http://files.cnblogs.com/files/panda-/jquery_validate_1.1.0.js，點擊查看，不知道怎么添加壓縮文件，這邊留下一個url路徑，為以后自己備份一份。

以上所述是小編給大家介紹的jQuery驗證表單格式的使用方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: