DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> JQuery表單驗證插件EasyValidator用法分析
JQuery表單驗證插件EasyValidator用法分析
編輯:JQuery特效代碼     

本文實例講述了JQuery表單驗證插件EasyValidator用法。分享給大家供大家參考。具體如下:

本插件的宗旨是:用戶無需寫一行JS驗證代碼,只需在要驗證的表單中加入相應的驗證屬性即可,讓驗證功能易維護,可擴展,更容易上手。

DEMO中已經包含了常用的正則表達式,可以直接復用,為了考慮擴展性,所以針對不同用戶特殊需求,自行寫正則吧。

EasyValidator實現的功能:

1.提示功能(在表單或者其他標簽中加入tip="想提示的文字")

如:
代碼如下:<input name="name" tip="請輸入你的名字喲~">

或者
代碼如下:<a href="http://wangking717.iteye.com/blog/769021" tip="到EasyValidator官方主頁來" target="_blank">有疑惑可以到這裡提問</a>

2. 普通表單驗證(在表單中加入reg="正則表達式")
如: 代碼如下:<input name="username" reg="正則" />
普通表單驗證DEMO:http://easyvalidator.googlecode.com/svn/trunk/index.html

3. AJAX表單驗證(在表單中加入url="驗證系統地址")
如: 代碼如下:<input name="username" url="地址" />
AJAX驗證DEMO:沒有在線演示,請在本地運行ajax_demo.html,請求遠程的PHP文件,當然可以為JSP或者ASP,我這裡在程序裡預設了一些已存在的數據,用戶可以自行參考。

4. 普通表單驗證 +  AJAX表單驗證 (普通驗證通過以後,再進行AJAX驗證)
如: 代碼如下:<input name="username" reg="正則" url="地址" />

5. 擴展函數表單驗證(某些業務特殊需求):

這些特殊需求都是根據業務來的,這裡列舉一下這樣的情況:

1.checkbox選擇框數量驗證,如限制別人至少選擇1個,最多選擇5個checkbox。
2.多個表單之間進行比較,如【開始時間表單】一定小於等於【結束時間表單】或者兩個密碼表單要相等,用於注冊的時候,等等。

由於這種情況的特殊性,所以用戶得自己寫業務邏輯代碼,官方已經提供了extendsValidate擴展函數,在裡面寫自己的邏輯代碼即可。

擴展函數表單驗證DEMO:http://easyvalidator.googlecode.com/svn/trunk/extends_demo.html

BUG修復日志:
2010-9-24 : 修復同一頁多個FORM提交BUG ,TIP錯位BUG
2010-9-26 : 新增bgiframe插件, 修復IE6下TIP 遮罩不了 SELECT表單
2010-9-27 : 增加擴展API,並重構核心庫

2011-1-1   : 將表單驗證的TIP獨立出來,讓TIP,URL,REG成為單獨的組建而存在,更加靈活!

2011-1-28 : 修改了AJAX的TIP糾錯BUG,邏輯修改,並且將AJAX的請求的遠程程序validate_user.php的編碼設置GB2312。

官方下載地址:http://code.google.com/p/easyvalidator/downloads/list

或者點擊此處本站下載。http://www.cnblogs.com/jiaoben/32303.html

在線正則驗證器:http://regexpal.com/

希望本文所述對大家的web程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved