jquery表单验证扩展二

一. 存在的问题

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

二. 验证参数的设计

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

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

onFocusText: 获得焦点的文字提示

onFocusClass: 获得焦点之后的样式

onErrorText: 验证错误的文本提示

onErrorClass: 验证错误的样式提示

onSuccessText: 验证成功文本提示

onSuccessClass: 验证成功的样式提示

targetId: 提示信息元素的id号

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

三.源码

jQuery 表单验证扩展之验证是否为必填项源码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->$.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);    }}

用过jQuery 的都知道，jQuery是一个非常易于扩展的框架，它里面提供了扩展核心库的函数。本表单验证都是基于这个扩展函数来延伸的。

这里还考虑到了一些代码复用性的问题，将共同代码分离，这使得最终的代码大大减少了。

jQuery 表单验证扩展 必填项共同方法提取Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->/** * 根据输入框的不同类型来判断 * @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);    }}

每次不同的验证都会涉及到 添加文本消息，表单元素的不同添加文本消息，和样式的替换，于是分离出来上面三个公用方法。

在源码中 if($(this).attr("type")=="radio" || $(this).attr("type")=="checkbox") 这句是比较重要的一句，因为它涉及到了验证元素的扩展。

 

四. 使用例子 

文本框测试样图

 输入文本框获得焦点提示

 输入文本框失去焦点错误提示

 输入文本验证正确提示

 

radio 测试样图

  

checkbox 测试样图

  checkbox 验证失败提示

 checkbox 验证成功提示

  测试代码

验证必填项测试代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> 1 <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,                     onFocusText:"必填项",                     onFocusClass:"notice",                     onErrorText:"错误提示",                     onErrorClass:"error",                     onSuccessClass:"correct",                     targetId:"txtNameTip"                 });                                  $("#rdbMan").checkRequired({                     required:true,                     onFocusText:"必填项",                     onFocusClass:"notice",                     onErrorText:"错误提示",                     onErrorClass:"error",                     onSuccessClass:"correct",                     targetId:"txtSexTip"                 });                 $("#rdbWoman").checkRequired({                     required:true,                     onFocusText:"必填项",                     onFocusClass:"notice",                     onErrorText:"错误提示",                     onErrorClass:"error",                     onSuccessClass:"correct",                     targetId:"txtSexTip"                 });                                                                    $("#rdbMan1,#rdbWoman2,#rdbMan3,#rdbWoman4").checkRequired({                     required:true,                     onFocusText:"必填项",                     onFocusClass:"notice",                     onErrorText:"错误提示",                     onErrorClass:"error",                     onSuccessClass:"correct",                     targetId:"txthobbyTip"                 });             });         </script>   <p>             <label>姓名:</label><input type="text" id="txtName" value=""/><span id="txtNameTip"></span>         </p>  <p>             <label>性别:</label>             <span>                 <input id="rdbMan" type="radio" name="sex" value="男" />男                     <input id="rdbWoman" type="radio" name="sex" value="女" />女             </span>             <span id="txtSexTip"></span>         </p>         <p>             <label>爱好:</label>             <span>                 <input id="rdbMan1" type="checkbox" name="hobby" value="hobby1" />aa                     <input id="rdbWoman2" type="checkbox" name="hobby" value="hobby2" />bb                    <input id="rdbMan3" type="checkbox" name="hobby" value="hobby3" />aa                     <input id="rdbWoman4" type="checkbox" name="hobby" value="hobby4" />bb                </span>             <span id="txthobbyTip"></span>         </p>