jQuery- 表單驗證插件-Validation
▓▓▓▓▓▓ 大體介紹
jQuery Validate 插件爲表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定製選項，知足應用程序各類需求。該插件捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫用戶自定義方法的 API。全部的捆綁方法默認使用英語做爲錯誤信息，且已翻譯成其餘 37 種語言。該插件是由 Jörn Zaefferer 編寫和維護的，他是 jQuery 團隊的一名成員，是 jQuery UI 團隊的主要開發人員，是 QUnit 的維護人員。該插件在 2006 年 jQuery 早期的時候就已經開始出現，並一直更新至今。訪問 jQuery Validate 官網，下載最新版的 jQuery Validate 插件。javascript
下載地址：http://static.runoob.com/download/jquery-validation-1.14.0.zipcss
▓▓▓▓▓▓ 基本語法
Validate插件須要jQuery,因此咱們須要在頭部引入jQuery和Validate文件java
1 <script type="text/javascript" src="lib/jquery.js"></script> 2 <script type="text/javascript" src="dist/jquery.validate.min.js"></script>
文件引入完畢，先寫個簡單的表單jquery
1 <form class="cmxform" id="commentForm" method="get"> 2 <fieldset> 3 <legend>驗證完整的表單</legend> 4 <p> 5 <label for="firstname">名字</label> 6 <input id="firstname" name="firstname" type="text"> 7 </p> 8 <p> 9 <label for="lastname">姓氏</label> 10 <input id="lastname" name="lastname" type="text"> 11 </p> 12 <p> 13 <label for="username">用戶名</label> 14 <input id="username" name="username" type="text"> 15 </p> 16 <p> 17 <label for="password">密碼</label> 18 <input id="password" name="password" type="password"> 19 </p> 20 <p> 21 <label for="confirm_password">驗證密碼</label> 22 <input id="confirm_password" name="confirm_password" type="password"> 23 </p> 24 <p> 25 <label for="email">Email</label> 26 <input id="email" name="email" type="email"> 27 </p> 28 <p> 29 <label for="agree">請贊成咱們的聲明</label> 30 <input type="checkbox" class="checkbox" id="agree" name="agree"> 31 </p> 32 <p> 33 <input class="submit" type="submit" value="提交"> 34 </p> 35 </fieldset> 36 </form>
而後咱們開始寫驗證表單的代碼git
首先咱們須要知道那個表單須要驗證ajax
1 $(function(){
2
3 $('#commentForm').validate();
4
5 });
而後開始寫驗證的規則，要注意這裏選擇元素是根據每一個標籤的name屬性選擇的，基本語法以下app
1 $('#commentForm').validate({
2 rules: {
3 firstname: 'required',//required 表示是必填字段
4 lastname: {
5 required: true,
6 minlength: 3 // 最小長度是3
7 }
8 }
9 });
從上面能夠看出，若是一個信息只有一個驗證要求能夠寫成一行，好比 firstname；若是有多個驗證要寫成像 lastname 這種形式；知道了基本的語法jsp
在看看Validation都提供了那些校驗規則函數
(1)、required:true 必輸字段 (2)、remote:"remote-valid.jsp" 使用ajax方法調用remote-valid.jsp驗證輸入值 (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:true 必須輸入合法的信用卡號 (10)、equalTo:"#password" 輸入值必須和#password相同 (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
咱們將上面的表單驗證完善一下，以下post
1 $(function(){
2
3 $('#commentForm').validate({
4 rules: {
5
6 firstname: {
7 required: true,
8 minlength: 5
9 },
10
11 lastname: "required",
12
13 username: {
14 required: true,
15 rangelength: [4,6]
16 },
17
18 password: {
19 required: true,
20 minlength: 4,
21 number: true
22 },
23
24 confirm_password: {
25 required: true,
26 minlength: 3,
27 equalTo: '#password'
28 },
29
30 email: {
31 required: true,
32 email: true
33 },
34
35 }
36 });
37 });
效果：
能夠看到，這裏的提示默認是英文的不太滿意，將提示信息更改爲中文有兩種方式
第一種方式：引入語言文件（推薦）
1 <script type="text/javascript" src="dist/localization/messages_zh.js"></script>
他的提示信息是：
1 required: "這是必填字段",
2 remote: "請修正此字段",
3 email: "請輸入有效的電子郵件地址",
4 url: "請輸入有效的網址",
5 date: "請輸入有效的日期",
6 dateISO: "請輸入有效的日期 (YYYY-MM-DD)",
7 number: "請輸入有效的數字",
8 digits: "只能輸入數字",
9 creditcard: "請輸入有效的信用卡號碼",
10 equalTo: "你的輸入不相同",
11 extension: "請輸入有效的後綴",
12 maxlength: $.validator.format("最多能夠輸入 {0} 個字符"),
13 minlength: $.validator.format("最少要輸入 {0} 個字符"),
14 rangelength: $.validator.format("請輸入長度在 {0} 到 {1} 之間的字符串"),
15 range: $.validator.format("請輸入範圍在 {0} 到 {1} 之間的數值"),
16 max: $.validator.format("請輸入不大於 {0} 的數值"),
17 min: $.validator.format("請輸入不小於 {0} 的數值")
第二種方式：本身寫提示信息
1 $('#commentForm').validate({
2 rules: {
3
4 firstname: {
5 required: true,
6 minlength: 5
7 },
8
9 lastname: "required",
10
11 username: {
12 required: true,
13 rangelength: [4,6]
14 },
15
16 password: {
17 required: true,
18 minlength: 4,
19 number: true
20 },
21
22 confirm_password: {
23 required: true,
24 minlength: 3,
25 equalTo: '#password'
26 },
27
28 email: {
29 required: true,
30 email: true
31 }
32 },
33 messages: {
34
35 firstname: "請輸入您的名字",
36 lastname: "請輸入您的姓氏",
37 username: {
38 required: "請輸入用戶名",
39 minlength: "用戶名必需由兩個字母組成"
40 },
41 password: {
42 required: "請輸入密碼",
43 minlength: "密碼長度不能小於 5 個字母"
44 },
45 confirm_password: {
46 required: "請輸入密碼",
47 minlength: "密碼長度不能小於 5 個字母",
48 equalTo: "兩次密碼輸入不一致"
49 },
50 email: "請輸入一個正確的郵箱",
51 }
52 });
效果：
注意：還有一種寫驗證的方式是在 class 中寫，例如
<input id="firstname" name="firstname" type="text" class="{required:true, minlength:2}">
可是不推薦這種寫法，由於不符合樣式與結構分離的要求，而且還須要本身下載一個jquery.metadata.js文件纔可以這樣寫
▓▓▓▓▓▓ 表單提交問題
能夠在表單提交以前執行咱們自定義的代碼，當咱們的自定義代碼執行完畢後再提交表單
1 $('#commentForm').validate({
2
3 submitHandler: function(){
4 alert("提交事件成功");
5 from.submit();
6 }
7 });
能夠設置validate的默認值
1 $.validate.setDefaults({
2 submitHandler: function(){
3 alert("提交成功！");
4 form.submit();
5 }
6 });
只驗證不提交表單
1 $(function(){
2 $("#commentForm").validate({
3 debug:true;
4 });
5 });
▓▓▓▓▓▓ 錯誤提示信息設置
一、錯誤信息位置設置
errorPlacement方法是設置錯誤信息顯示在哪，默認值是在驗證元素的後面
1 errorPlacement: function(error, element) {
2 error.appendTo(element.parent());
3 }
errorClass 是設置錯誤信息的樣式，後跟css類名
errorElement 是設置用什麼標籤包住錯誤信息，默認值是<label>
errorLabelContainer 是設置將全部的錯誤信息包在一個地方
wrapper 是設置用什麼標籤再把上邊的 errorELement 包起來
例如：
1 errorPlacement: function(error,element){
2 $(element).closest('form').find('label[for="'+ element.attr("id") +'"]').append(error);
3 },
是將錯誤提示信息顯示在驗證的信息前面
效果：
例如：
1 errorElement: 'span',
2 errorClass: 'commentError',
3 errorLabelContainer: $('form div.error'),
4 wrapper: 'li',
是將每一個提示信息用<span>標籤包起來，給他們添加css名爲 .commentError 的樣式， 並把他們都包再一個class爲 error 的div裏，在用<li>把每一個提示信息包起來
效果：
二、錯誤信息樣式設置
有兩種方式能夠修改提示信息的樣式
第一種就是採用下載Validation時自帶的樣式文件
1 <link href="demo/css/screen.css" type="text/css" rel="stylesheet" />
第二種方式就是本身定義樣式（固然也能夠修改自帶的css文件）
例如添加這樣的樣式：
1 input.error { border: 1px solid red; }
2 label.error {
3 background:url("demo/images/unchecked.gif") no-repeat 0px 0px;
4
5 padding-left: 16px;
6
7 padding-bottom: 2px;
8
9 font-weight: bold;
10
11 color: #EA5200;
12 }
13 label.checked {
14 background:url("demo/images/checked.gif") no-repeat 0px 0px;
15 }
效果：
▓▓▓▓▓▓ 驗證時的問題
一、驗證的元素經過
驗證的元素經過驗證時若是要進行操做，可使用 success ，他能夠接受字符串或者是函數，當接受的是字符串的時候是添加樣式
例如：
success: function(){
alert(1);
},
是在要驗證的元素經過驗證時，彈出1
例如：
success: "valid"
是將css樣式名爲 .valid 添加到元素上
二、驗證方式
▓▓▓▓▓▓ 自定義校驗
雖然Validation提供了許多驗證的方式，可是有些狀況仍是不夠用的，因此若是要添加自定義的校驗方式可使用 addMethod 方法，一般將自定義的方法寫在 additional-methods.js 中，而後要引入這個文件
<script type="text/javascript" src="dist/additional-methods.js"></script>
寫入 additional-methods.js 文件的內容
例如：
1 $.validator.addMethod("isZipCode", function(value, element) {
2 var tel = /^[0-9]{6}$/;
3 return this.optional(element) || (tel.test(value));
4 }, "請正確填寫您的郵政編碼");
只要把這段代碼寫入 additional-methods.js 文件就可使用了
例如：
1 zipcode: {
2 required: true,
3 isZipCode :true
4 }
效果：
▓▓▓▓▓▓ radio 和 checkbox、select 的驗證
radio的required表示必須選中一個
checkbox的required表示必須選中，minlength表示必須選中的最小個數，maxlength表示必須選中的最大個數，rangelength[2,3]表示選中個數區間
select的required表示選中的value不能爲空，minlength表示必須選中的最小個數，maxlength表示必須選中的最大個數，rangelength[2,3]表示選中個數區間
總結：Validation插件提供了許多的驗證，用戶能夠本身添加本身的驗證和提示信息的樣式，可是在博客中我並無說起與ajax相關的內容，由於ajax尚未學習-_-||，若是有什麼問題能夠和我探討，若是有不對的地方，歡迎指正
- 1. jQuery插件Validation表單驗證
- 2. jQuery插件——Validation Plugin表單驗證
- 3. jQuery 表單驗證插件——Validation(基礎)
- 4. Jquery-05表單驗證插件-validation
- 5. jQuery表單驗證插件 -- Validation插件的使用
- 6. form-validation--表單驗證插件
- 7. jQuery插件 -- 表單驗證插件jquery.validate.js
- 8. Flask+JQuery Validation 插件+Ajax進行表單的驗證
- 9. 表單驗證插件jQuery Validation Engine使用介紹
- 10. 使用JQuery的插件validation完成表單驗證
- 更多相關文章...
- • PHP 表單驗證 - PHP教程
- • PHP 表單 - 驗證郵件和URL - PHP教程
- • IntelliJ IDEA安裝代碼格式化插件
- • TiDB 在摩拜單車在線數據業務的應用和實踐
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Appium入門
- 2. Spring WebFlux 源碼分析(2)-Netty 服務器啓動服務流程 --TBD
- 3. wxpython入門第六步（高級組件）
- 4. CentOS7.5安裝SVN和可視化管理工具iF.SVNAdmin
- 5. jedis 3.0.1中JedisPoolConfig對象缺少setMaxIdle、setMaxWaitMillis等方法，問題記錄
- 6. 一步一圖一代碼，一定要讓你真正徹底明白紅黑樹
- 7. 2018-04-12—（重點）源碼角度分析Handler運行原理
- 8. Spring AOP源碼詳細解析
- 9. Spring Cloud（1）
- 10. python簡單爬去油價信息發送到公衆號
- 1. jQuery插件Validation表單驗證
- 2. jQuery插件——Validation Plugin表單驗證
- 3. jQuery 表單驗證插件——Validation(基礎)
- 4. Jquery-05表單驗證插件-validation
- 5. jQuery表單驗證插件 -- Validation插件的使用
- 6. form-validation--表單驗證插件
- 7. jQuery插件 -- 表單驗證插件jquery.validate.js
- 8. Flask+JQuery Validation 插件+Ajax進行表單的驗證
- 9. 表單驗證插件jQuery Validation Engine使用介紹
- 10. 使用JQuery的插件validation完成表單驗證