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 相关文章推荐
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 Javascript
js保留两位小数使用toFixed实现
Jul 29 Javascript
javascript:void(0)的作用示例介绍
Oct 28 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
jquery trigger函数执行两次的解决方法
Feb 29 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
JavaScript用构造函数如何获取变量的类型名
Dec 23 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
Vant picker 多级联动操作
Nov 02 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 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 水平的题目
2007/05/30 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
2010/07/14 Javascript
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
微信小程序一周时间表功能实现
2019/10/17 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
python中的函数用法入门教程
2014/09/02 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
Python3数字求和的实例
2019/02/19 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
Html5之title吸顶功能
2018/06/04 HTML / CSS
教师年度考核自我鉴定
2014/01/19 职场文书
安全生产管理责任书
2014/04/16 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
教师个人成长总结
2015/02/11 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS