一款比較實用齊全的jQuery 表單驗證外掛程式

來源:互聯網
上載者:User

一款比較實用,並且驗證類型齊全的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',//驗證失敗時文字資訊的樣式

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

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.