欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2009年06月23日 12:57:23   作者:  
這里介紹另外一個表單驗(yàn)證插件formValidation,這個插件與前面兩個插件的最大區(qū)別在于它實(shí)現(xiàn)了個性化的錯誤提示信息,顯示在表單元素右上角類似于提示條
其效果圖如下:
jQuery表單驗(yàn)證插件formValidation實(shí)現(xiàn)個性化錯誤提示
使用說明
需要使用jQuery庫文件和formValidation庫文件[下載實(shí)例代碼]
http://jquery.com/
同時需要自定義顯示提示錯誤信息的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 : 匹配電話號碼規(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)證電話號碼 
復(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)的個性化錯誤提示,同時,可自定義匹配規(guī)則,如下:

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

這樣使用alertText就可以實(shí)現(xiàn)自定義的表單錯誤提示文本,這與Validation插件的使用方法相同,使用jQuery表單驗(yàn)證插件formValidation實(shí)現(xiàn)個性化錯誤提示,值得推薦。
文件打包下載

相關(guān)文章

最新評論