|
|
使用說明
需要使用jQuery庫文件和formValidation庫文件[下載實(shí)例代碼]
http://jquery.com/
同時(shí)需要自定義顯示提示錯(cuò)誤信息的CSS樣式
使用實(shí)例
一，包含文件部分
復(fù)制代碼 代碼如下:
<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部分
復(fù)制代碼 代碼如下:
<input class="validate[required,custom[onlyLetter],length[0,100]]" name="firstname" type="text" />
formValidation插件的表單驗(yàn)證方法如下：
validate[required,custom[onlyLetter],length[0,100]] 參數(shù)說明：required表示表單必填，custom[]表示驗(yàn)證的條件，length表示長度
formValidation插件其它說明：
optional: Special: 表單值不為空的情況
required: 必埴
length[0,100] : 長度范圍
minCheckbox[7] : 最小復(fù)選框數(shù)
confirm[fieldID] : 匹配其它字段 (如:confirm password)
telephone : 匹配電話號(hào)碼規(guī)則
email : 匹配電子郵箱規(guī)則
onlyNumber : 匹配數(shù)字規(guī)則
noSpecialCaracters : 匹配字符規(guī)則
onlyLetter : 匹配字母規(guī)則
date : 匹配 YYYY-MM-DD 格式
formValidation插件應(yīng)用實(shí)例
一，驗(yàn)證單選框
復(fù)制代碼 代碼如下:
<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"/>
二，驗(yàn)證復(fù)選框
復(fù)制代碼 代碼如下:
<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"/>
三，驗(yàn)證下拉框
復(fù)制代碼 代碼如下:
<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>
四，驗(yàn)證電話號(hào)碼
復(fù)制代碼 代碼如下:
<input class="validate[required,custom[telephone]] text-input" type="text" name="telephone"/>
五，驗(yàn)證郵箱
復(fù)制代碼 代碼如下:
<input class="validate[required,custom[email]] text-input" type="text" name="email" id="email" />
如上實(shí)例，使用formValidation插件實(shí)現(xiàn)表單驗(yàn)證方法比較簡單，主要在于其實(shí)現(xiàn)的個(gè)性化錯(cuò)誤提示，同時(shí)，可自定義匹配規(guī)則，如下：
"telephone":{ "regex":"/^[0-9-()]+$/", "alertText":"* Invalid phone number"}, 其中regex表示匹配規(guī)則
這樣使用alertText就可以實(shí)現(xiàn)自定義的表單錯(cuò)誤提示文本，這與Validation插件的使用方法相同，使用jQuery表單驗(yàn)證插件formValidation實(shí)現(xiàn)個(gè)性化錯(cuò)誤提示，值得推薦。
文件打包下載
JavaScript技術(shù)：jQuery 表單驗(yàn)證插件formValidation實(shí)現(xiàn)個(gè)性化錯(cuò)誤提示，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。
