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动态引用CSS文件的2种方法介绍
Jun 06 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
Mar 28 Javascript
php 修改密码实现代码
May 24 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
微信上传视频文件提示(推荐)
Nov 22 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 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代码(抓取网页中的邮箱地址)
2012/07/17 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
jquery select选中的一个小问题
2009/10/11 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
python SocketServer源码深入解读
2019/09/17 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
Django实现celery定时任务过程解析
2020/04/21 Python
python如何使用代码运行助手
2020/07/03 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
传播学专业毕业生自荐信
2013/11/04 职场文书
儿媳婚宴答谢词
2014/01/14 职场文书
人力资源管理专业应届生求职信
2014/04/24 职场文书
企业晚会策划方案
2014/05/29 职场文书
争先创优个人总结
2015/03/04 职场文书
盗窃案辩护词
2015/05/21 职场文书
通讯稿范文
2015/07/22 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript