一款比較實用齊全的jQuery 表單驗證插件
一款比較實用,并且驗證類型齊全的jQuery表單驗證插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻譯的有問題的,請大家指出,在此感謝~
可以驗證哪些? 文字,日期,郵箱,網址,數字,AJAX用戶名驗證以及自定義的正則等等幾乎所有我們要用到的驗證.
不多說,看DEMO吧: 點此查看DEMO點此下載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',//驗證失敗時文字信息的樣式
invalid_class: 'failformcss',//驗證失敗時該表單樣式
message_value_class: 'msgvaluecss',//這個樣式是彈出信息中調用值的樣式
advice_class: 'failmsg',//驗證失敗時文字信息的樣式
哦?就這么簡單,沒其他好說的了,使用時請看我寫的注釋。
全站熱搜
留言列表
