快捷導(dǎo)航

jQuery 表單驗(yàn)證插件formValidation實(shí)現(xiàn)個(gè)性化錯(cuò)誤提示

更新時(shí)間：2009年06月23日 12:57:23 作者：

這里介紹另外一個(gè)表單驗(yàn)證插件formValidation，這個(gè)插件與前面兩個(gè)插件的最大區(qū)別在于它實(shí)現(xiàn)了個(gè)性化的錯(cuò)誤提示信息，顯示在表單元素右上角類似于提示條

其效果圖如下：

jQuery表單驗(yàn)證插件formValidation實(shí)現(xiàn)個(gè)性化錯(cuò)誤提示

使用說(shuō)明
需要使用jQuery庫(kù)文件和formValidation庫(kù)文件[下載實(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ù)說(shuō)明：required表示表單必填，custom[]表示驗(yàn)證的條件，length表示長(zhǎng)度

formValidation插件其它說(shuō)明：
optional: Special: 表單值不為空的情況
required: 必埴
length[0,100] : 長(zhǎng)度范圍
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)證方法比較簡(jiǎ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ò)誤提示，值得推薦。
文件打包下載

您可能感興趣的文章: