jquery validate表單驗證的基本用法入門_jquery

 一、 jQuery Validate 外掛程式的介紹

jQuery Validate 外掛程式為表單提供了強大的驗證功能，讓用戶端表單驗證變得更簡單，同時提供了大量的客製化選項，滿足應用程式各種需求。該外掛程式捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫使用者自訂方法的 API。所有的捆綁方法預設使用英語作為錯誤訊息，且已翻譯成其他 37 種語言。

該外掛程式是由 Jörn Zaefferer 編寫和維護的，他是 jQuery 團隊的一名成員，是 jQuery UI 團隊的主要開發人員，是 QUnit 的維護人員。

• 官方網站：http://bassistance.de/jquery-plugins/jquery-plugin-validation/
• 線上文件：http://docs.jquery.com/Plugins/Validation
• 線上 API：http://jquery.bassistance.de/api-browser/plugins.html

二、jQuery Validate 擁有的特點介紹

jQuery Validate 有以下的特點：

（1）內建驗證規則；

強大的 jQuery 表單驗證插件，適用於日常的 E-mail、電話號碼、網址等驗證及 Ajax 驗證，除自身擁有豐富的驗證規則外，還可以添加自訂的驗證規則。

相容 IE 6+, Chrome, Firefox, Safari, Opera 10+

（2）自訂驗證規則；

（3） 簡單，強大的訊息提示。

（4） 即時驗證：透過keyup 或是blur事件來觸發校驗，而不僅僅是提交的時候進行校驗。 三、簡單的例子來學習jQuery Validate

 

 這些例子前提都是需要引入jQuery函式庫和Validation外掛。

 <script type="text/javascript" src="../../lib/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="../../dist/jquery.validate.js"></script>

1. 利用外掛程式進行一些簡單的校驗

 
 
 <script type="text/javascript" src="../../lib/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="../../dist/jquery.validate.js"></script>
 
 
 <script>
 $(document).ready(function(){
  $("#commentForm").validate();
 });
 </script>


 
 

 

 
表单验证
 
Name
 
E-Mail
 
URL
 
text
 

 
 
 

效果如下：

 以上的校驗的解釋：
1）、首先需要引入jquery-1.11.1.js，因為這個插件實在JQuery的基礎上進行的。
2）、引入校驗外掛程式 jquery.validate.js 。
3）、引入提示本地化腳本。驗證資訊的國際化，預設驗證提示是英文的，導入validation已寫好的國際化文件就可實現國際化。改變 錯誤/正確 訊息顯示樣式。

4）、在input框的class屬性中加入要校驗的類型。針對不同的字段，進行驗證規則編碼，設定字段對應的屬性

其中的一些可驗證的規則類型：     

(1)required:true 必输字段 
(2)remote:"check.shtml" 使用ajax方法调用check.shtml验证输入值 
(3)email:true 必须输入正确格式的电子邮件(只能验证格式,不保证有效性) 
(4)url:true 必须输入正确格式的网址 
(5)date:true 必须输入正确格式的日期 
(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

5）、決定哪個表單需要被驗證

<script type="text/javascript">
////<![CDATA[
$(document).ready(function(){
 $("#commentForm").validate();
});
//]]>
</script>

以上就是針對jquery validate表單驗證的入門學習，希望對大家的學習有所幫助。