jquery validate表單驗證的基本用法入門
一、 jQuery Validate 插件的介紹
jQuery Validate 插件為表單提供了強大的驗證功能,讓客戶端表單驗證變得更簡單,同時提供了大量的定制選項,滿足應用程序各種需求。該插件捆綁了一套有用的驗證方法,包括 URL 和電子郵件驗證,同時提供了一個用來編寫用戶自定義方法的 API。所有的捆綁方法默認使用英語作為錯誤信息,且已翻譯成其他 37 種語言。
該插件是由 Jörn Zaefferer 編寫和維護的,他是 jQuery 團隊的一名成員,是 jQuery UI 團隊的主要開發(fā)人員,是 QUnit 的維護人員。
- 官方網(wǎng)站: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)內(nèi)置驗證規(guī)則;
功能強大的 jQuery 表單驗證插件,適用于日常的 E-mail、電話號碼、網(wǎng)址等驗證及 Ajax 驗證,除自身擁有豐富的驗證規(guī)則外,還可以添加自定義的驗證規(guī)則。
兼容 IE 6+, Chrome, Firefox, Safari, Opera 10+
(2)自定義驗證規(guī)則;
(3) 簡單,強大的信息提示。
(4) 實時驗證:通過keyup 或是blur事件來觸發(fā)校驗,而不僅僅是提交的時候進行校驗。
三、簡單的例子來學習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. 利用插件進行一些簡單的校驗
<html> <head> <title>jQuery PlugIn -一個簡單帶驗證例子</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="../../lib/jquery-1.11.1.js"></script> <script type="text/javascript" src="../../dist/jquery.validate.js"></script> <script type="text/javascript" src="../../dist/localization/messages_zh.js"></script> <style type="text/css"> * { font-family: Verdana; font-size:13px; } input[type='text']{width:200px;} textarea{width:155px;} label { width: 10em; float: left; } label.error { float: none; color: red; padding-left: .5em; vertical-align: top; } </style> <script> $(document).ready(function(){ $("#commentForm").validate(); }); </script> </head> <body> <form id="commentForm" method="get" action="" > <fieldset> <legend>表單驗證</legend> <p><label>Name</label><input name="name" class="required" maxlength="4" minlength="2" /></p> <p><label >E-Mail</label><input name="email" class="required email" /></p> <p><label >URL</label><input name="url" class="url"/></p> <p><label>text</label><textarea name="text" cols="22" class="required"></textarea></p> <p><input class="submit" type="submit" value="提交"/></p> </fieldset> </form> </body> </html>
效果如下:
以上的校驗的解釋:
1)、首先需要引入jquery-1.11.1.js,因為這個插件實在JQuery的基礎(chǔ)上進行的。
2)、引入校驗插件 jquery.validate.js 。
3)、引入提示本地化腳本。驗證信息的國際化,默認驗證提示是英文的,導入validation已寫好的國際化文件就可實現(xiàn)國際化。改變 錯誤/正確 消息顯示樣式。
4)、在input框的class屬性中添加要校驗的類型。針對不同的字段,進行驗證規(guī)則編碼,設(shè)置字段相應的屬性
其中的一些可驗證的規(guī)則類型:
(1)required:true 必輸字段 (2)remote:"check.shtml" 使用ajax方法調(diào)用check.shtml驗證輸入值 (3)email:true 必須輸入正確格式的電子郵件(只能驗證格式,不保證有效性) (4)url:true 必須輸入正確格式的網(wǎng)址 (5)date:true 必須輸入正確格式的日期 (6)dateISO:true 必須輸入正確格式的日期(ISO),例如:2009-06-23,1998/01/22 只驗證格式,不驗證有效性 (7)number:true 必須輸入合法的數(shù)字(負數(shù),小數(shù)) (8)digits:true 必須輸入整數(shù) (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表單驗證大全》 ,歡迎大家學習閱讀。
以上就是針對jquery validate表單驗證的入門學習,希望對大家的學習有所幫助。
相關(guān)文章
idTabs基于JQuery的根據(jù)URL參數(shù)選擇Tab插件
我們的項目用了SunSean的idTabs,但每個tab里的控件會觸發(fā)postback,或者轉(zhuǎn)到其他頁面再轉(zhuǎn)回來,這樣當前選中的tab必丟。印度同事不肯用AJAX,無奈今天加班給印度人寫個demo,通過回傳URL參數(shù)來選擇tab2012-04-04清空元素html("") innerHTML="" 與 empty()的區(qū)別和應用(推薦)
這篇文章主要介紹了清空元素html("")、innerHTML="" 與 empty()的區(qū)別和應用,詳細介紹了三者之間的原理及應用,需要的朋友可以參考下2017-08-08jquery validate 實現(xiàn)動態(tài)增加/刪除驗證規(guī)則操作示例
這篇文章主要介紹了jquery validate 實現(xiàn)動態(tài)增加/刪除驗證規(guī)則操作,結(jié)合實例形式分析了jQuery validate表單驗證相關(guān)操作技巧,需要的朋友可以參考下2019-10-10