|
|
使用說明
需要使用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實現個性化錯誤提示，值得推薦。
文件打包下載
JavaScript技術：jQuery 表單驗證插件formValidation實現個性化錯誤提示，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
