通路jQuery validate官網下載下傳最新插件 https://jqueryvalidation.org/
validate是用來驗證表單的
以前我們都是用js手動驗證 現在可以通過這個插件直接調用别人寫好的方法 更加簡單友善
validate.js是建立在jquery之上的，是以得先導入jquery的類庫
我是下載下傳到本地了的jQuery和validate
然後直接引用
<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../../js/jquery.validate.min.js"></script> validate主要有三步操作
1. 表單.validate（）表示調用該插件
2. rules：定義規則 操作對象是表單内元素
3. messages：當違反規則的時候提示錯誤 操作對象是表單内元素
完整的：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<!--validate.js是建立在jquery之上的，是以得先導入jquery的類庫-->
<script type="text/javascript" src="../../js/jquery.validate.min.js" ></script>
<script>
$(function(){
$("#checkForm").validate({
rules:{
username:{
required:true,
minlength:6
},
password:{
required:true,
digits:true,
minlength:6
}
},
messages:{
username:{
required:"使用者名不能為空!",
minlength:"使用者名不得少于6位！"
},
password:{
required:"密碼不能為空!",
digits:"密碼必須是整數!",
minlength:"密碼不得少于6位!"
}
}
});
});
</script>
</head>
<body>
<form action="#" id="checkForm">
使用者名：<input type="text" name="username" /><br />
密碼：<input type="password" name="password"/><br />
<input type="submit"/>
</form>
</body>
</html> 效果圖：
規則其實更多 ： 可以參考
1 required:true 必須輸入的字段。
2 remote:"check.php" 使用 ajax 方法調用 check.php 驗證輸入值。
3 email:true 必須輸入正确格式的電子郵件。
4 url:true 必須輸入正确格式的網址。
5 date:true 必須輸入正确格式的日期。日期校驗 ie6 出錯，慎用。
6 dateISO:true 必須輸入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。隻驗證格式，不驗證有效性。
7 number:true 必須輸入合法的數字（負數，小數）。
8 digits:true 必須輸入整數。
9 creditcard: 必須輸入合法的信用卡号。
10 equalTo:"#field" 輸入值必須和 #field 相同。
11 accept: 輸入擁有合法字尾名的字元串（上傳檔案的字尾）。
12 maxlength:5 輸入長度最多是 5 的字元串（漢字算一個字元）。
13 minlength:10 輸入長度最小是 10 的字元串（漢字算一個字元）。
14 rangelength:[5,10] 輸入長度必須介于 5 和 10 之間的字元串（漢字算一個字元）。
15 range:[5,10] 輸入值必須介于 5 和 10 之間。
16 max:5 輸入值不能大于 5。
17 min:10 輸入值不能小于 10。 ![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)