jQuery 表單驗(yàn)證插件formValidation實(shí)現(xiàn)個性化錯誤提示
更新時間:2009年06月23日 12:57:23 作者:
這里介紹另外一個表單驗(yàn)證插件formValidation,這個插件與前面兩個插件的最大區(qū)別在于它實(shí)現(xiàn)了個性化的錯誤提示信息,顯示在表單元素右上角類似于提示條
其效果圖如下:

使用說明
需要使用jQuery庫文件和formValidation庫文件[下載實(shí)例代碼]
http://jquery.com/
同時需要自定義顯示提示錯誤信息的CSS樣式
使用實(shí)例
一,包含文件部分
<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插件的表單驗(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)證單選框
<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ù)選框
<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)證下拉框
<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)證電話號碼
<input class="validate[required,custom[telephone]] text-input" type="text" name="telephone"/>
五,驗(yàn)證郵箱
<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)個性化錯誤提示,值得推薦。
文件打包下載

使用說明
需要使用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)個性化錯誤提示,值得推薦。
文件打包下載
您可能感興趣的文章:
- jquery validate.js表單驗(yàn)證的基本用法入門
- 基于Bootstrap+jQuery.validate實(shí)現(xiàn)Form表單驗(yàn)證
- jquery表單驗(yàn)證使用插件formValidator
- Jquery練習(xí)之表單驗(yàn)證實(shí)現(xiàn)代碼
- 使用 jQuery 實(shí)現(xiàn)表單驗(yàn)證功能
- 基于Jquery實(shí)現(xiàn)表單驗(yàn)證
- jquery實(shí)現(xiàn)表單驗(yàn)證并阻止非法提交
- jQuery實(shí)現(xiàn)用戶注冊的表單驗(yàn)證示例
- Jquery插件easyUi表單驗(yàn)證提交(示例代碼)
- jQuery實(shí)現(xiàn)表單驗(yàn)證功能
相關(guān)文章
利用javascript實(shí)現(xiàn)全部刪或清空所選的操作
這篇文章主要介紹了利用javascript實(shí)現(xiàn)全部刪或清空所選的操作,需要的朋友可以參考下2014-05-05Bootstrap學(xué)習(xí)筆記之css樣式設(shè)計(jì)(2)
這篇文章主要為大家詳細(xì)介紹了Bootstrap學(xué)習(xí)筆記之css樣式設(shè)計(jì),感興趣的小伙伴們可以參考一下2016-06-06基于JS實(shí)現(xiàn)一個隨機(jī)生成驗(yàn)證碼功能
這篇文章主要介紹了基于JS實(shí)現(xiàn)一個隨機(jī)生成驗(yàn)證碼功能,隨機(jī)生成一個四位數(shù)的驗(yàn)證碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05JS實(shí)現(xiàn)線性表的鏈?zhǔn)奖硎痉椒ㄊ纠窘?jīng)典數(shù)據(jù)結(jié)構(gòu)】
這篇文章主要介紹了JS實(shí)現(xiàn)線性表的鏈?zhǔn)奖硎痉椒?簡單講解了線性表鏈?zhǔn)奖硎镜脑聿⒔Y(jié)合實(shí)例形式分析了js針對線性表鏈?zhǔn)奖硎镜膭?chuàng)建、插入、刪除等節(jié)點(diǎn)操作技巧,需要的朋友可以參考下2017-04-04全面了解構(gòu)造函數(shù)繼承關(guān)鍵apply call
下面小編就為大家?guī)硪黄媪私鈽?gòu)造函數(shù)繼承關(guān)鍵apply call。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07淺談js-FCC算法Friendly Date Ranges(詳解)
下面小編就為大家?guī)硪黄獪\談js-FCC算法Friendly Date Ranges(詳解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04javascript檢測對象中是否存在某個屬性判斷方法小結(jié)
檢測對象中屬性的存在與否可以通過以下幾種方法來判斷:使用in關(guān)鍵字、使用對象的hasOwnProperty()方法、用undefined判斷、在條件語句中直接判斷,感興趣的朋友可以了解下哈2013-05-05談?wù)凧avaScript類型系統(tǒng)之Math
Math 對象并不像 Date 和 String 那樣是對象的類,因此沒有構(gòu)造函數(shù) Math(),像 Math.sin() 這樣的函數(shù)只是函數(shù),不是某個對象的方法。您無需創(chuàng)建它,通過把 Math 作為對象使用就可以調(diào)用其所有屬性和方法2016-01-01