快捷導(dǎo)航

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é)的東西!如果文章中存在問題，請大家多多斧正！本篇文章介紹jQuery 表單驗(yàn)證擴(kuò)展中的控件值的比較

(一). 存在的問題
這篇文章和第一篇中提到的控件值之間的比較沒有多大的區(qū)別，唯一更近的就是在樣式的處理。同時(shí)就是對代碼進(jìn)行了簡化。但是這里還是單獨(dú)拿出來講解一下，此文非常簡單，所以不會有大篇幅的講解。

(二). 參數(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"
這里對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í)非常簡單了，因?yàn)闆]有涉及到復(fù)雜的判斷，只是在不同類型值之間的比較關(guān)系，同時(shí)也限定了比較的控件類型text 和 textarea 兩種元素。這個(gè)大大簡化了驗(yàn)證的復(fù)雜度。這段代碼相對之間也有所精簡，這里的精簡不是對功能的減少，而是對代碼的重構(gòu)，方法的提取。這里面用到了上幾篇文章的功用方法，用于添加文本和修改樣式信息。
添加文本和樣式信息功用代碼解析

復(fù)制代碼代碼如下:

 
/** 
* 根據(jù)輸入框的不同類型來判斷 
* @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("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+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)證成功

以上是對字符的比較驗(yà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:"要和上面的填寫一樣哦", 
onFocusClass:"notice", 
onEmptyText:"不允許為空，你要聽話點(diǎn)", 
onEmptyClass:"error", 
onErrorText:"驗(yàn)證錯(cuò)誤了，請你認(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ò)誤了，請你認(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> 