Posted in Javascript onFebruary 03, 2012
枚举对象的使用:
//各种验证方式支持的标签类型 sustainType: function (elem, setting) { var srcTag = elem.tagName; var stype = elem.type; switch (setting.validatetype) { case _validTypeEnum.InitValidator: return true; case _validTypeEnum.InputValidator: if (srcTag == _validTagEnum.INPUT || srcTag == _validTagEnum.TEXTAREA || srcTag == _validTagEnum.SELECT) { return true; } else { return false; } case _validTypeEnum.CompareValidator: if (srcTag == _validTagEnum.INPUT || srcTag == _validTagEnum.TEXTAREA) { if (stype == _validTagTypeEnum.checkbox || stype == _validTagTypeEnum.radio) { return false; } else { return true; } } return false; case _validTypeEnum.AjaxValidator: if (stype == _validTagTypeEnum.text || stype == _validTagTypeEnum.textarea || stype == _validTagTypeEnum.file || stype == _validTagTypeEnum.password || stype == _validTagTypeEnum.select_one) { return true; } else { return false; } case _validTypeEnum.RegexValidator: if (srcTag == _validTagEnum.INPUT || srcTag == _validTagEnum.TEXTAREA) { if (stype == _validTagTypeEnum.checkbox || stype == _validTagTypeEnum.radio) { return false; } else { return true; } } return false; case _validTypeEnum.FunctionValidator: return true; } }
//获取指定字符串的长度 getLength: function (jqObj) { var elem = _GetDomObj(jqObj); var sType = elem.type; var len = 0; switch (sType) { case _validTagTypeEnum.text: case _validTagTypeEnum.hidden: case _validTagTypeEnum.password: case _validTagTypeEnum.textarea: case _validTagTypeEnum.file: var val = jqObj.val(); var initConfig = $.formValidator.getInitConfig(elem.settings[0].validatorgroup); len = initConfig.wideword ? String.getCharLength(val) : val.length; break; case _validTagTypeEnum.checkbox: case _validTagTypeEnum.radio: len = $("input[type='" + sType + "'][name='" + jqObj.attr("name") + "']:checked").length; break; case _validTagTypeEnum.select_one: case _validTagTypeEnum.select_multiple: len = jqObj.children(":selected").length; break; } return len; }
2. 将原版本中各方法之间传递验证标签的Id,改为传递验证标签的对象,这样就避免了在各个方法内需要再根据id获得验证标签的对象,提高了代码执行速度和性能。
3. 原版本中对验证成功、错误等提示样式在插件中把样式名给限定死了,如错误的提示样式名为:onError,这样在使用此插件时就会让美工需要关心插件中各提示样式的名称,并且还要避免出现样式重复或冲突的情况,如此使用让人很不爽。真正好的插件,应该是让js和(需要用户自己设置的)样式完全分离——这类似于编程里的'松耦合',但这样才能让js和样式无不依赖,更好的适应用户的需求! 于是,我将插件中各提示样式(作为方法的参数对象的属性)让用户可以自己配置,主要代码如下:
//提示样式枚举 var _tipCssEnum = { //(ajax)加载处理 loadCss: "loadCss", //获得焦点时的样式 focusCss: "focusCss", //提示[用于 为空提示] ---如果此项未设置,则使用errorCss noticeCss: "noticeCss", //失败or错误[用于格式错误,正则表达式验证]---必须设置 errorCss: "errorCss", //成功---必须设置 successCss: "successCss", //默认状态 ---必须设置 defaultCss: "defaultCss" }; initConfig: function (controlOptions) { var settings = { debug: false,//是否是调试模式 validatorgroup: "1",//验证组 alertmessage: false,//是否直接弹出验证提示 validobjectids: "",//验证对象集合 focusvalid: false, onsuccess: function () { return true; }, //验证成功后的处理方法,返回true|false(可追加表单验证或阻止表单提交等) onerror: function () { }, filterInputStrFun: function (str) { return FilterInputOper.FilterInputStr(str); }, //过虑输入字符串的方法[可设置] isformpost: false, //是否是表单提交(默认:false——非表单提交,一般为ajax提交,true——表单提交) submitonce: false,//是否验证通过后,表单立刻提交 submitbutton: null,//提交按钮id或对象 getformdata: null, //function (formdata) { } (验证通过后)获得输入的表单值——只有isformpost=false时,此方法才会被调用 //验证提示显示设置(default:默认根据设置) tipshow: "default", formid: "", //验证表单的id或对象 tidymode: false, //精简模式 errorfocus: true, wideword: true, //验证提示样式设置(全局) tipcss: { //(ajax)加载处理 loadCss: "", //获得焦点时的样式 focusCss: "", //提示 noticeCss: "", //成功 successCss: "", //失败 errorCss: "", //默认状态 defaultCss: "" } }; controlOptions = controlOptions || {}; controlOptions.tipcss = controlOptions.tipcss || {}; //合并整个配置(深度拷贝) $.extend(true, settings, controlOptions); if (!settings.isformpost) { if (!settings.submitbutton) { alert("submitbutton不能为空!"); return; } _GetJqObj(settings.submitbutton).click(function () { var pageIsValid = $.formValidator.pageIsValid(settings.validatorgroup); if (pageIsValid && _IsFunction(settings.getformdata)) { var formData = _GetFormData(settings.filterInputStrFun); settings.getformdata(formData); } }); } settings.tipshow = settings.tipshow || "default"; //如果是精简模式,发生错误的时候,第一个错误的控件就不获得焦点 if (settings.tidymode) { settings.errorfocus = false; } if (settings.formid) { _GetNodeById(settings.formid).submit(function () { //如果不是表单提交,则阻止表单提交 return settings.isformpost ? $.formValidator.pageIsValid(settings.validatorgroup) : false; }); } if (_jQuery_formValidator_initConfig_Array == null) { _jQuery_formValidator_initConfig_Array = new Array(); } _jQuery_formValidator_initConfig_Array.push(settings); } //设置提示信息 setTipState: function (elem, showCssEnum, showmsg) { var setting0 = elem.settings[0]; var initConfig = $.formValidator.getInitConfig(setting0.validatorgroup); if (initConfig.alertmessage && showmsg) { alert(showmsg); return } var jq_tipObj = setting0.tipJqObj; var tip_IsNull = Object.isNull(jq_tipObj); if (!tip_IsNull) { showmsg = showmsg || ""; if (initConfig.tidymode) { //保存提示信息 elem.Tooltip = showmsg; if (showCssEnum != _tipCssEnum.errorCss && showCssEnum != _tipCssEnum.noticeCss) jq_tipObj.hide(); } jq_tipObj.removeClass(); //设置提示样式 var showClass = setting0.tipcss[showCssEnum]; //如果 noticeCss未设置,则使用 errorCss if (String.isNullOrEmpty(showClass) && showCssEnum == _tipCssEnum.noticeCss) { showCssEnum = _tipCssEnum.errorCss; showClass = setting0.tipcss[showCssEnum]; } if (!String.isNullOrEmpty(showClass)) { //保存 当前提示标签 显示的样式(枚举值) elem.showcssenum = showCssEnum; jq_tipObj.addClass(showClass); } jq_tipObj.html(showmsg); } }
4.在initConfig配置对象中增加了一些属性,以满足更多的需求,增强功能和易用性,如:
filterInputStrFun: function (str) { return FilterInputOper.FilterInputStr(str); }, //过虑输入字符串的方法[可设置] ——以满足对输入字符串过虑的需求
isformpost: false, //是否是表单提交(默认:false——非表单提交,一般为ajax提交,true——表单提交) ——以满足ajax提交和表单提交的需求
getformdata: null, //function (formdata) { } (验证通过后)获得输入的表单值——只有isformpost=false时,此方法才会被调用
tipshow: "default",//验证提示显示设置(default:默认根据设置) ——设置验证提示标签对象查找方式,根据Id 或 自定义jQuery查找(find)方法。
插件的使用如下:
<div class="jy_fctopbox01"> <div class="jy_fctopbox02"> <div class="left"> 您好,欢迎来到山水檀溪! <a href="/lpzx/LoginOut.aspx"> 退出</a> </div> <div class="right"> <a href="http://xyfc.s187.com/Block_index.aspx?blockId=3" id="a_Into_House" target="_blank">进入楼盘首页</a></div> </div> </div> <div class="jy_fcadmincenter"> <div class="jy_fcadminheader"> <div class="left"> <img src="http://img1.s187.com/Channels/House/xyfc.s187.com/BlockLogo/3/Block_Logo_3.png" id="BlockLogo" width="200" height="120" /> </div> <div class="right"> <img src="http://img1.s187.com/Channels/House/xyfc.s187.com/BlockPropaganda/3/Block_XC_3.png" id="BlockXcImg" width="732" height="120" /></div> </div> <div id="jy_fcmenu"> <div class="jy_fcmenu"> <ul> <li class='hover'> <a href='/lpzx/BlockManager/BlockInfomation/Block_Detail.aspx'> 楼盘管理 </a></li> <li > <a href='/lpzx/PurchaseIntention/PurchaseIntention_List.aspx'> 购房意向 </a></li> <li > <a href='/lpzx/UsersProposal/BlockProposal.aspx'> 用户建议 </a></li> <li > <a href='/lpzx/PasswordCenter/ModifyPassword.aspx'> 修改密码 </a></li> <li > <a href='/lpzx/BlockManager/BlockDomainSet/SetBlockDominName.aspx'> 域名设置 </a></li> <li > <a href='/lpzx/UsersQuestion/QAList.aspx'> 在线问答 </a></li> </ul> </div> </div> <div id="Page_Content" class="jy_fcadmincent"> <div class="jy_fcadminleft"> <div class="ul1"> <ul> <li><a href='/lpzx/BlockManager/BlockInfomation/Block_Detail.aspx' > 楼盘信息 </a></li> <li><a href='/lpzx/BlockManager/BuildingInfomation/Building_List.aspx' class='hover'> 栋号信息 </a></li> <li><a href='/lpzx/BlockManager/LayoutInfomation/Layout_List.aspx' > 户型信息 </a></li> <li><a href='/lpzx/BlockManager/RoomInfomation/Room_List.aspx' > 套房信息 </a></li> <li><a href='/lpzx/BlockManager/CustomerService/Customer_List.aspx' > 客服管理 </a></li> <li><a href='/lpzx/BlockManager/BlockNews/BlockNews_List.aspx' > 楼盘动态 </a></li> <li><a href='/lpzx/BlockManager/BlockProgress/BlockProgress_List.aspx' > 楼盘进度 </a></li> <li><a href='/lpzx/BlockManager/SalesLicense/LicenseManager.aspx' > 预售许可证 </a></li> <li><a href='/lpzx/BlockManager/Gallery/Block_Gallery.aspx' > 楼盘图库 </a></li> </ul> </div> </div> <div class="jy_fcadminright" id="stepDiv1"> <div class="jy_fcadmintil02"> 添加栋号 >> <span>第一步</span></div> <div class="jy_fcadmintil01"> <img src="http://images.cnblogs.com/tje_03.png" width="533" height="26" alt="" /></div> <div class="jy_fcadminme"> <div class="right01"> <div class="jy_fcscrtbox03"> <label> 楼盘名称: </label> <span class="s2"> 山水檀溪 </span> </div> <div class="jy_fcscrtbox03"> <label> <font color="#ff0000">* </font>栋号: </label> <span class="s1"> <input type="text" maxlength="10" class="jy_fcadmin02" id="txtBuildingName" /> </span> <div class="uuu1"> <p id="tipBuildingName" class="box001" style="display: none;"> </p> </div> </div> <div class="jy_fcscrtbox03"> <label> <font color="#ff0000">* </font>状态: </label> <div class="jy_fcscrtboxs1"> <input name="rd_SaleState" type="radio" value="1" /> 待售 <input name="rd_SaleState" type="radio" value="2" /> 期房 <input name="rd_SaleState" type="radio" value="3" /> 现房 <input name="rd_SaleState" type="radio" value="4" /> 尾房 <input name="rd_SaleState" type="radio" value="5" /> 售完 </div> <div class="uuu2"> <p id="tipSaleState" class="box001" style="display: none;"> </p> </div> </div> <div class="jy_fcscrtbox03"> <label> <font color="#ff0000">*</font> 用途: </label> <div class="jy_fcscrtboxs1"> <div class="jy_fcmu"> <ul> <li> <input type="checkbox" name="ckUsage" value="1" />普通住宅</li> <li> <input type="checkbox" name="ckUsage" value="2" />单身公寓</li> <li> <input type="checkbox" name="ckUsage" value="3" />复式</li> <li> <input type="checkbox" name="ckUsage" value="4" />别墅</li> <li> <input type="checkbox" name="ckUsage" value="5" />厂房</li> <li> <input type="checkbox" name="ckUsage" value="6" />写字楼</li> <li> <input type="checkbox" name="ckUsage" value="7" />商铺</li> <li> <input type="checkbox" name="ckUsage" value="8" />经济适用房</li> </ul> </div> </div> <div class="uuu2"> <p id="tipUsage" class="box001" style="display: none;"> </p> </div> </div> <div class="jy_fcscrtbox03"> <label> 预售许可证: </label> <div class="jy_fcscrtboxs1 zoon" style="display:none"> <select id="selLicense" class="jy_fcadmin02"> </select></div> <div class="jy_fcscrtboxs5"><p class="c1"><a href="javascript:;" id="lookSelLicenseA">[查看内容]</a></p><p class="c1"><ins style="color: black;" id="License_empty_Ins">无</ins></p><p class="c1"><a href="javascript:;" onclick="PreSellLicensePopUp.Open();return false;" title="如不存在此建筑物的预售许可证,可点击添加!">添加</a></p> </div> </div> </div> <div class="jy_fcscrtbox03"> <label> 地理位置: </label> <div class="jy_fcscrtboxs5"><p class="c1"><a href="javascript:;" id="markMapA">地图标注</a></p><p class="c1"><ins></ins></p><p class="c1"></p> </div> </div> <div class="jy_fcscrtbox03"> <label> <font color="#ff0000">*</font> 层数: </label> <span class="s1"> <input maxlength="3" type="text" class="jy_fcadmin02" id="txtfloornum" /> </span> <div class="uuu1"> <p id="tipfloornum" class="box001" style="display:none;"> </p> </div> </div> <div class="jy_fcscrtbox03"> <label> 楼层说明: </label> <span class="s2"> <textarea id="txtBlockNote" cols="80" rows="5" class="jy_fcadmin07"></textarea> </span> </div> <div class="jy_fcscrtbox03"> <label> 公摊比率: </label> <div class="jy_fcscrtboxs1"> <input maxlength="10" type="text" class="jy_fcadmin02" id="txtShareBili" /> </div> <div class="uuu2"> <p id="tipShareBili" class="box001" style="display: none;"> </p> </div> </div> <div class="jy_fcscrtbox03"> <label> 位置说明: </label> <span class="s2"> <textarea id="txtPostionDesc" cols="80" rows="5" class="jy_fcadmin07"></textarea> </span> </div> <div class="jy_fcscrtbox03"> <p class="c2"> <input id="btnSubmit_Step1" type="button" class="jy_fcadminbottom02" value="下一步" /> <input id="btnCancel_Step1" type="button" class="jy_fcadminbottom02" value="取 消" /> </p> </div> </div> </div> <div class="jy_fcadminright" id="stepDiv2" style="display: none;"> <div class="jy_fcadmintil02"> 添加栋号 >> <span>第二步</span></div> <div class="jy_fcadmintil01"> <img src="http://images.cnblogs.com/tj_03.png" width="533" height="26" /></div> <div class="jy_fcadminme"> <div class="right01"> <div class="jy_fcscrtbox03"> <label> 占地面积: </label> <div class="jy_fcscrtboxs1"> <input type="text" maxlength="6" class="jy_fcadmin02" id="txtCoveredArea" /> (单位:平方米)</div> <div class="uuu2"> <p id="tipCoveredArea" class="box001" style="display: none;"> </p> </div> </div> <div class="jy_fcscrtbox03"> <label> 建筑面积: </label> <div class="jy_fcscrtboxs1"> <input type="text" maxlength="6" class="jy_fcadmin02" id="txtBuildingArea" /> (单位:平方米)</div> <div class="uuu1"> <p id="tipBuildingArea" class="box001" style="display: none;"> </p> </div> </div> <div class="jy_fcscrtbox03"> <label> 电梯型号: </label> <span class="s2"> <input type="text" maxlength="10" class="jy_fcadmin02" id="txtElevator" /> 例:东芝</span> </div> <div class="jy_fcscrtbox03"> <label> 外墙装修: </label> <span class="s2"> <input type="text" maxlength="10" class="jy_fcadmin02" id="txtOutSideDecorate" /> <kbd>例:高级面砖和涂料结合</kbd></span> </div> <div class="jy_fcscrtbox03"> <label> 内墙装修: </label> <span class="s2"> <input type="text" maxlength="10" class="jy_fcadmin02" id="txtInSideDecorate" /> 例:125/250厚加气混凝土砌块</span> </div> <div class="jy_fcscrtbox03"> <label> 基础: </label> <span class="s2"> <input type="text" maxlength="15" class="jy_fcadmin02" id="txtBasicFacility" /> 例:管桩基础</span> </div> <div class="jy_fcscrtbox03"> <label> 主体结构: </label> <span class="s2"> <input type="text" maxlength="25" class="jy_fcadmin02" id="txtSubjectStruts" /> 例:框架剪力墙结构</span> </div> <div class="jy_fcscrtbox03"> <p class="c2"> <input id="btnPre_Step2" type="button" class="jy_fcadminbottom02" value="上一步" /> <input type="button" id="btnSubmit_Step2" class="jy_fcadminbottom02" value="下一步" /> </p> </div> </div> </div> </div> <div class="jy_fcadminright" id="stepDiv3" style="display: none;"> <div class="jy_fcadmintil02"> 添加栋号 >> <span>第三步</span></div> <div class="jy_fcadmintil01"> <img src="http://images.cnblogs.com/tjs_03.png" width="533" height="26" /></div> <div class="jy_fcadminme"> <div class="jy_fcadmintable02"> <table width="100%" border="0" cellspacing="0"> <tr> <td height="39" align="right" width="20%"> 栋号图片: </td> <td align="left" width="20%"> <span class="s1">(最多1张)</span><a id="a_uploadBuilding" href="javascript:;"><img id="img_uploadBuilding" src="http://images.cnblogs.com/aw_07.png" width="80" height="25" align="absmiddle" alt="" /></a> </td> <td align="left" width="60%"> <div class="jy_fcscrtbox03"> <p id="tip_buildingFile" class="box004"> </p> </div> </td> </tr> </table> <div id="div_BuildingContainer" class="jy_fcadminimg02"> <div style="float: left; width: 340px; height: 380px;"> <div id="ShowBuildingFlv"> </div> </div> </div> <div class="jy_fcgybox005"> <input id="btnPre_Step3" type="button" class="jy_fcadminbottom02" value="上一步" /> <input type="button" id="btnSubmit_Step3" class="jy_fcadminbottom02" value="完 成" /> </div> </div> </div> </div> </div> <div id="Page_Bottom" class="jy_fcadminbottom"> <img src="/lpzx/images/fckj_27.png" width="950" height="6" alt="" /> </div> </div> <br /> <p id="showMes_P"></p> <script src="js/formValidator.js" type="text/javascript"></script> <script src="js/formValidatorRegex.js" type="text/javascript"></script> <script type="text/javascript"> function GetInitConfigOptions(validatorgroup, onsuccess, submitbutton, getformdata) { return { validatorgroup: validatorgroup, formid: "form1", onerror: function (msg) { alert("onerror is " + msg) }, onsuccess: onsuccess, submitbutton: submitbutton, tipcss: { //(ajax)加载处理 loadCss: "", //获得焦点时的样式 focusCss: "", //提示 noticeCss: "box001", //成功 successCss: "box002", //失败 errorCss: "box003", //默认状态 defaultCss: "box004" }, getformdata: getformdata }; } //显示指定的(步)容器 function _ShowStepContainer(showNum) { for (var i = 1; i <= 3; i++) { $("div#stepDiv" + i).css("display", (i == showNum ? "block" : "none")); } } $(document).ready(function () { $("p").show(); $.formValidator.initConfig( GetInitConfigOptions(1, function () { _ShowStepContainer(2); }, "btnSubmit_Step1") ); $("#txtBuildingName").formValidator( { validatorgroup: "1", tipid: "tipBuildingName", onshow: "请输入栋号", onfocus: "栋号不能为空", oncorrect: "", tipcss: //此对象中的属性继承(extend)其对应的initConfig.tipcss的属性 { //失败 //errorCss: "onNotice" } }) .inputValidator({ min: 2, max: 10, onerror: "你输入的栋号(长度错误),请确认" }); $("#txtfloornum").formValidator({ tipid: "tipfloornum", onshow: "请输入层数", onfocus: false, oncorrect: "层数输入正确" }).inputValidator({ min: 1, max: 30, type: "value", empty: { leftempty: false, rightempty: false, emptyerror: "层数两边不能有空符号" }, onerror: "层数不能为空,值介于1-30之间" }) .regexValidator({ regexp: RegexEnum.integer_Z, onerror: "你输入的层数格式不正确,必须为数字" }); $('input[name="rd_SaleState"]:radio').formValidator({ tipid: "tipSaleState", onshow: "请选择售楼状态", onfocus: "栋号的售楼状态", oncorrect: "" }).inputValidator({ min: 1, onerror: "售楼状态必选!" }); $('input[name="ckUsage"]:checkbox').formValidator({ tipid: "tipUsage", forcevalid: true, onshow: "请选择用途", onfocus: false, oncorrect: "用途已选择" }).inputValidator({ min: 1, onerror: "请选择用途,必填" }); $("#txtShareBili").formValidator({ tipid: "tipShareBili", onshow: "请输入公摊比率", oncorrect: "" }).inputValidator({ min: 1, onerror: "公摊比率不能为空" }).regexValidator({ regexp: RegexEnum.decmal_Z, onerror: "你输入的公摊比率格式不正确,必须为数字" }); $.formValidator.initConfig( GetInitConfigOptions(2, function () { _ShowStepContainer(3); }, "btnSubmit_Step2") ); $("#txtCoveredArea").formValidator({ validatorgroup: "2", tipid: "tipCoveredArea", onshow: "请输入占地面积", onfocus: false, oncorrect: "占地面积输入正确" }).inputValidator({ min: 1, onerror: "占地面积不能为空" }) .regexValidator({ regexp: RegexEnum.integer_Z, onerror: "你输入的占地面积格式不正确,必须为数字" }); $("#txtBuildingArea").formValidator({ validatorgroup: "2", tipid: "tipBuildingArea", onshow: "请输入建筑面积", onfocus: false, oncorrect: "建筑面积输入正确" }).inputValidator({ min: 1, onerror: "建筑面积不能为空" }) .regexValidator({ regexp: RegexEnum.integer_Z, onerror: "你输入的建筑面积格式不正确,必须为数字" }); $.formValidator.initConfig( GetInitConfigOptions(3, function () { alert("验证通过"); return true; }, "btnSubmit_Step3", function (formdata) { alert("要提交的表单值:"+$.param(formdata)); for (var key in formdata) { $("#showMes_P").html($("#showMes_P").html() + "<br/>key:" + key + " | val:" + formdata[key]); } }) ); }); </script>
上面就是我对此插件主要改进的介绍,插件整体还是保持原版本的结构和思想,所做的无非是让插件可读性和易用性等更好,今天分享出来,也是希望有更多的朋友能帮忙测试看看,提些自己的意见或想法,让这个表单验证插件formValidator能更好用(不断的改进才能做到更好,改进离不开大家的建议)!
补充:需要解决改进的功能——验证可支持自由组合,如:电话和手机 只用验证其中的一个通过即可. 这个我自己尝试实现过,但效果不理想,没有想到一个比较好的解决方法,希望大家能帮忙考虑下!
插件和Demo下载:FromVaild
jQuery表单验证插件formValidator(改进版)
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@