(一). 存在的问题
这篇文章和第一篇中提到的控件值之间的比较没有多大的区别，唯一更近的就是在样式的处理。同时就是对代码进行了简化。但是这里还是单独拿出来讲解一下，此文非常简单，所以不会有大篇幅的讲解。
(二). 参数介绍
onfocustext:获得焦点提示文字
onfocusclass:获得焦点样式
onemptytext:当输入项为空显示文字
onemptyclass:当输入项为空显示样式
onerrortext:验证错误显示文字
onerrorclass:输入验证错误显示样式
onsuccesstext:输入成功显示文本
onsuccessclass:输入成功显示样式
comtype:比较类型
datatype:输入比较内容的数据类型
datatype:输入比较内容的数据类型
comid:相比较的目标控件id
targetid:用于显示提示信息的控件id
这里的比较类型分为如下几种: “==” “！=” “>” “>=” “比较的数据类型分为如下几种: text number date
这里对date 数据类型还没有做任何处理，在后期过程中更新
(三). 控件值之间的比较源码解析
jquery控件值之间的比较 源码解析
复制代码 代码如下:
/**
* onfocustext:获得焦点提示文字
* onfocusclass:获得焦点样式
* onemptytext:当输入项为空显示文字
* onemptyclass:当输入项为空显示样式
* onerrortext:验证错误显示文字
* onerrorclass:输入验证错误显示样式
* onsuccesstext:输入成功显示文本
* onsuccessclass:输入成功显示样式
* comtype:比较类型
* datatype:输入比较内容的数据类型
* comid:相比较的目标控件id
* targetid:用于显示提示信息的控件id
* @param {object} inputarg
*/
$.fn.extend({
checkcompare:function(inputarg){
//只验证输入框信息
if($(this).is(input) || $(this).is(textarea)){
if($(this).attr(type)!=radio && $(this).attr(type)!=checkbox){
//绑定获得焦点事件
$(this).bind(focus,function(){
var value=$(this).val();
if(value!=undefined && value!=){
}else{
//显示获得焦点文本
addtext(inputarg.targetid,inputarg.onemptytext);
//切换样式
addclass(inputarg.targetid,inputarg.onemptyclass);
}
});
//绑定失去焦点事件
$(this).bind(blur,function(){
var value=$(this).val();
if(value==undefined || value==){
//显示获得焦点文本
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}else if(inputarg.comtype==flag=value}
break;
case date:
break;
}
if(flag){
//显示获得焦点文本
addtext(inputarg.targetid, inputarg.onsuccesstext);
//切换样式
addclass(inputarg.targetid, inputarg.onsuccessclass);
}else{
//显示获得焦点文本
addtext(inputarg.targetid, inputarg.onerrortext);
//切换样式
addclass(inputarg.targetid, inputarg.onerrorclass);
}
}
});
}
}
}
});
这段代码其实非常简单了，因为没有涉及到复杂的判断，只是在不同类型值之间的比较关系，同时也限定了比较的控件类型text 和 textarea 两种元素。这个大大简化了验证的复杂度。这段代码相对之间也有所精简，这里的精简不是对功能的减少，而是对代码的重构，方法的提取。这里面用到了上几篇文章的功用方法，用于添加文本和修改样式信息。
添加文本和样式信息 功用代码解析
复制代码 代码如下:
/**
* 根据输入框的不同类型来判断
* @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);
}
}
内容还是一样，没有做任何更改，这里再次贴出这段代码，是为了方便查看方法体，没有其他的作用！
(四). 使用例子
字符串之间的比较效果图
获得焦点时候提示
失去焦点验证错误提示
失去焦点验证成功
以上是对字符的比较验证，其验证测试代码如下
复制代码 代码如下:
untitled document
密码1:
密码2:
数字之间的验证 数字验证获得焦点提示作用
数字验证失去焦点验证失败
数字验证失去焦点验证成功
复制代码 代码如下:
untitled document
密码1:
密码2:
文章内容不想做过多的解释了，此文非常简单，相对于前面几篇文章来说。表单验证扩展不断更新中，后续期待............