jQuery 表单验证扩展(二)

前些天写了一篇文章 jQuery 表单验证扩展(一) ，这是jQuery表单验证扩展的一个雏形，里面有了一些基本的功能！昨晚再次努力了一下，对表单中是否必填项验证这个部分做了一些修改的扩充！

 

一. 存在的问题

在上篇中我已经提到过，验证提示打算用文本和样式两种方式来显示提示消息，这两种提示都只能单独使用，于是新的跟新内容做了一些扩展，使得两者可以共用。前一篇写的是否必填项这个验证只是正对 Text， TextArea 这两个表单元素，在新的扩展中同时也支持了radio，checkbox 两个元素。

 

二. 验证参数的设计

基于多重选择的考虑，扩展了一些有必要的参数，参数列表如下：

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

onFocusText: 获得焦点的文字提示

onFocusClass: 获得焦点之后的样式

onErrorText: 验证错误的文本提示

onErrorClass: 验证错误的样式提示

onSuccessText: 验证成功文本提示

onSuccessClass: 验证成功的样式提示

targetId: 提示信息元素的id号

相比之前的做了一些修改，看过之前的文章会知道，我将样式和文本单独分离了，之前是混合在一起的。这也是作为扩展需要的一步考虑。然后变更了错误消息提示参数的名称。 

 

三.  源码解析

$.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);
    }
}