web_jQuery的外掛_校驗器
阿新 • • 發佈：2018-12-16
1.使用步驟
- 匯入jquery.js檔案
- 匯入validate.js檔案
- 匯入messages_zh.js檔案
- 在頁面載入成功後獲取所要校驗的表單物件
表單物件.validate({ //rules:校驗規則 rules:{ name屬性值:{ 校驗器：校驗規則, 校驗器：校驗規則 }, name屬性值:{ 校驗器：校驗規則, 校驗器：校驗規則 } }, //messages:提示資訊 messages:{ name屬性值:{ 校驗器："提示資訊", 校驗器："提示資訊" }, name屬性值:{ 校驗器："提示資訊", 校驗器："提示資訊" } } })
2.校驗器常用的規則
| 校驗規則 | 取值 | 說明 |
| required | true/false | 必填項 |
| number | true/false | 必須輸入為數字 |
| min|max | 數字 | |
| range | [startIndex,endIndex] | |
| minLength|maxLength|lengthRange | ||
| *@* | ||
| equalTo | jquery物件 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>validate使用</title> <script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script> <!--validate校驗庫--> <script src="../js/jquery.validate.js" type="text/javascript"></script> <!--國際化庫，中文提示--> <script type="text/javascript" src="../js/messages_zh.js" ></script> <script type="text/javascript"> $(function(){ $("#formId").validate({ rules:{ username:{ required:true }, password:{ required:true, number:true }, repassword:{ equalTo:$("[name='password']") }, zuixiaozhi:{ min:4 }, shuzhiqujian:{ range:[3,8] } }, messages:{ username:{ required:"使用者名稱不能為空" }, password:{ required:"密碼不能為空", number:"必須為數字" }, repassword:{ equalTo:"兩次輸入的密碼必須相同" }, zuixiaozhi:{ min:"最小值為4" }, shuzhiqujian:{ range:"最小值為{0},最大值為{1}" } } }) }) </script> </head> <body> <form id="formId" action=""> 必填：<input type="text" name="username" /> <br/> 必填數字： <input type="text" name="password" /> <br /> 必填重複： <input type="text" name="repassword" /> <br /> 最小值： <input type="text" name="zuixiaozhi" /> <br /> 區間： <input type="text" name="shuzhiqujian" /> <br /> <input type="submit" value="提交" /> </form> </body> </html>
3.自定義校驗器
$.validator.addMethod(
校驗器的名,
function(value,ele,params){
value:輸入的值
ele:對應的js物件
params：對應選擇器的取值
如果匹配：true
不匹配：false
},
"不符合校驗規則給出的提示資訊"
)