m@rcus 學習筆記

魔鬼都藏在細節裡

2012-03-10

[jQuery] jQuery.Vaildation 驗證元件

[jQuery] jQuery.Vaildation 驗證元件
開發專案中，常常會需要驗證表單中使用者端輸入的資料，例如必填欄位、只限制輸入數字、email檢查…等欄位檢查。jQuery 有很多資料驗證方法，如謙卑式jQuery檢核-動態訊息，在此推薦的是 jQuery.validate 表單驗證 外掛，原因如下

內建簡單格式驗證：提供必填欄位、網址、email、字數過長…等17種基本驗證方式
錯誤訊息提供多國語言：可自訂錯誤訊息（這不是廢話嗎）；錯預設為誤訊息英文，另外提供36個國家錯誤訊息語言顯示
可自訂驗證格式檢查：如果需要的格式項目不支援時，可自行撰寫驗證檢查項目(連我這肉腳都看的懂，好開心)

前言

開發專案中，常常會需要驗證表單中使用者端輸入的資料，例如必填欄位、只限制輸入數字、email檢查…等欄位檢查。jQuery 有很多資料驗證方法，如謙卑式jQuery檢核-動態訊息，在此推薦的是 jQuery.validate 表單驗證 外掛，原因如下

  1. 內建簡單格式驗證：提供必填欄位、網址、email、字數過長…等17種基本驗證方式
  2. 錯誤訊息提供多國語言：可自訂錯誤訊息（這不是廢話嗎）；錯預設為誤訊息英文，另外提供36個國家錯誤訊息語言顯示
  3. 可自訂驗證格式檢查：如果需要的格式項目不支援時，可自行撰寫驗證檢查項目(連我這肉腳都看的懂，好開心)
     

 

使用方式

jQuery Plugin jQuery.Vailate
DL Site bassistance.de
Demo http://jquery.bassistance.de/validate/demo/
License MIT/GPL

下面為透過官網下載的文件來做解說，如何透過幾個簡單步驟可達到下圖的驗證效果


image

使用步驟如下

  • 下載 Vaildate.js ＆加入 validate()
    step1 到官網下載 jQuery.valiate js ，將zip解壓縮
    step2 在<Head>與</Head>中加入js
    step3 <javascript>中加入 驗證Form名稱.vaildate()

          image

  • 驗證控件指定class
    step1 在要驗證的textbox中加入驗證項目的class，以下面表單來說，Name、email、Comment為必填欄位，class name設定為 required，即可透過 jQuery.vailate 做使用者端做檢查。

    image 

    這裡列出內建的驗證規則（來源參考梅問題）
    required 必填欄位
    email 電子信箱
    url 是否為合法的網址
    date 日期格式
    dateISO 日期格式，格式必需為YYYY/MM/DD、YYYY-MM-DD、YYYYMMDD
    number 數字檢查，包含小數點
    digits 整數
    equalTo 與特定欄位是否相同
    creditcard 信用卡號
    minValue 最小字元長度
    maxValue 最大字元長度
    rangeValue 字元長度區間長度
    minLength 最小字元長度(漢字算一個字符)
    maxLength 最大字元長度(漢字算一個字符)
    rangeLength 字元長度區間長度(漢字算一個字符)

    PS：假設遇到同一欄位要進行多個檢查，只要在指定class時用””即可使用，ex：電子信箱為必填欄位，class=”required email”。

 

其他議題

透過以上兩個簡單的步驟，就可以使用jQuery.validate 進行表單的前端驗證，另外在列出其他的議題

  • 自訂錯誤訊息內容(message)：可修改發驗證規則發生錯誤時，所顯示的錯誤訊息文字（打開jquery.validate.js檔案找到定義錯誤訊息文字所在地方），找到驗證項目，修改錯誤訊息文字
    image


  • 錯誤訊息多語系：預設錯誤訊息為英文，官方有提供多語系，在下載的localization資料夾底下，有其他36個國家錯誤訊息語系文字，實做可以參考《Validation表单验证》中的二、验证信息的国际化，來實現錯誤訊息多國語系。


  • 自訂驗證格式(methods)：可自訂驗證項目與項目的檢查內容（打開jquery.validate.js檔案，透過關鍵字methods），會發現設定的class驗證項目，都會對應到相關驗證的檢查邏輯，以下圖為例，今天設定必填欄位（class＝required）時，表單按下送出按鈕，就會對應到required的methods進行相關的檢查，假設今天內建的驗證的邏輯不符合需求時，就可透過新增驗證項目，並在methods加入驗證項目的檢查內容，加入自訂客製化的檢查。
    image

 

廢話

瞭解jQuery.validate 之後，發現在使用上也相當的簡單，功能非常強大的plugin，還可以少寫很多javascript code，在進行使用者端的驗證十分好用，但也不能完全依賴前端的驗證檢查，後端也必須進行資料的驗證，避免有心人利用其他方式進行資料竄改（如Chrome可修改表單的html元素內容），這都是在使用上必須特別注意的。另外bassistance.de還有很多的plugin，如Autocomplete、Tooltip其他plugin，也可多多參考。
 

參考

此篇文章是上網查詢自己整理的結果，如果內容有錯誤的地方，麻煩各位高手給予小弟指導  
bassistance.de
jQuery教學－jQuery.validate萬用表單驗證元件直接套用
Validation表单验证
jquery.validate全攻略
[jQuery]使用jQuery.Validate进行客户端验证（初级篇）