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 相关文章推荐
jquery 无限级联菜单案例分享
Mar 26 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
js实现二级菜单渐隐显示
Nov 03 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
javascript观察者模式实现自动刷新效果
Sep 05 Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 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
第十四节 命名空间 [14]
2006/10/09 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
Symfony控制层深入详解
2016/03/17 PHP
谈谈PHP连接Access数据库的注意事项
2016/08/12 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
Python 实现两个服务器之间文件的上传方法
2019/02/13 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
python如何实现word批量转HTML
2020/09/30 Python
python mongo 向数据中的数组类型新增数据操作
2020/12/05 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
Java基础面试题
2012/11/02 面试题
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
个人求职自荐信范文
2014/06/20 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL
解决Mysql中的innoDB幻读问题
2022/04/29 MySQL
Spring 使用注解开发
2022/05/20 Java/Android