jQuery 表单验证扩展(四)

周末写的 jQuery 表单验证扩展(三)  这篇文章点击率过低，不知道是文章太失水准还是什么其他原因，这里写文章只是为了分享一下自己写代码的心得，同时也是巩固自己所学的东西!如果文章中存在问题，请大家多多斧正！本篇文章介绍jQuery 表单验证扩展中的控件值的比较

文章回顾:

jQuery 表单验证扩展(三)

jQuery 表单验证扩展(二)

jQuery 表单验证扩展(一)  

 

(一). 存在的问题

这篇文章和第一篇中提到的控件值之间的比较没有多大的区别，唯一更近的就是在样式的处理。同时就是对代码进行了简化。但是这里还是单独拿出来讲解一下，此文非常简单，所以不会有大篇幅的讲解。 

 

(二). 参数介绍

onFocusText:获得焦点提示文字

onFocusClass:获得焦点样式

onEmptyText:当输入项为空显示文字

onEmptyClass:当输入项为空显示样式

onErrorText:验证错误显示文字

onErrorClass:输入验证错误显示样式

onSuccessText:输入成功显示文本

onSuccessClass:输入成功显示样式

comType:比较类型

dataType:输入比较内容的数据类型

dataType:输入比较内容的数据类型

comId:相比较的目标控件ID

targetId:用于显示提示信息的控件id

 

这里的比较类型分为如下几种: “==”   “！=”   “>”   “>=”   “<”   <=“” 

比较的数据类型分为如下几种: "text"  "number"  "date" 

这里对date 数据类型还没有做任何处理，在后期过程中更新

 

(三). 控件值之间的比较源码解析

/**
 * 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<targetValue?true:false;
                                }else if(inputArg.comType=="<="){
                                    flag=value<=targetValue?true:false;
                                }
                            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);
                        }
                    }
                });
            }
        }
    }
});