jQuery常见验证类型总结

一下文章处在某一文档，对于新手还是蛮实用的，整理出来，希望能对大家有所帮助。

一. 分析表单验证的基本情况 

在我们做web开发的过程中，会遇到各种各样的验证。归纳一下基本可以分为一下几类: 

(1). 是否必填项 [这个是非常基本的] 

(2). 输入参数中的范围校验 

(3). 输入参数与另外一个控件值的比较 

(4). 输入的参数正则表达式验证 

二. 是否必填项验证 

有如下几种情况: 

（1） 输入框获得焦点提示 

（2）输入框失去焦点验证错误提示 

（3）输入框失去焦点验证正确提示 

首先确定输入框是否是必填项，然后就是提示消息的现实位置。 

根据以上几种情况确定如下几个参数： 

required : 是否为必填项，true 和 false ，true 表示为必填项 (*) 

onFocus : 获得焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 

onBlur : 失去焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)(验证失败提示) 

onSucces : 验证成功的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 

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

组合例子 : {required:true,onFocus:"Required",onBlur:"@error",onSucces:"Success",tipId:"tipid"} 

注意: 上面定义的一些规则，有些可能没有实现，在后期过程中逐渐完善。 

/** 

* 检查输入框是否为必填项 

* 输入参数： 

* required : 是否为必填项，true 和 false ，true 表示为必填项 (*) 

* onFocus : 获得焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 

* onBlur : 失去焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)(验证失败提示) 

* 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")){ 

//绑定获得焦点事件 

$(this).bind("focus",function(){ 

if(inputArg.onFocus!=undefined){ 

$("#" + inputArg.tipId).html(inputArg.onFocus); 

} 

}); 

//绑定失去焦点事件 

$(this).bind("blur",function(){ 

if($(this).val()!=undefined && $(this).val()!=""){ 

$("#" + inputArg.tipId).html(inputArg.onSucces); 

}else{ 

$("#" + inputArg.tipId).html(inputArg.onBlur); 

} 

}); 

} 

} 

} 

});

当获得焦点时候后页面提示效果

失去焦点没有输入的提示效果

当输入文本信息成功后提示效果

<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> 

三. 输入参数中的范围校验 

相比上面的验证来说，这个稍微复杂了一些，因为有输入值的范围。校验做了如下区分：输入的数据类型为 字符串， 数字 ，时间 

如果是字符串则比较字符串的长短，数字和时间比较大小。（时间目前没有完善） 

因为比较范围所以定义一个区间范围，所以这里再添加两个属性，下限值和上限值。 

输入参数列表: 

onFocus : 获得焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 

onEmpty : 输入项为空文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 

onSucces : 验证成功的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 

onBlur : 失去焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)(验证失败提示) 

dataType : 数据类型参数(text,number,date) 

min : 输入的最小值 

max : 输入的最大值 

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

/** 

* 检查输入项的范围 

* 输入参数： 

* onFocus : 获得焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 

* onEmpty : 输入项为空文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 

* onSucces : 验证成功的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 

* onBlur : 失去焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)(验证失败提示) 

* dataType : 数据类型参数(text,number,date) 

* min : 输入的最小值 

* max : 输入的最大值 

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

*/ 

$.fn.extend({ 

checkRange:function(inputArg){ 

if ($(this).is("input") || $(this).is("textarea")) { 

//获得焦点绑定 

$(this).bind("focus",function(){ 

if(inputArg.onFocus!=undefined){ 

$("#" + inputArg.tipId).html(inputArg.onFocus); 

} 

}); 

//失去焦点绑定 

$(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; 

} 

} 

}); 

} 

} 

}); 

输入项范围效果和测试代码

$("#txtAge").checkRange({ 

onFocus:"年龄为数字", 

onEmpty:"不能为空啊", 

onSucces:"验证成功", 

onBlur:"验证失败，请认真输入", 

dataType:"number", 

min:"10", 

max:"100", 

tipId:"txtAgeTip" 

}); 

<p> 

<label>年龄:</label><input type="text" id="txtAge" value=""/><span id="txtAgeTip"></span> 

</p> 

四. 输入参数与另外一个控件值的比较 

和上面的验证比较，不同的地方在于要指定比较控件的id 

下面是输入参数: 

onFocus : 获得焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 

onEmpty : 输入项为空文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 

onSucces : 验证成功的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 

onBlur : 失去焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)(验证失败提示) 

dataType : 数据类型参数(text,number,date) 

comType : 比较的类型(=,>,>=,<,<=,!=) 

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

targetId : 比较的目标控件Id 

/** 

* 控件值之间的比较 

* 输入参数: 

* onFocus : 获得焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 

* onEmpty : 输入项为空文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 

* onSucces : 验证成功的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 

* onBlur : 失去焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)(验证失败提示) 

* dataType : 数据类型参数(text,number,date) 

* comType : 比较的类型(=,>,>=,<,<=,!=) 

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

* targetId : 比较的目标控件Id 

*/ 

$.fn.extend({ 

checkCompare:function(inputArg){ 

if($(this).is("input") || $(this).is("textarea")){ 

//获得焦点绑定 

$(this).bind("focus",function(){ 

if(inputArg.onFocus!=undefined){ 

$("#" + inputArg.tipId).html(inputArg.onFocus); 

} 

}); 

//失去焦点绑定 

$(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

$("#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> 

五. 输入的参数正则表达式验证 

这个验证相对比较简单，因为使用正则表达式，无需自己去思考输入的情况。只需要引入一个正则表达式就可以了 

下面是输入参数: 

onFocus : 获得焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 

onEmpty : 输入项为空文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 

onSucces : 验证成功的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 

onBlur : 失去焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)(验证失败提示) 

regExp : 正则表达式 

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

JQuery正则表达式验证

/** 

* 正则表达式的验证 

* 输入参数: 

* onFocus : 获得焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 

* onEmpty : 输入项为空文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 

* onSucces : 验证成功的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 

* onBlur : 失去焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)(验证失败提示) 

* regExp : 正则表达式 

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

*/ 

$.fn.extend({ 

checkRegExp:function(inputArg){ 

if ($(this).is("input") || $(this).is("textarea")) { 

//获得焦点绑定 

$(this).bind("focus", function(){ 

if (inputArg.onFocus != undefined) { 

$("#" + inputArg.tipId).html(inputArg.onFocus); 

} 

}); 

//获得失去焦点事件 

$(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); 

} 

}); 

} 

}