工作之余整理一些工作中編寫的代碼,記錄自己工作中的技術要點,便於自己記憶已經整合。以下是關於此jQuery驗證的一些標記以及使用方法:
整個js代碼都放入jquery_validate_1.1.0.js中,通過一個匿名函數,jQuery的擴展方法,擴展方法為:initValidate函數,方法中帶一個options配置參數,目前配置參數只有一個屬性,{handlerUrl:""},提供是否需要後台請求驗證的url地址。只需要對取驗證的DOM綁定$("ID").initValidate(options)。通過給input控件添加自定義屬性,自定義屬性規則如下:
<div id="panda">
<input type="text" validate="true" ctr-type="mobile" />
</div>
以上一個簡單的demo是驗證輸入格式是否為手機號,如果輸入的信息不符合規則,錯誤信息會提示在輸入框下一行,如下圖:
validate="true" // 執行驗證,這個不設置為true其他屬性都不驗證;
isrequired="true" // 必填驗證
checkunique="true" // 後台Ajax唯一性驗證,如果不唯一則驗證失敗;
ctr-type="email" // 格式是email, pwd:密碼,char:姓名,number:數字,float:帶小數的數字,mobile:手機,idcard:身份證;
repeatpwd="true" // 密碼重復性檢驗,這個標簽必須同時出現在兩個需要檢驗的密碼和重復輸入密碼控件。
初始化示例:
$('#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",這個屬性是驗證其他規則的一切,如果沒有設置這個屬性,其他的任何設置都不會驗證。此jquery驗證為光標失去焦點的驗證事件。
如果需要手動調用驗證的話,調用單獨的驗證方法:$("#panda").validateAllControls(options);輸入框的自定義以上面一樣設置。
文件的url路徑:
到Linux公社資源站下載:
------------------------------------------分割線------------------------------------------
免費下載地址在 http://linux.linuxidc.com/
用戶名與密碼都是www.linuxidc.com
具體下載目錄在 /2017年資料/1月/13日/jQuery驗證表單格式/
下載方法見 http://www.linuxidc.com/Linux/2013-07/87684.htm
------------------------------------------分割線------------------------------------------
這邊留下一個url路徑,為以後自己備份一份。