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 相关文章推荐
用svg制作富有动态的tooltip
Jul 17 Javascript
Vue.js中数组变动的检测详解
Oct 12 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
BackBone及其实例探究_动力节点Java学院整理
Jul 14 Javascript
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
浅谈Vue的响应式原理
May 30 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
基于postman获取动态数据过程详解
Sep 08 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结合飞信 免费天气预报短信
2009/05/07 PHP
php5.3 废弃函数小结
2010/05/16 PHP
Php获取金书网的书名的实现代码
2010/06/11 PHP
php中使用sftp教程
2015/03/30 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
JavaScript的目的分析
2007/01/05 Javascript
网页javascript精华代码集
2007/01/24 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
python实现的jpg格式图片修复代码
2015/04/21 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
Python中单、双下划线的区别总结
2017/12/01 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
雷蛇美国官网:Razer
2020/04/03 全球购物
SQL Server面试题
2016/10/17 面试题
受资助学生感谢信
2015/01/21 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers