jQuery 表單驗證擴(kuò)展代碼(一)

更新時間：2010年10月11日 18:28:20 作者：

好長一段時間沒有寫js代碼了，也好長時間沒有寫文章了,下午閑來無事寫了一個基于jQuery的表單驗證插件。首先申明這個插件問題比較多，不過覺得這個東西很有必要。后期持續(xù)跟新中，先把自己寫的插件原型拿出來曬曬！

再次申明，插件問題比較多，后期一個個來解決，請不要惡言相向。希望各位多多提好的建議善言。
一. 分析表單驗證的基本情況
在我們做web開發(fā)的過程中，會遇到各種各樣的驗證。歸納一下基本可以分為一下幾類:
(1). 是否必填項 [這個是非?；镜腯
(2). 輸入?yún)?shù)中的范圍校驗
(3). 輸入?yún)?shù)與另外一個控件值的比較
(4). 輸入的參數(shù)正則表達(dá)式驗證
二. 是否必填項驗證
有如下幾種情況:
（1）輸入框獲得焦點(diǎn)提示
（2）輸入框失去焦點(diǎn)驗證錯誤提示
（3）輸入框失去焦點(diǎn)驗證正確提示
首先確定輸入框是否是必填項，然后就是提示消息的現(xiàn)實位置。
根據(jù)以上幾種情況確定如下幾個參數(shù)：
required : 是否為必填項，true 和 false ，true 表示為必填項 (*)
onFocus : 獲得焦點(diǎn)的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)
onBlur : 失去焦點(diǎn)的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)(驗證失敗提示)
onSucces : 驗證成功的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)
tipId : 用于顯示提示信息的控件id (*)
組合例子 : {required:true,onFocus:"Required",onBlur:"@error",onSucces:"Success",tipId:"tipid"}
注意: 上面定義的一些規(guī)則，有些可能沒有實現(xiàn)，在后期過程中逐漸完善。

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

 
/** 
* 檢查輸入框是否為必填項 
* 輸入?yún)?shù)： 
* required : 是否為必填項，true 和 false ，true 表示為必填項 (*) 
* onFocus : 獲得焦點(diǎn)的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@) 
* onBlur : 失去焦點(diǎn)的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)(驗證失敗提示) 
* onSucces : 驗證成功的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@) 
* tipId : 用于顯示提示信息的控件id (*) 
* 組合例子 : {required:true,onFocus:"Required",onBlur:"@error",onSucces:"Success",tipId:"tipid"} 
*/ 
$.fn.extend({ 
checkRequired:function(inputArg){ 
if(inputArg.required){ 
if($(this).is("input") || $(this).is("textarea")){ 
//綁定獲得焦點(diǎn)事件 
$(this).bind("focus",function(){ 
if(inputArg.onFocus!=undefined){ 
$("#" + inputArg.tipId).html(inputArg.onFocus); 
} 
}); 
//綁定失去焦點(diǎn)事件 
$(this).bind("blur",function(){ 
if($(this).val()!=undefined && $(this).val()!=""){ 
$("#" + inputArg.tipId).html(inputArg.onSucces); 
}else{ 
$("#" + inputArg.tipId).html(inputArg.onBlur); 
} 
}); 
} 
} 
} 
}); 

使用效果和測試代碼：

當(dāng)獲得焦點(diǎn)時候后面提示效果

當(dāng)失去焦點(diǎn)沒有輸入提示效果

當(dāng)輸入文本信息之后提示成功效果

測試代碼如下：

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

 
<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, 
onFocus:"這個為必填項", 
onBlur:"必須填寫啊", 
onSucces:"恭喜，你輸入了", 
tipId:"txtNameTip" 
}); 
}); 
</script> 

三. 輸入?yún)?shù)中的范圍校驗

相比上面的驗證來說，這個稍微復(fù)雜了一些，因為有輸入值的范圍。校驗做了如下區(qū)分：輸入的數(shù)據(jù)類型為字符串，數(shù)字，時間

如果是字符串則比較字符串的長短，數(shù)字和時間比較大小。（時間目前沒有完善）

因為比較范圍所以定義一個區(qū)間范圍，所以這里再添加兩個屬性，下限值和上限值。

輸入?yún)?shù)列表:

onFocus : 獲得焦點(diǎn)的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)

onEmpty : 輸入項為空文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)

onSucces : 驗證成功的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)

onBlur : 失去焦點(diǎn)的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)(驗證失敗提示)

dataType : 數(shù)據(jù)類型參數(shù)(text,number,date)

min : 輸入的最小值

max : 輸入的最大值

tipId : 用于顯示提示信息的控件id (*)

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

 
/** 
* 檢查輸入項的范圍 
* 輸入?yún)?shù)： 
* onFocus : 獲得焦點(diǎn)的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@) 
* onEmpty : 輸入項為空文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@) 
* onSucces : 驗證成功的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@) 
* onBlur : 失去焦點(diǎn)的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)(驗證失敗提示) 
* dataType : 數(shù)據(jù)類型參數(shù)(text,number,date) 
* min : 輸入的最小值 
* max : 輸入的最大值 
* tipId : 用于顯示提示信息的控件id (*) 
* 
*/ 
$.fn.extend({ 
checkRange:function(inputArg){ 
if ($(this).is("input") || $(this).is("textarea")) { 
//獲得焦點(diǎn)綁定 
$(this).bind("focus",function(){ 
if(inputArg.onFocus!=undefined){ 
$("#" + inputArg.tipId).html(inputArg.onFocus); 
} 
}); 
//失去焦點(diǎn)綁定 
$(this).bind("blur",function(){ 
if($(this).val()==undefined || $(this).val()==""){ 
$("#" + inputArg.tipId).html(inputArg.onEmpty); 
}else{ 
switch(inputArg.dataType){ 
case "text": 
if($(this).val().length>= parseInt(inputArg.min) && $(this).val().length< parseInt(inputArg.max)){ 
$("#" + inputArg.tipId).html(inputArg.onSucces); 
}else{ 
$("#" + inputArg.tipId).html(inputArg.onBlur); 
} 
break; 
case "number": 
if(!isNaN($(this).val())){ 
if(parseInt($(this).val())>parseInt(inputArg.min) && parseInt($(this).val())<parseInt(inputArg.max)){ 
$("#" + inputArg.tipId).html(inputArg.onSucces); 
}else{ 
$("#" + inputArg.tipId).html(inputArg.onBlur); 
} 
} 
break; 
case "date": 
break; 
} 
} 
}); 
} 
} 
}); 

輸入項范圍效果和測試代碼

如果年齡約定為數(shù)字

輸入不在約定范圍之內(nèi)

驗證成功

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

 
$("#txtAge").checkRange({ 
onFocus:"年齡為數(shù)字", 
onEmpty:"不能為空啊", 
onSucces:"驗證成功", 
onBlur:"驗證失敗，請認(rèn)真輸入", 
dataType:"number", 
min:"10", 
max:"100", 
tipId:"txtAgeTip" 
}); 
<p> 
<label>年齡:</label><input type="text" id="txtAge" value=""/><span id="txtAgeTip"></span> 
</p> 

四. 輸入?yún)?shù)與另外一個控件值的比較

和上面的驗證比較，不同的地方在于要指定比較控件的id

下面是輸入?yún)?shù):

onFocus : 獲得焦點(diǎn)的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)

onEmpty : 輸入項為空文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)

onSucces : 驗證成功的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)

onBlur : 失去焦點(diǎn)的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)(驗證失敗提示)

dataType : 數(shù)據(jù)類型參數(shù)(text,number,date)

comType : 比較的類型(=,>,>=,<,<=,!=)

tipId : 用于顯示提示信息的控件id (*)

targetId : 比較的目標(biāo)控件Id

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

 
/** 
* 控件值之間的比較 
* 輸入?yún)?shù): 
* onFocus : 獲得焦點(diǎn)的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@) 
* onEmpty : 輸入項為空文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@) 
* onSucces : 驗證成功的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@) 
* onBlur : 失去焦點(diǎn)的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)(驗證失敗提示) 
* dataType : 數(shù)據(jù)類型參數(shù)(text,number,date) 
* comType : 比較的類型(=,>,>=,<,<=,!=) 
* tipId : 用于顯示提示信息的控件id (*) 
* targetId : 比較的目標(biāo)控件Id 
*/ 
$.fn.extend({ 
checkCompare:function(inputArg){ 
if($(this).is("input") || $(this).is("textarea")){ 
//獲得焦點(diǎn)綁定 
$(this).bind("focus",function(){ 
if(inputArg.onFocus!=undefined){ 
$("#" + inputArg.tipId).html(inputArg.onFocus); 
} 
}); 
//失去焦點(diǎn)綁定 
$(this).bind("blur",function(){ 
var targetValue=$("#"+inputArg.targetId).val(); 
if(targetValue!=undefined && targetValue!=null){ 
if($(this).val()!=undefined && $(this).val()!=""){ 
if(inputArg.dataType=="text"){ 
switch(inputArg.comType){ 
case "=": 
if(targetValue==$(this).val()){ 
$("#" + inputArg.tipId).html(inputArg.onSucces); 
}else{ 
$("#" + inputArg.tipId).html(inputArg.onBlur); 
} 
break; 
case "!=": 
if(targetValue!=$(this).val()){ 
$("#" + inputArg.tipId).html(inputArg.onSucces); 
}else{ 
$("#" + inputArg.tipId).html(inputArg.onBlur); 
} 
break; 
} 
}else if(inputArg.dataType=="number"){ 
if (isNaN(targetValue) == false && isNaN($(this).val()) == false) { 
switch (inputArg.comType) { 
case "=": 
if (targetValue == $(this).val()) { 
$("#" + inputArg.tipId).html(inputArg.onSucces); 
} 
else { 
$("#" + inputArg.tipId).html(inputArg.onBlur); 
} 
break; 
case "!=": 
if (targetValue != $(this).val()) { 
$("#" + inputArg.tipId).html(inputArg.onSucces); 
} 
else { 
$("#" + inputArg.tipId).html(inputArg.onBlur); 
} 
break; 
case ">": 
if ($(this).val() > targetValue) { 
$("#" + inputArg.tipId).html(inputArg.onSucces); 
} 
else { 
$("#" + inputArg.tipId).html(inputArg.onBlur); 
} 
break; 
case ">=": 
if ($(this).val() >= targetValue) { 
$("#" + inputArg.tipId).html(inputArg.onSucces); 
} 
else { 
$("#" + inputArg.tipId).html(inputArg.onBlur); 
} 
break; 
case "<": 
if ($(this).val() < targetValue) { 
$("#" + inputArg.tipId).html(inputArg.onSucces); 
} 
else { 
$("#" + inputArg.tipId).html(inputArg.onBlur); 
} 
break; 
case "<=": 
if ($(this).val() <= targetValue) { 
$("#" + inputArg.tipId).html(inputArg.onSucces); 
} 
else { 
$("#" + inputArg.tipId).html(inputArg.onBlur); 
} 
break; 
} 
}else{ 
$("#" + inputArg.tipId).html(inputArg.onBlur); 
} 
}else if(inputArg.dataType=="date"){ 
} 
}else{ 
$("#" + inputArg.tipId).html(inputArg.onEmpty); 
} 
} 
}); 
} 
} 
}); 

