jQuery表单验证插件formValidator(改进版)


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

Javascript 相关文章推荐
JavaScript 动态将数字金额转化为中文大写金额
May 14 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
vue开发环境配置跨域的方法步骤
Jan 16 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
JavaScript JSON使用原理及注意事项
Jul 30 Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 Javascript
jQuery.extend 函数详解
Feb 03 #Javascript
jquery插件开发方法(初学者)
Feb 03 #Javascript
jquery插件制作简单示例说明
Feb 03 #Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 #Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 #Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 #Javascript
JavaScript初学者应注意的七个细节小结
Jan 30 #Javascript
You might like
php 8小时时间差的解决方法小结
2009/12/22 PHP
PHP 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
Vue响应式原理详解
2017/04/18 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
2020/11/03 Javascript
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
Python正则表达式教程之二:捕获篇
2017/03/02 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
俄罗斯商务邀请函
2014/01/26 职场文书
军训教官感言
2014/03/02 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
redis三种高可用方式部署的实现
2021/05/11 Redis
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技