萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 一款比較實用齊全的jQuery表單驗證插件

一款比較實用齊全的jQuery表單驗證插件

一款比較實用,並且驗證類型齊全的jQuery表單驗證插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻譯的有問題的,請大家指出,在此感謝~
可以驗證哪些? 文字,日期,郵箱,網址,數字,AJAX用戶名驗證以及自定義的正則等等幾乎所有我們要用到的驗證.
不多說,看DEMO吧:點些下載

如何使用?
第一步
,當然是和使用其他jQuery插件一樣,引入插件文件vanadium.js;
第二步,根據你表單要使用的驗證方法,在你的表單中加入對應的驗證掛鉤.比如你想使下面的表單為必填項:

<input id="checkempty" />

那麼,就給它添加class=”:required”> :

<input id="checkempty" class=":required" />

其他的也依次類推,類似:required的驗證鉤子,可以在靜態頁中找到,比如數字是:number,最大值是:max_length;4,當然,你還可以自定義或者修改成你懂的名稱.
如果你同一個表單要滿足多個條件,比如必填項,且輸入字符數在4-8之間,你可以這樣寫:

<label for="checkmaxmin">輸入4到8個字符:</label></td><td><input id="checkmaxmin"  class=":required :min_length;4 :max_length;8" />

明白了嗎?用空格隔開條件即可;
第三步,修改彈出信息,比如此項不可為空,你覺得不個性,你可以在判斷語句中找到這個字段修改成你覺得個性的.
第四步,刪除你用不到的條件判斷.保持代碼的干淨精練,是一種美德.DEMO頁面中列出了所有的判斷方法,這些判斷在現實應用中幾乎不可能在同一個表單中用完.所以,刪除那些你用不著的判斷語句.不刪?好吧,那只能證明你很懶,別的沒什麼影響.
第五步,幾個參數說明:

valid_class: 'rightformcss',//驗證正確時表單樣式
invalid_class: 'failformcss',//驗證失敗時該表單樣式
message_value_class: 'msgvaluecss',//這個樣式是彈出信息中調用值的樣式
advice_class: 'failmsg',//驗證失敗時文字信息的樣式

哦?就這麼簡單,沒其他好說的了,使用時請看我寫的注釋.

copyright © 萬盛學電腦網 all rights reserved