jQuery 表單驗(yàn)證擴(kuò)展(四)
更新時(shí)間：2010年10月20日 21:13:38 作者：
周末寫的 jQuery 表單驗(yàn)證擴(kuò)展(三) 這篇文章點(diǎn)擊率過低，不知道是文章太失水準(zhǔn)還是什么其他原因，這里寫文章只是為了分享一下自己寫代碼的心得，
周末寫的 jQuery 表單驗(yàn)證擴(kuò)展(三) 這篇文章點(diǎn)擊率過低，不知道是文章太失水準(zhǔn)還是什么其他原因，這里寫文章只是為了分享一下自己寫代碼的心得，同時(shí)也是鞏固自己所學(xué)的東西!如果文章中存在問題，請(qǐng)大家多多斧正！本篇文章介紹jQuery 表單驗(yàn)證擴(kuò)展中的控件值的比較
(一). 存在的問題
這篇文章和第一篇中提到的控件值之間的比較沒有多大的區(qū)別，唯一更近的就是在樣式的處理。同時(shí)就是對(duì)代碼進(jìn)行了簡(jiǎn)化。但是這里還是單獨(dú)拿出來(lái)講解一下，此文非常簡(jiǎn)單，所以不會(huì)有大篇幅的講解。
(二). 參數(shù)介紹
onFocusText:獲得焦點(diǎn)提示文字
onFocusClass:獲得焦點(diǎn)樣式
onEmptyText:當(dāng)輸入項(xiàng)為空顯示文字
onEmptyClass:當(dāng)輸入項(xiàng)為空顯示樣式
onErrorText:驗(yàn)證錯(cuò)誤顯示文字
onErrorClass:輸入驗(yàn)證錯(cuò)誤顯示樣式
onSuccessText:輸入成功顯示文本
onSuccessClass:輸入成功顯示樣式
comType:比較類型
dataType:輸入比較內(nèi)容的數(shù)據(jù)類型
dataType:輸入比較內(nèi)容的數(shù)據(jù)類型
comId:相比較的目標(biāo)控件ID
targetId:用于顯示提示信息的控件id
這里的比較類型分為如下幾種: “==” “！=” “>” “>=” “<” <=“”
比較的數(shù)據(jù)類型分為如下幾種: "text" "number" "date"
這里對(duì)date 數(shù)據(jù)類型還沒有做任何處理，在后期過程中更新
(三). 控件值之間的比較源碼解析
jQuery控件值之間的比較 源碼解析
復(fù)制代碼 代碼如下:
/**
* onFocusText:獲得焦點(diǎn)提示文字
* onFocusClass:獲得焦點(diǎn)樣式
* onEmptyText:當(dāng)輸入項(xiàng)為空顯示文字
* onEmptyClass:當(dāng)輸入項(xiàng)為空顯示樣式
* onErrorText:驗(yàn)證錯(cuò)誤顯示文字
* onErrorClass:輸入驗(yàn)證錯(cuò)誤顯示樣式
* onSuccessText:輸入成功顯示文本
* onSuccessClass:輸入成功顯示樣式
* comType:比較類型
* dataType:輸入比較內(nèi)容的數(shù)據(jù)類型
* comId:相比較的目標(biāo)控件ID
* targetId:用于顯示提示信息的控件id
* @param {Object} inputArg
*/
$.fn.extend({
checkCompare:function(inputArg){
//只驗(yàn)證輸入框信息
if($(this).is("input") || $(this).is("textarea")){
if($(this).attr("type")!="radio" && $(this).attr("type")!="checkbox"){
//綁定獲得焦點(diǎn)事件
$(this).bind("focus",function(){
var value=$(this).val();
if(value!=undefined && value!=""){
}else{
//顯示獲得焦點(diǎn)文本
addText(inputArg.targetId,inputArg.onEmptyText);
//切換樣式
addClass(inputArg.targetId,inputArg.onEmptyClass);
}
});
//綁定失去焦點(diǎn)事件
$(this).bind("blur",function(){
var value=$(this).val();
if(value==undefined || value==""){
//顯示獲得焦點(diǎn)文本
addText(inputArg.targetId,inputArg.onEmptyText);
//切換樣式
addClass(inputArg.targetId,inputArg.onEmptyClass);
}else{
var targetValue=$("#"+inputArg.comId).val();
var flag=false;
switch(inputArg.dataType){
case "text":
if(inputArg.comType == "=="){
flag=value==targetValue?true:false;
}else if(inputArg.comType=="!="){
flag=value!=targetValue?true:false;
}
break;
case "number":
if(inputArg.comType=="=="){
flag=value==targetValue?true:false;
}else if(inputArg.comType=="!="){
flag=value!=targetValue?true:false;
}else if(inputArg.comType==">"){
flag=value>targetValue?true:false;
}else if(inputArg.comType==">="){
flag=value>=targetValue?true:false;
}else if(inputArg.comType=="<"){
flag=value<targetValue?true:false;
}else if(inputArg.comType=="<="){
flag=value<=targetValue?true:false;
}
break;
case "date":
break;
}
if(flag){
//顯示獲得焦點(diǎn)文本
addText(inputArg.targetId, inputArg.onSuccessText);
//切換樣式
addClass(inputArg.targetId, inputArg.onSuccessClass);
}else{
//顯示獲得焦點(diǎn)文本
addText(inputArg.targetId, inputArg.onErrorText);
//切換樣式
addClass(inputArg.targetId, inputArg.onErrorClass);
}
}
});
}
}
}
});
這段代碼其實(shí)非常簡(jiǎn)單了，因?yàn)闆]有涉及到復(fù)雜的判斷，只是在不同類型值之間的比較關(guān)系，同時(shí)也限定了比較的控件類型text 和 textarea 兩種元素。這個(gè)大大簡(jiǎn)化了驗(yàn)證的復(fù)雜度。這段代碼相對(duì)之間也有所精簡(jiǎn)，這里的精簡(jiǎn)不是對(duì)功能的減少，而是對(duì)代碼的重構(gòu)，方法的提取。這里面用到了上幾篇文章的功用方法，用于添加文本和修改樣式信息。
添加文本和樣式信息 功用代碼解析
復(fù)制代碼 代碼如下:
/**
* 根據(jù)輸入框的不同類型來(lái)判斷
* @param {Object} flag
* @param {Object} inputArg
*/
function addMessage(flag,inputArg){
if(flag){
//顯示正確信息文本
addText(inputArg.targetId,inputArg.onSuccessText);
//切換樣式
addClass(inputArg.targetId,inputArg.onSuccessClass);
}else{
//顯示錯(cuò)誤信息文本
addText(inputArg.targetId,inputArg.onErrorText);
//切換樣式
addClass(inputArg.targetId,inputArg.onErrorClass);
}
}
/**
* 給目標(biāo)控件添加顯示的文本信息
* @param {Object} targetId 目標(biāo)控件id
* @param {Object} text 需要顯示的文本信息
*/
function addText(targetId,text){
if(text==undefined){
text="";
}
$("#"+targetId).html(" "+text);
}
/**
* 切換樣式
* @param {Object} targetId 目標(biāo)控件id
* @param {Object} className 顯示的樣式名稱
*/
function addClass(targetId,className){
if(className!=undefined && className!=""){
$("#"+targetId).removeClass();
$("#"+targetId).addClass(className);
}
}
內(nèi)容還是一樣，沒有做任何更改，這里再次貼出這段代碼，是為了方便查看方法體，沒有其他的作用！
(四). 使用例子
字符串之間的比較效果圖
獲得焦點(diǎn)時(shí)候提示
失去焦點(diǎn)驗(yàn)證錯(cuò)誤提示
失去焦點(diǎn)驗(yàn)證成功
以上是對(duì)字符的比較驗(yàn)證，其驗(yàn)證測(cè)試代碼如下
復(fù)制代碼 代碼如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="new_file.css"/>
<script language="JavaScript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script language="JavaScript" type="text/javascript" src="jquery-extend-1.0.0.js"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$("#txtPass2").checkCompare({
onFocusText:"要和上面的填寫一樣哦",
onFocusClass:"notice",
onEmptyText:"不允許為空，你要聽話點(diǎn)",
onEmptyClass:"error",
onErrorText:"驗(yàn)證錯(cuò)誤了，請(qǐng)你認(rèn)真填寫",
onErrorClass:"error",
onSuccessText:"恭喜啊 成功了",
onSuccessClass:"correct",
comType:"==",
dataType:"text",
comId:"txtPass1",
targetId:"txtPass2Tip"
});
});
</script>
</head>
<body>
<p>
<label>密碼1:</label><input type="text" id="txtPass1" value=""/><span id="txtPass1Tip"></span>
</p>
<p>
<label>密碼2:</label><input type="text" id="txtPass2" value=""/><span id="txtPass2Tip"></span>
</p>
</body>
</html>
數(shù)字之間的驗(yàn)證
數(shù)字驗(yàn)證獲得焦點(diǎn)提示作用
數(shù)字驗(yàn)證失去焦點(diǎn)驗(yàn)證失敗
數(shù)字驗(yàn)證失去焦點(diǎn)驗(yàn)證成功
復(fù)制代碼 代碼如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="new_file.css"/>
<script language="JavaScript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script language="JavaScript" type="text/javascript" src="jquery-extend-1.0.0.js"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$("#txtPass2").checkCompare({
onFocusText:"結(jié)果要比前面的大",
onFocusClass:"notice",
onEmptyText:"不允許為空，你要聽話點(diǎn)",
onEmptyClass:"error",
onErrorText:"驗(yàn)證錯(cuò)誤了，請(qǐng)你認(rèn)真填寫",
onErrorClass:"error",
onSuccessText:"恭喜啊 成功了",
onSuccessClass:"correct",
comType:">",
dataType:"number",
comId:"txtPass1",
targetId:"txtPass2Tip"
});
});
</script>
</head>
<body>
<p>
<label>密碼1:</label><input type="text" id="txtPass1" value=""/><span id="txtPass1Tip"></span>
</p>
<p>
<label>密碼2:</label><input type="text" id="txtPass2" value=""/><span id="txtPass2Tip"></span>
</p>
</body>
</html>
文章內(nèi)容不想做過多的解釋了，此文非常簡(jiǎn)單，相對(duì)于前面幾篇文章來(lái)說(shuō)。表單驗(yàn)證擴(kuò)展不斷更新中，后續(xù)期待............
您可能感興趣的文章:
- jQuery 表單驗(yàn)證擴(kuò)展(三)
- jQuery 表單驗(yàn)證擴(kuò)展代碼(二)
- jQuery 表單驗(yàn)證擴(kuò)展代碼(一)
- jquery validate.js表單驗(yàn)證的基本用法入門
- jquery表單驗(yàn)證使用插件formValidator
- 基于Bootstrap+jQuery.validate實(shí)現(xiàn)Form表單驗(yàn)證
- jQuery 表單驗(yàn)證插件formValidation實(shí)現(xiàn)個(gè)性化錯(cuò)誤提示
- jquery表單驗(yàn)證插件（jquery.validate.js）的3種使用方式
- jQuery基于xml格式數(shù)據(jù)實(shí)現(xiàn)模糊查詢及分頁(yè)功能的方法
- jQuery解析XML 詳解及方法總結(jié)
- jQuery+ajax讀取并解析XML文件的方法
- jQuery擴(kuò)展+xml實(shí)現(xiàn)表單驗(yàn)證功能的方法
相關(guān)文章
以前針對(duì)DOM元素的插件(即$.fn.)存臨時(shí)數(shù)據(jù)都加在當(dāng)前元素上建個(gè)特殊的屬性來(lái)存,(JQ內(nèi)部直接也搞這樣的)2010-08-08
jquery插件ContextMenu設(shè)置右鍵菜單
這篇文章主要介紹了jquery插件ContextMenu設(shè)置右鍵菜單的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
專門針對(duì)input[text password hidden]以及textarea的用戶輸入進(jìn)行檢查2009-07-07
這篇文章主要為大家詳細(xì)介紹了完善的jquery處理機(jī)制的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-02-02
tuzhu_req.js 實(shí)現(xiàn)仿百度圖片首頁(yè)效果
這篇文章主要介紹了tuzhu_req.js 實(shí)現(xiàn)仿百度圖片首頁(yè)效果的相關(guān)資料,需要的朋友可以參考下2015-08-08
基于jquery固定于頂部的導(dǎo)航響應(yīng)瀏覽器滾動(dòng)條事件
這款導(dǎo)航當(dāng)瀏覽器滾動(dòng)條位于頂部時(shí)，導(dǎo)航高度較高，當(dāng)瀏覽器滾動(dòng)向下滾動(dòng)時(shí)，導(dǎo)航高度自動(dòng)減低，并位于頂部2014-11-11
一個(gè)基于jQuery的樹型插件(OrangeTree)使用介紹
這個(gè)樣式大家就將就一下吧！我將這個(gè)無(wú)限級(jí)樹型插件命名為桔子樹，需要的朋友可以參考下2012-05-05
實(shí)例詳解jQuery的鏈?zhǔn)骄幊田L(fēng)格
jQuery中的鏈?zhǔn)讲僮鳎尨a變得更有層次更簡(jiǎn)潔，所以這篇文章主要給大家介紹了關(guān)于jQuery鏈?zhǔn)骄幊田L(fēng)格的相關(guān)資料,需要的朋友可以參考下2021-06-06
jQuery使用ajax方法解析返回的json數(shù)據(jù)功能示例
這篇文章主要介紹了jQuery使用ajax方法解析返回的json數(shù)據(jù)功能,結(jié)合實(shí)例形式分析了jQuery ajax操作流程及json數(shù)據(jù)處理技巧,需要的朋友可以參考下2017-01-01
jquery實(shí)現(xiàn)一個(gè)簡(jiǎn)單好用的彈出框
這篇文章主要介紹了jquery如何實(shí)現(xiàn)的一個(gè)簡(jiǎn)單的彈出框，經(jīng)測(cè)試非常好用，代碼簡(jiǎn)潔，留著以后工作時(shí)候再用2014-09-09