在上篇中我已經提到過，驗證提示打算用文本和樣式兩種方式來顯示提示消息，這兩種提示都只能單獨使用，於是新的跟新內容做了一些擴展，使得兩者可以共用。前一篇寫的是否必填項這個驗證只是正對 Text， TextArea 這兩個表單元素，在新的擴展中同時也支持了radio，checkbox 兩個元素。
二. 驗證參數的設計
基於多重選擇的考慮，擴展了一些有必要的參數，參數列表如下：
required: 是否為必填項，true 和 false ，true 表示為必填項 (*)
onFocusText: 獲得焦點的文字提示
onFocusClass: 獲得焦點之後的樣式
onErrorText: 驗證錯誤的文本提示
onErrorClass: 驗證錯誤的樣式提示
onSuccessText: 驗證成功文本提示
onSuccessClass: 驗證成功的樣式提示
targetId: 提示信息元素的id號
相比之前的做了一些修改，看過之前的文章會知道，我將樣式和文本單獨分離了，之前是混合在一起的。這也是作為擴展需要的一步考慮。然後變更了錯誤消息提示參數的名稱。
三. 源碼解析
jQuery 表單驗證擴展之驗證是否為必填項源碼
代碼如下:
$.fn.extend({
checkRequired:function(inputArg){
//只有必填項才去驗證，非必填項無意義
if(inputArg.required){
//驗證是否是輸入框表單
if($(this).is("input") || $(this).is("textarea")){
//獲得焦點提示
$(this).bind("focus",function(){
//如果文本存在則不替換提示樣式
if ($(this).val() != undefined && $(this).val() != "") {
//顯示正確信息文本
addText(inputArg.targetId,inputArg.onSuccessText);
//切換樣式
addClass(inputArg.targetId,inputArg.onSuccessClass);
}else{
//顯示獲得焦點文本
addText(inputArg.targetId,inputArg.onFocusText);
//切換樣式
addClass(inputArg.targetId,inputArg.onFocusClass);
}
});
//失去焦點提示
$(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);
}
}
});
}
}
}
});
/**
* 根據輸入框的不同類型來判斷
* @param {Object} flag
* @param {Object} inputArg
*/
function addMessage(flag,inputArg){
if(flag){
//顯示正確信息文本
addText(inputArg.targetId,inputArg.onSuccessText);
//切換樣式
addClass(inputArg.targetId,inputArg.onSuccessClass);
}else{
//顯示錯誤信息文本
addText(inputArg.targetId,inputArg.onErrorText);
//切換樣式
addClass(inputArg.targetId,inputArg.onErrorClass);
}
}
/**
* 給目標控件添加顯示的文本信息
* @param {Object} targetId 目標控件id
* @param {Object} text 需要顯示的文本信息
*/
function addText(targetId,text){
if(text==undefined){
text="";
}
$("#"+targetId).html(" "+text);
}
/**
* 切換樣式
* @param {Object} targetId 目標控件id
* @param {Object} className 顯示的樣式名稱
*/
function addClass(targetId,className){
if(className!=undefined && className!=""){
$("#"+targetId).removeClass();
$("#"+targetId).addClass(className);
}
}
用過jQuery 的都知道，jQuery是一個非常易於擴展的框架，它裡面提供了擴展核心庫的函數。本表單驗證都是基於這個擴展函數來延伸的。
這裡還考慮到了一些代碼復用性的問題，將共同代碼分離，這使得最終的代碼大大減少了。
jQuery 表單驗證擴展 必填項共同方法提取
代碼如下:
/**
* 根據輸入框的不同類型來判斷
* @param {Object} flag
* @param {Object} inputArg
*/
function addMessage(flag,inputArg){
if(flag){
//顯示正確信息文本
addText(inputArg.targetId,inputArg.onSuccessText);
//切換樣式
addClass(inputArg.targetId,inputArg.onSuccessClass);
}else{
//顯示錯誤信息文本
addText(inputArg.targetId,inputArg.onErrorText);
//切換樣式
addClass(inputArg.targetId,inputArg.onErrorClass);
}
}
/**
* 給目標控件添加顯示的文本信息
* @param {Object} targetId 目標控件id
* @param {Object} text 需要顯示的文本信息
*/
function addText(targetId,text){
if(text==undefined){
text="";
}
$("#"+targetId).html(" "+text);
}
/**
* 切換樣式
* @param {Object} targetId 目標控件id
* @param {Object} className 顯示的樣式名稱
*/
function addClass(targetId,className){
if(className!=undefined && className!=""){
$("#"+targetId).removeClass();
$("#"+targetId).addClass(className);
}
}
/code]
每次不同的驗證都會涉及到 添加文本消息，表單元素的不同添加文本消息，和樣式的替換，於是分離出來上面三個公用方法。
在源碼中 if($(this).attr("type")=="radio" || $(this).attr("type")=="checkbox") 這句是比較重要的一句，因為它涉及到了驗證元素的擴展。
四. 使用例子
文本框測試樣圖
輸入文本框獲得焦點提示
輸入文本框失去焦點錯誤提示
輸入文本驗證正確提示
radio 測試樣圖
checkbox 測試樣圖
checkbox 驗證失敗提示
checkbox 驗證成功提示
測試代碼
[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:"必填項",
onFocusClass:"notice",
onErrorText:"錯誤提示",
onErrorClass:"error",
onSuccessClass:"correct",
targetId:"txtNameTip"
});
$("#rdbMan").checkRequired({
required:true,
onFocusText:"必填項",
onFocusClass:"notice",
onErrorText:"錯誤提示",
onErrorClass:"error",
onSuccessClass:"correct",
targetId:"txtSexTip"
});
$("#rdbWoman").checkRequired({
required:true,
onFocusText:"必填項",
onFocusClass:"notice",
onErrorText:"錯誤提示",
onErrorClass:"error",
onSuccessClass:"correct",
targetId:"txtSexTip"
});
$("#rdbMan1,#rdbWoman2,#rdbMan3,#rdbWoman4").checkRequired({
required:true,
onFocusText:"必填項",
onFocusClass:"notice",
onErrorText:"錯誤提示",
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>
這裡不多說了，文章持續更新中！有問題進一步做修改中.......