jQuery 表單驗證外掛程式formValidation實現個人化錯誤提示

其如下：

使用說明
需要使用jQuery庫檔案和formValidation庫檔案[下載執行個體代碼]
http://jquery.com/
同時需要自訂顯示提示錯誤資訊的CSS樣式

使用執行個體
一，包含檔案部分 複製代碼 代碼如下:<script src="jquery.js" type="text/javascript"></script> <script src="jquery.validationEngine.js" type="text/javascript"></script> <link rel="stylesheet" href="validationEngine.jquery.css" type="text/css" media="screen" />

二，HTML部分 複製代碼 代碼如下:<input class="validate[required,custom[onlyLetter],length[0,100]]" name="firstname" type="text" />

formValidation外掛程式的表單驗證方法如下：
validate[required,custom[onlyLetter],length[0,100]] 參數說明：required表示表單必填，custom[]表示驗證的條件，length表示長度

formValidation外掛程式其它說明：
optional: Special: 表單值不為空白的情況
required: 必埴
length[0,100] : 長度範圍
minCheckbox[7] : 最小複選框數
confirm[fieldID] : 匹配其它欄位 (如:confirm password)
telephone : 匹配電話號碼規則
email : 匹配電子郵箱規則
onlyNumber : 匹配數字規則
noSpecialCaracters : 匹配字元規則
onlyLetter : 匹配字母規則
date : 匹配 YYYY-MM-DD 格式

formValidation外掛程式應用執行個體
一，驗證單選框 複製代碼 代碼如下:<input class="validate[required] radio" type="radio" name="radiogoupe" value="5"> <input class="validate[required] radio" type="radio" name="radiogoupe" value="3"/> <input class="validate[required] radio" type="radio" name="radiogoupe" value="9"/>

二，驗證複選框 複製代碼 代碼如下:<input class="validate[minCheckbox[2]] checkbox" type="checkbox" name="checkboxgroupe" value="5"> <input class="validate[minCheckbox[2]] checkbox" type="checkbox" name="checkboxgroupe" value="3"/> <input class="validate[minCheckbox[2]] checkbox" type="checkbox" name="checkboxgroupe" value="9"/>

三，驗證下拉框

複製代碼 代碼如下:<select name="sport" id="sport" class="validate[required]" > <option value="1">biuuu_1</option> <option value="2">biuuu_2</option> <option value="3">biuuu_3</option> <option value="4">biuuu_4</option> </select>

四，驗證電話號碼 複製代碼 代碼如下:<input class="validate[required,custom[telephone]] text-input" type="text" name="telephone"/>

五，驗證郵箱 複製代碼 代碼如下:<input class="validate[required,custom[email]] text-input" type="text" name="email" id="email" />

如上執行個體，使用formValidation外掛程式實現表單驗證方法比較簡單，主要在於其實現的個人化錯誤提示，同時，可自訂匹配規則，如下：

"telephone":{ "regex":"/^[0-9-()]+$/", "alertText":"* Invalid phone number"}, 其中regex表示匹配規則

這樣使用alertText就可以實現自訂的表單錯誤提示文本，這與Validation外掛程式的使用方法相同，使用jQuery表單驗證外掛程式formValidation實現個人化錯誤提示，值得推薦。
檔案打包下載