前面的話
最常使用javascript的場合就是表單的驗證,而jQuery作為一個優秀的javascript庫,也提供了一個優秀的表單驗證插件——Validation。Validation是歷史最悠久的jQuery插件之一,經過了全球范圍內不同項目的驗證,並得到了許多Web開發者的好評。本文將詳細介紹validation插件
概述
jQuery Validate插件為表單提供了強大的驗證功能,讓客戶端表單驗證變得更簡單,同時提供了大量的定制選項,滿足應用程序各種需求。該插件捆綁了一套有用的驗證方法,包括 URL 和電子郵件驗證,同時提供了一個用來編寫用戶自定義方法的 API。所有的捆綁方法默認使用英語作為錯誤信息,且已翻譯成其他 37 種語言
作為一個標准的驗證方法庫,Validation擁有以下特點:
1、內置驗證規則:擁有必填、數字、E-Mail、URL和信用卡號等19類內置驗證規則
2、自定義驗證規則:可以很方便地自定義驗證規則
3、簡單強大的驗證信息提示:默認了驗證信息提示,並提供自定義覆蓋默認提示信息的功能
4、實時驗證:可以通過keyup或blur事件觸發驗證
validation作為jQuery的一個插件,使用時需要同jQuery一起引入,注意要先引入jquery
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script> <script src="http://files.cnblogs.com/files/xiaohuochai/jquery.validate-1.13.1.js"></script>
快速上手
validation功能強大且API眾多,如果要快速上手,只要掌握常用功能即可
<form id="demoForm"> <p> <label for="username">用戶名:</label> <input type="text" id="username" name="username"/> </p> <p> <label for="password">密碼:</label> <input type="password" id="password" name="password"/> </p> <p> <input type="submit" value="登錄"/> </p> </form> <script> $('#demoForm').validate({ rules:{ username:{ required: true, minlength: 2, maxlength: 10 }, password:{ required: true, minlength: 2, maxlength:10 } } }) </script>
上述代碼主要對name為'username'和'password'這兩個input控件進行了校驗,這兩個控件必須填寫內容,且字符長度必須在2-10之間
校驗規則
在快速上手的例子中,使用了required、minlength和maxlength這三個校驗規則。實際上validation的校驗規則有17個之多
序號 規則 描述 required:true 必須輸入的字段 remote:"check.php" 使用 ajax 方法調用 check.php 驗證輸入值 email:true 必須輸入正確格式的電子郵件 url:true 必須輸入正確格式的網址 date:true 必須輸入正確格式的日期,內部調用Date.parse()方法進行校驗 dateISO:true 必須輸入正確格式的日期(ISO),如:2009-06-23,1998/01/22 number:true 必須輸入合法的數字(負數,小數) digits:true 必須輸入整數 creditcard: 必須輸入合法的信用卡號 equalTo:"#field" 輸入值必須和 #field 相同 accept: 輸入擁有合法後綴名的字符串(上傳文件的後綴) maxlength:5 輸入長度最多是 5 的字符串(漢字算一個字符) minlength:10 輸入長度最小是 10 的字符串(漢字算一個字符) rangelength:[5,10] 輸入長度必須介於 5 和 10 之間的字符串(漢字算一個字符) range:[5,10] 輸入值必須介於 5 和 10 之間 max:5 輸入值不能大於 5 min:10 輸入值不能小於 10
下面使用一個更詳細的例子,對上面的17個規則進行應用
<form id="demoForm"> <p> <label for="username">用戶名:</label> <input type="text" id="username" name="username"/> </p> <p> <label for="password">密碼:</label> <input type="password" id="password" name="password"/> </p> <p> <label for="confirm-password">確認密碼</label> <input type="password" id="confirm-password" name="confirm-password"/> </p> <p> <label for="email">電子郵件:</label> <input id="email" name="email"/> </p> <p> <label for="url">網址:</label> <input id="url" name="url"/> </p> <p> <label for="date">生日:</label> <input id="date" name="date"/> </p> <p> <label for="num">隨機數(0-9):</label> <input id="num" name="num"/> </p> <p> <label for="card">信用卡號:</label> <input id="card" name="card"/> </p> <p> <input type="submit" value="登錄"/> </p> </form> <script> $('#demoForm').validate({ rules:{ username:{ required: true, maxlength: 10 }, password:{ required: true, range:[5,10] }, 'confirm-password':{ equalTo: "#password" }, email:{ email:true }, url:{ url:true }, date:{ dateISO:true }, num:{ min:0, max:9 }, card:{ creditcard:true } } }) </script>
默認提示
由上面的例子中看出,validate的默認提示是英文的
messages: { required: "This field is required.", remote: "Please fix this field.", email: "Please enter a valid email address.", url: "Please enter a valid URL.", date: "Please enter a valid date.", dateISO: "Please enter a valid date ( ISO ).", number: "Please enter a valid number.", digits: "Please enter only digits.", creditcard: "Please enter a valid credit card number.", equalTo: "Please enter the same value again.", maxlength: $.validator.format( "Please enter no more than {0} characters." ), minlength: $.validator.format( "Please enter at least {0} characters." ), rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ), range: $.validator.format( "Please enter a value between {0} and {1}." ), max: $.validator.format( "Please enter a value less than or equal to {0}." ), min: $.validator.format( "Please enter a value greater than or equal to {0}." ) }
不過可以將其修改為中文,只要加入以下代碼
$.extend($.validator.messages, { required: "這是必填字段", remote: "請修正此字段", email: "請輸入有效的電子郵件地址", url: "請輸入有效的網址", date: "請輸入有效的日期", dateISO: "請輸入有效的日期 (YYYY-MM-DD)", number: "請輸入有效的數字", digits: "只能輸入數字", creditcard: "請輸入有效的信用卡號碼", equalTo: "你的輸入不相同", extension: "請輸入有效的後綴", maxlength: $.validator.format("最多可以輸入 {0} 個字符"), minlength: $.validator.format("最少要輸入 {0} 個字符"), rangelength: $.validator.format("請輸入長度在 {0} 到 {1} 之間的字符串"), range: $.validator.format("請輸入范圍在 {0} 到 {1} 之間的數值"), max: $.validator.format("請輸入不大於 {0} 的數值"), min: $.validator.format("請輸入不小於 {0} 的數值") });
使用方式
上面的例子中,validate控件的使用,都是通過使用validate()方法完成的,由於這種方法將HTML結構和javascript邏輯分離,使得代碼更加優化
實際上,還有另一種方法就是通過添加HTML屬性的方式或添加class類名的方式來進行驗證,類似於HTML5新增的input類控件的功能
由於已經將驗證規則添加到HTML元素中,所以調用validate()方法時,參數為空
<form id="demoForm"> <p> <label for="username">用戶名:</label> <input type="text" id="username" name="username" class="required" minlength="2"/> </p> <p> <label for="email">電子郵件:</label> <input id="email" name="email" class="required email"/> </p> <p> <label for="url">網址:</label> <input id="url" name="url" class="url"/> </p> <p> <input type="submit" value="登錄"/> </p> </form> <script> $('#demoForm').validate({}) </script>
更改提示
無論是validate插件自帶的英文提示,或者是其擴展的中文提示,可能與實際項目的需求不相符。這時,就需要我們對錯誤提示進行更改
而更改錯誤提示的方法也很簡單,只需要使用validate()函數裡的,messages()方法即可。如果某個控件沒有使用messages()方法,則使用默認的錯誤提示信息。如下所示
在messages()方法中,{0}代表rules()方法當前規則的屬性值
<form id="demoForm"> <p> <label for="username">用戶名:</label> <input type="text" id="username" name="username" /> </p> <p> <label for="email">電子郵件:</label> <input id="email" name="email" /> </p> <p> <label for="url">網址:</label> <input id="url" name="url"/> </p> <p> <input type="submit" value="登錄"/> </p> </form> <script> $('#demoForm').validate({ rules:{ username:{ required: true, minlength: 2, maxlength: 10 }, email:{ required: true, email:true }, url:{ required: true, url:true } }, messages:{ username:{ required:"請輸入用戶名", minlength:"至少輸入{0}個字符" }, email:{ required:"請輸入郵箱", email:"郵箱格式不正確" }, url:{ required:"請輸入網址", url:"網址格式不正確(完整的網址應包括http://或https://)" } } }) </script>
美化樣式
實際上,validate插件輸出錯誤信息的方式是通過增加一個label控件實現的,該label控件的id名為'輸入控件的id名-error',類名為'error',且位於輸入控件的右側
下表中列出了關於錯誤信息的相關屬性的方法
參數 類型 默認值 描述 errorClass String "error" 指定錯誤提示的css類名 errorElement String "label" 用什麼標簽標記錯誤 errorContainer Selector 無 顯示或者隱藏驗證信息,可以自動實現有錯誤信息出現時把容器屬性變為顯示,無錯誤時隱藏,用處不大。如errorContainer: "#messageBox1, #messageBox2" errorLabelContainer Selector 無 把錯誤信息統一放在一個容器裡面 wrapper String 無 用什麼標簽再把上邊的errorELement包起來
【成功樣式】
validate插件有一個success()方法,用來設置要驗證的元素通過驗證後的動作,如果跟一個字符串,會當作一個css類,也可跟一個函數
success:String,Callback
success: function(label) { label.html(" ").addClass("success"); } success: "success"
但實際上,validate插件只是將label標簽添加了一個'success'類,且原先的'error'類並沒有刪除。且經過實際測試,'error'類名無法刪除,刪除之後,每次驗證成功時,validate插件都會自動再生成一個label標簽
所以,success的效果無法正常使用,這應該是validate插件的一個bug
<style> label.error{background: no-repeat 0 4px;background-image:url('unchecked.gif');margin-left:6px;padding-left:14px;color:red;} </style> <body> <form id="demoForm"> <p> <label for="username">用戶名:</label> <input type="text" id="username" name="username" /> </p> <p> <label for="email">電子郵件:</label> <input id="email" name="email" /> </p> <p> <label for="url">網址:</label> <input id="url" name="url"/> </p> <p> <input type="submit" value="登錄"/> </p> </form> <script> $('#demoForm').validate({ rules:{ username:{ required: true, minlength: 2, maxlength: 10 }, email:{ required: true, email:true }, url:{ required: true, url:true } }, messages:{ username:{ required:"請輸入用戶名", minlength:"至少輸入{0}個字符", maxlength:"最多輸入{0}個字符" }, email:{ required:"請輸入郵箱", email:"郵箱格式不正確" }, url:{ required:"請輸入網址", url:"網址格式不正確(完整的網址應包括http://或https://)" } } }) </script>
自定義驗證
由於需求的需要,除提供的默認驗證規則外,還需要自定義驗證規則,滿足業務需要。這時就需要使用addMethod()方法
【addMethod(】
addMethod(name,method,message)方法用來添加一個新的驗證方法
參數 name 是添加的方法的名字。參數 method 是一個函數,接收三個參數 (value,element,param)。value 是元素的值,element 是元素本身,param 是參數
以驗證手機號為例,手機號一般是11位,前3位是號段,後8位一般沒有限制。而且,在手機開頭很可能有0或+86
//開頭 (0|\+86)? //前3位 13\d|14[579]|15[0-35-9]|17[0135-8]|18\d //後8位 \d{8} //手機號碼 var phone = /^(0|\+86)?(13\d|14[579]|15[0-35-9]|17[0135-8]|18\d)\d{8}$/;
$.validator.addMethod({ 'phone', function(value,element,param){ var reg = /^(0|\+86)?(13\d|14[579]|15[0-35-9]|17[0135-8]|18\d)\d{8}$/; return value.test(reg); }, '請輸入正確的手機號碼' })
<style> label.error{margin-left:6px;padding-left:14px;color:red;background: no-repeat 0 4px;background-image:url('data:image/gif;base64,R0lGODlhDgAOAMQAAOpSAPWpgPvf0O5zMPGIUPe+n////+tdEPjJsP718POecO1oIPrUwPzq4Pa0kPKTYPSof////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAUUABEALAAAAAAOAA4AAAVcYCQm0AAAA5SIbHGcMHAULazEJ528AGIsgADDIUsEYAYDopBsAAOmXDLpOkVPB0ETFxskpjeY6fD4GhrJBAF1zCYDBx/jFYi8DoEH9yAqcGM0fTwxMywsUFZ1LCEAOw==');} </style> <form id="demoForm"> <p> <label for="phone">手機號碼:</label> <input type="text" id="phone" name="phone" /> </p> <p> <input type="button" value="提交"> </p> </form> <script> $.validator.addMethod( 'phone', function(value,element,param){ var reg = /^(0|\+86)?(13\d|14[579]|15[0-35-9]|17[0135-8]|18\d)\d{8}$/; return reg.test(value); }, '請輸入正確的手機號碼' ); $('#demoForm').validate({ rules:{ phone:{ required: true, phone:true } }, messages:{ phone:{ required:"請輸入手機號碼" } } }) </script>
修改觸發方式
下面的雖然是 boolean 型的,但建議除非要改為 false,否則別亂添加
觸發方式 類型 描述 默認值 onsubmit Boolean 提交時驗證。設置為 false 就用其他方法去驗證 true onfocusout Boolean 失去焦點時驗證(不包括復選框/單選按鈕) true onkeyup Boolean 在 keyup 時驗證。 true onclick Boolean 在點擊復選框和單選按鈕時驗證 true focusInvalid Boolean 提交表單後,未通過驗證的表單會獲得焦點 true focusCleanup Boolean 如果是true,當未通過驗證的元素獲得焦點時,移除錯誤提示 false
遠程校驗
使用 ajax 方式進行驗證,默認會提交當前驗證的值到遠程地址,如果需要提交其他的值,可以使用 data 選項
[注意]遠程地址只能輸出 "true" 或 "false",不能有其他輸出
remote: { url: "check-email.php", //後台處理程序 type: "post", //數據發送方式 dataType: "json", //接受數據格式 data: { //要傳遞的數據 username: function() { return $("#username").val(); } } }
<style> label.error{margin-left:6px;padding-left:14px;color:red;background: no-repeat 0 4px;background-image:url('data:image/gif;base64,R0lGODlhDgAOAMQAAOpSAPWpgPvf0O5zMPGIUPe+n////+tdEPjJsP718POecO1oIPrUwPzq4Pa0kPKTYPSof////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAUUABEALAAAAAAOAA4AAAVcYCQm0AAAA5SIbHGcMHAULazEJ528AGIsgADDIUsEYAYDopBsAAOmXDLpOkVPB0ETFxskpjeY6fD4GhrJBAF1zCYDBx/jFYi8DoEH9yAqcGM0fTwxMywsUFZ1LCEAOw==');} </style> <form id="demoForm"> <p> <label for="num">請選擇數字</label> <select name="num" id="num"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </p> <p> <input type="button" value="提交"> </p> </form> <script> $('#demoForm').validate({ rules:{ num:{ remote:"validateTest.php" } }, messages:{ num:{ remote:"選擇的數字不正確" } } }); </script>
<?php function test_input($data) { $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data; } $data = test_input($_REQUEST['num']); if($data == '2'){ echo "true"; }else{ echo "false"; } ?>
最後
validation插件的功能不只於此,但本文基本上把常用的功能進行了詳細的介紹。如果要了解validation更高級的功能,請移步官方網站
最後介紹一個比較有趣的知識——validate、validation和validator,它們的中文意思是驗證。validation插件的js文件名是validate.js,validation插件中最常用的方法就是validate()方法,基本上所有的驗證操作都通過該方法進行。如果要進行自定義驗證的話,則需要用到validator對象下的靜態方法addMethod()
以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持!