快捷導(dǎo)航

jQuery 表單驗(yàn)證擴(kuò)展代碼(二)

更新時(shí)間：2010年10月20日 20:52:50 作者：

前些天寫了一篇文章 jQuery 表單驗(yàn)證擴(kuò)展(一) ，這是jQuery表單驗(yàn)證擴(kuò)展的一個(gè)雛形，里面有了一些基本的功能！昨晚再次努力了一下，對(duì)表單中是否必填項(xiàng)驗(yàn)證這個(gè)部分做了一些修改的擴(kuò)充！

一. 存在的問題
在上篇中我已經(jīng)提到過(guò)，驗(yàn)證提示打算用文本和樣式兩種方式來(lái)顯示提示消息，這兩種提示都只能單獨(dú)使用，于是新的跟新內(nèi)容做了一些擴(kuò)展，使得兩者可以共用。前一篇寫的是否必填項(xiàng)這個(gè)驗(yàn)證只是正對(duì) Text， TextArea 這兩個(gè)表單元素，在新的擴(kuò)展中同時(shí)也支持了radio，checkbox 兩個(gè)元素。

二. 驗(yàn)證參數(shù)的設(shè)計(jì)
基于多重選擇的考慮，擴(kuò)展了一些有必要的參數(shù)，參數(shù)列表如下：
required: 是否為必填項(xiàng)，true 和 false ，true 表示為必填項(xiàng) (*)
onFocusText: 獲得焦點(diǎn)的文字提示
onFocusClass: 獲得焦點(diǎn)之后的樣式
onErrorText: 驗(yàn)證錯(cuò)誤的文本提示
onErrorClass: 驗(yàn)證錯(cuò)誤的樣式提示
onSuccessText: 驗(yàn)證成功文本提示
onSuccessClass: 驗(yàn)證成功的樣式提示
targetId: 提示信息元素的id號(hào)

相比之前的做了一些修改，看過(guò)之前的文章會(huì)知道，我將樣式和文本單獨(dú)分離了，之前是混合在一起的。這也是作為擴(kuò)展需要的一步考慮。然后變更了錯(cuò)誤消息提示參數(shù)的名稱。

三. 源碼解析
jQuery 表單驗(yàn)證擴(kuò)展之驗(yàn)證是否為必填項(xiàng)源碼

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

 
$.fn.extend({ 
checkRequired:function(inputArg){ 
//只有必填項(xiàng)才去驗(yàn)證，非必填項(xiàng)無(wú)意義 
if(inputArg.required){ 
//驗(yàn)證是否是輸入框表單 
if($(this).is("input") || $(this).is("textarea")){ 
//獲得焦點(diǎn)提示 
$(this).bind("focus",function(){ 
//如果文本存在則不替換提示樣式 
if ($(this).val() != undefined && $(this).val() != "") { 
//顯示正確信息文本 
addText(inputArg.targetId,inputArg.onSuccessText); 
//切換樣式 
addClass(inputArg.targetId,inputArg.onSuccessClass); 
}else{ 
//顯示獲得焦點(diǎn)文本 
addText(inputArg.targetId,inputArg.onFocusText); 
//切換樣式 
addClass(inputArg.targetId,inputArg.onFocusClass); 
} 
}); 
//失去焦點(diǎn)提示 
$(this).bind("blur",function(){ 
if($(this).attr("type")=="radio" || $(this).attr("type")=="checkbox"){ 
var name=$(this).attr("name"); 
var items=$('input[@name=""+name+""][checked]'); 
if(items.length>0){ 
addMessage(true,inputArg); 
}else{ 
addMessage(false,inputArg); 
} 
}else{ 
if($(this).val()!=undefined && $(this).val()!=""){ 
addMessage(true,inputArg); 
}else{ 
addMessage(false,inputArg); 
} 
} 
}); 
} 
} 
} 
}); 
/** 
* 根據(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("&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); 
} 
} 

用過(guò)jQuery 的都知道，jQuery是一個(gè)非常易于擴(kuò)展的框架，它里面提供了擴(kuò)展核心庫(kù)的函數(shù)。本表單驗(yàn)證都是基于這個(gè)擴(kuò)展函數(shù)來(lái)延伸的。
這里還考慮到了一些代碼復(fù)用性的問題，將共同代碼分離，這使得最終的代碼大大減少了。
jQuery 表單驗(yàn)證擴(kuò)展必填項(xiàng)共同方法提取

復(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);
}
}
/code]
每次不同的驗(yàn)證都會(huì)涉及到添加文本消息，表單元素的不同添加文本消息，和樣式的替換，于是分離出來(lái)上面三個(gè)公用方法。
在源碼中 if($(this).attr("type")=="radio" || $(this).attr("type")=="checkbox") 這句是比較重要的一句，因?yàn)樗婕暗搅蓑?yàn)證元素的擴(kuò)展。

四. 使用例子

文本框測(cè)試樣圖

輸入文本框獲得焦點(diǎn)提示

輸入文本框失去焦點(diǎn)錯(cuò)誤提示

輸入文本驗(yàn)證正確提示

radio 測(cè)試樣圖

checkbox 測(cè)試樣圖

checkbox 驗(yàn)證失敗提示

checkbox 驗(yàn)證成功提示
測(cè)試代碼
[code]
<script language="JavaScript" src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="JavaScript" src="jquery-extend-1.0.0.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$("#txtName").checkRequired({
required:true,
onFocusText:"必填項(xiàng)",
onFocusClass:"notice",
onErrorText:"錯(cuò)誤提示",
onErrorClass:"error",
onSuccessClass:"correct",
targetId:"txtNameTip"
});

$("#rdbMan").checkRequired({
required:true,
onFocusText:"必填項(xiàng)",
onFocusClass:"notice",
onErrorText:"錯(cuò)誤提示",
onErrorClass:"error",
onSuccessClass:"correct",
targetId:"txtSexTip"
});
$("#rdbWoman").checkRequired({
required:true,
onFocusText:"必填項(xiàng)",
onFocusClass:"notice",
onErrorText:"錯(cuò)誤提示",
onErrorClass:"error",
onSuccessClass:"correct",
targetId:"txtSexTip"
});

$("#rdbMan1,#rdbWoman2,#rdbMan3,#rdbWoman4").checkRequired({
required:true,
onFocusText:"必填項(xiàng)",
onFocusClass:"notice",
onErrorText:"錯(cuò)誤提示",
onErrorClass:"error",
onSuccessClass:"correct",
targetId:"txthobbyTip"
});
});
</script>

<p>
<label>姓名:</label><input type="text" id="txtName" value=""/><span id="txtNameTip"></span>
</p>

<p>
<label>性別:</label>
<span>
<input id="rdbMan" type="radio" name="sex" value="男" />男    
<input id="rdbWoman" type="radio" name="sex" value="女" />女
</span>
<span id="txtSexTip"></span>
</p>
<p>
<label>愛好:</label>
<span>
<input id="rdbMan1" type="checkbox" name="hobby" value="hobby1" />aa    
<input id="rdbWoman2" type="checkbox" name="hobby" value="hobby2" />bb   
<input id="rdbMan3" type="checkbox" name="hobby" value="hobby3" />aa    
<input id="rdbWoman4" type="checkbox" name="hobby" value="hobby4" />bb   
</span>
<span id="txthobbyTip"></span>
</p>