jquery.validate.js的Validate表單驗證
阿新 • • 發佈:2020-12-16
原文連線 https://blog.csdn.net/weixin_42765270/article/details/84591593
validate
一、 validate的使用步驟
- 引入jquery.min.js
- 引入 jquery.validate.js
- 頁面載入後對錶單進行驗證 $("#表單id名").validate({})
- 在validate中的rules中編寫驗證規則(格式如下)
- 欄位的name屬性:“校驗器”(tisps:一個輸入框只有一個校驗器的時候使用
- 欄位的name屬性:{校驗器:值,校驗器:值}(tips:輸入框需要有多個校驗器的時候使用)
- 欄位的name屬性:“校驗器”(tisps:一個輸入框只有一個校驗器的時候使用
- 在validate中的messages中編寫提示資訊(tips格式與rules相對應)
- 在validate中的submitHandler中編寫驗證通過執行的內容
圖示如下:
案例程式碼如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="scripts/common/jquery.min.js"></script>
<script type="text/javascript" src="scripts/common/jquery.validate.js"></script
<script type="text/javascript">
$("#zhuce").validate({
rules:{
regist_username:{
required:true
/* remote:{
type: "post",url: url,
data:{
userName:function () {
return $("regist_username").val();
}
}
}用ajax判斷資料庫中使用者名稱是否存在*/
},
regist_password:{
required:true,
minlength:6
},
final_password:{
equalTo:"#regist_password"
}
},
messages:{
regist_username:{required:"使用者名稱不能為空"},
regist_password:{required:"密碼不能為空",minlength:"密碼最小的長度為6"},
final_password:{equalTo:"兩次密碼不一致"}
},
submitHandler: function () {
//驗證通過後進行註冊
register();
}
})
</script>
</head>
<body>
<form id="zhuce">
<dl>
<dt>
<div class='header'>
<h3>注 冊</h3>
</div>
</dt>
<dt></dt>
<dt>
<div class='letter'>
<label for="regist_username">使用者名稱: </label>
<input type="text" name="regist_username" id="regist_username" tabindex='5'/>
</div>
</dt>
<dt>
<div class='letter'>
暱 稱: <input type="text" name="nickname" id="nickname" tabindex='6'/>
</div>
</dt>
<dt>
<div class='letter'>
<label for="regist_password"> 密 碼: </label>
<input type="password" name="regist_password" id="regist_password" tabindex='7'/>
</div>
</dt>
<dt>
<div class='password'>
<label for="final_password"> 確認密碼: </label>
<input type="password" name="final_password" id="final_password" tabindex='8'/>
</div>
</dt>
<dt>
<div>
<input type="submit" name="" id="regist_button" value=' 注 冊 ' tabindex='9'/>
<input type="button" name="" id="back" value=' 返 回 ' tabindex='10'/>
</div>
</dt>
</dl>
</form>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
預設校驗規則
序號 | 校驗型別 | 取值 | 描述 |
---|---|---|---|
1 | required | true&false | 必須填寫的欄位 |
2 | “@”&“email” | 必須輸入正確格式的電子郵件 | |
3 | remote | url路徑 | 使用ajax進行驗證 |
4 | date | 數字 | 正確格式日期 tips:ie6有bug |
5 | dateISO | 字串 | 正確格式的日期 例如:2018-11-28,2018/11/28 tips:只驗證格式,不驗證有效性 |
6 | number | true&false | 合法的數字 |
7 | digits | true&false | 整數 |
8 | creditcard | true&false | 合法的信用卡號 |
9 | equalTo | JQuery表示式(eg:"#regist_password") | 輸入值必須和 #regist_password相同。 |
11 | maxlength | 數字 | 最大長度 |
12 | minlength | 數字 | 最小長度 |
13 | rangelength | [min,max] | 輸入長度必須在 min和 max之間的字串(tips:漢字算一個字元) |
14 | range | [min,max] | 輸入值必須在 min和 max之間的數字 |
15 | max | :n | 最大值不能大於n |
16 | min | :n | 最小值不能小於n |