控件值之間的比較效果和測試代碼

效果圖1

效果圖2

效果圖3

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

 
$("#txtPass2").checkCompare({ 
onFocus:"和前面的比較", 
onEmpty:"輸入的不能為空", 
onSucces:"驗證成功", 
onBlur:"驗證失敗", 
dataType:"number", 
comType:">=", 
tipId:"txtPass2Tip", 
targetId:"txtPass1" 
}); 

<p> 
<label>密碼1:</label><textarea id="txtPass1"></textarea><span id="txtPass1Tip"></span> 
</p> 
<p> 
<label>密碼2:</label><textarea id="txtPass2"></textarea><span id="txtPass2Tip"></span> 
</p> 

五. 輸入的參數(shù)正則表達(dá)式驗證

這個驗證相對比較簡單，因為使用正則表達(dá)式，無需自己去思考輸入的情況。只需要引入一個正則表達(dá)式就可以了

下面是輸入?yún)?shù):

onFocus : 獲得焦點(diǎn)的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)

onEmpty : 輸入項為空文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)

onSucces : 驗證成功的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)

onBlur : 失去焦點(diǎn)的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)(驗證失敗提示)

regExp : 正則表達(dá)式

tipId : 用于顯示提示信息的控件id (*)

jQuery正則表達(dá)式的驗證

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

 
/** 
* 正則表達(dá)式的驗證 
* 輸入?yún)?shù): 
* onFocus : 獲得焦點(diǎn)的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@) 
* onEmpty : 輸入項為空文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@) 
* onSucces : 驗證成功的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@) 
* onBlur : 失去焦點(diǎn)的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)(驗證失敗提示) 
* regExp : 正則表達(dá)式 
* tipId : 用于顯示提示信息的控件id (*) 
*/ 

$.fn.extend({ 
checkRegExp:function(inputArg){ 
if ($(this).is("input") || $(this).is("textarea")) { 
//獲得焦點(diǎn)綁定 
$(this).bind("focus", function(){ 
if (inputArg.onFocus != undefined) { 
$("#" + inputArg.tipId).html(inputArg.onFocus); 
} 
}); 

//獲得失去焦點(diǎn)事件 
$(this).bind("blur",function(){ 
if($(this).val()!=undefined && $(this).val()!=""){ 
if ($(this).val().match(inputArg.regExp) == null) { 
$("#" + inputArg.tipId).html(inputArg.onSucces); 
}else{ 
$("#" + inputArg.tipId).html(inputArg.onBlur); 
} 
}else{ 
$("#" + inputArg.tipId).html(inputArg.onEmpty); 
} 
}); 
} 
} 
}); 

正則表達(dá)式效果和測試代碼

輸入非數(shù)字

輸入數(shù)字

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

 
$("#txtAge").checkRegExp({ 
onFocus:"年齡必須為數(shù)字", 
onEmpty:"輸入的不能為空", 
onSucces:"驗證成功", 
onBlur:"驗證失敗", 
regExp:/\D/, 
tipId:"txtAgeTip" 
}); 
<label>年齡:</label><input type="text" id="txtAge" value=""/><span id="txtAgeTip"></span> 

這是驗證插件的一個基本雛形，后期不斷跟新..........

您可能感興趣的文章: