欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-13 18:52:42
枚举对象的使用: 代码如下: //各种验证方式支持的标签类型 sustaintype: function (elem, setting) { var srctag = elem.tagname;...

枚举对象的使用:

代码如下:


//各种验证方式支持的标签类型
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)方法。
  
插件的使用如下:

. 代码如下:


<p class="jy_fctopbox01">
<p class="jy_fctopbox02">
<p class="left">
您好,欢迎来到山水檀溪! <a href="/lpzx/loginout.x">
退出</a>
</p>
<p class="right">
<a href="https://xyfc.s187.com/block_index.aspx?blockid=3" id="a_into_house" target="_blank">进入楼盘首页</a></p>
</p>
</p>
<p class="jy_fcadmincenter">
<p class="jy_fcadminheader">
<p class="left">
<img src=https://www.2cto.com/uploadfile/2018/0621/20180621025136513.png" id="blocklogo" width="200" height="120" />
</p>
<p class="right">
<img src=https://www.2cto.com/uploadfile/2018/0621/20180621025137821.png" id="blockxcimg" width="732" height="120" /></p>
</p>
<p id="jy_fcmenu">
<p 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>
</p>
</p>
<p id="page_content" class="jy_fcadmincent">
<p class="jy_fcadminleft">
<p 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>
</p>
</p>
<p class="jy_fcadminright" id="stepdiv1">
<p class="jy_fcadmintil02">
添加栋号 >> <span>第一步</span></p>
<p class="jy_fcadmintil01">
<img src=https://www.2cto.com/uploadfile/2018/0621/20180621025137776.png" width="533" height="26" alt="" /></p>
<p class="jy_fcadminme">
<p class="right01">
<p class="jy_fcscrtbox03">
<label>
楼盘名称:
</label>
<span class="s2">
山水檀溪
</span>
</p>
<p class="jy_fcscrtbox03">
<label>
<font color="#ff0000">* </font>栋号:
</label>
<span class="s1">
<input type="text" maxlength="10" class="jy_fcadmin02" id="txtbuildingname" />
</span>
<p class="uuu1">
<p id="tipbuildingname" class="box001" style="display: none;">
</p>
</p>
</p>
<p class="jy_fcscrtbox03">
<label>
<font color="#ff0000">* </font>状态:
</label>
<p 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" />
售完
</p>
<p class="uuu2">
<p id="tipsalestate" class="box001" style="display: none;">
</p>
</p>
</p>
<p class="jy_fcscrtbox03">
<label>
<font color="#ff0000">*</font> 用途:
</label>
<p class="jy_fcscrtboxs1">
<p 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>
</p>
</p>
<p class="uuu2">
<p id="tipusage" class="box001" style="display: none;">
</p>
</p>
</p>
<p class="jy_fcscrtbox03">
<label>
预售许可证:
</label>
<p class="jy_fcscrtboxs1 zoon" style="display:none">
<select id="sellicense" class="jy_fcadmin02">
</select></p>
<p 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>
</p>
</p>
</p>
<p class="jy_fcscrtbox03">
<label>
地理位置:
</label>
<p class="jy_fcscrtboxs5"><p class="c1"><a href="javascript:;" id="markmapa">地图标注</a></p><p class="c1"><ins></ins></p><p class="c1"></p>
</p>
</p>
<p class="jy_fcscrtbox03">
<label>
<font color="#ff0000">*</font> 层数:
</label>
<span class="s1">
<input maxlength="3" type="text" class="jy_fcadmin02" id="txtfloornum" />
</span>
<p class="uuu1">
<p id="tipfloornum" class="box001" style="display:none;">
</p>
</p>
</p>
<p class="jy_fcscrtbox03">
<label>
楼层说明:
</label>
<span class="s2">
<textarea id="txtblocknote" cols="80" rows="5" class="jy_fcadmin07"></textarea>
</span>
</p>
<p class="jy_fcscrtbox03">
<label>
公摊比率:
</label>
<p class="jy_fcscrtboxs1">
<input maxlength="10" type="text" class="jy_fcadmin02" id="txtsharebili" />
</p>
<p class="uuu2">
<p id="tipsharebili" class="box001" style="display: none;">
</p>
</p>
</p>
<p class="jy_fcscrtbox03">
<label>
位置说明:
</label>
<span class="s2">
<textarea id="txtpostiondesc" cols="80" rows="5" class="jy_fcadmin07"></textarea>
</span>
</p>
<p 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>
</p>
</p>
</p>
<p class="jy_fcadminright" id="stepdiv2" style="display: none;">
<p class="jy_fcadmintil02">
添加栋号 >> <span>第二步</span></p>
<p class="jy_fcadmintil01">
<img src=https://www.2cto.com/uploadfile/2018/0621/20180621025138750.png" width="533" height="26" /></p>
<p class="jy_fcadminme">
<p class="right01">
<p class="jy_fcscrtbox03">
<label>
占地面积:
</label>
<p class="jy_fcscrtboxs1">
<input type="text" maxlength="6" class="jy_fcadmin02" id="txtcoveredarea" />
(单位:平方米)</p>
<p class="uuu2">
<p id="tipcoveredarea" class="box001" style="display: none;">
</p>
</p>
</p>
<p class="jy_fcscrtbox03">
<label>
建筑面积:
</label>
<p class="jy_fcscrtboxs1">
<input type="text" maxlength="6" class="jy_fcadmin02" id="txtbuildingarea" />
(单位:平方米)</p>
<p class="uuu1">
<p id="tipbuildingarea" class="box001" style="display: none;">
</p>
</p>
</p>
<p class="jy_fcscrtbox03">
<label>
电梯型号:
</label>
<span class="s2">
<input type="text" maxlength="10" class="jy_fcadmin02" id="txtelevator" />
例:东芝</span>
</p>
<p class="jy_fcscrtbox03">
<label>
外墙装修:
</label>
<span class="s2">
<input type="text" maxlength="10" class="jy_fcadmin02" id="txtoutsidedecorate" />
<kbd>例:高级面砖和涂料结合</kbd></span>
</p>
<p class="jy_fcscrtbox03">
<label>
内墙装修:
</label>
<span class="s2">
<input type="text" maxlength="10" class="jy_fcadmin02" id="txtinsidedecorate" />
例:125/250厚加气混凝土砌块</span>
</p>
<p class="jy_fcscrtbox03">
<label>
基础:
</label>
<span class="s2">
<input type="text" maxlength="15" class="jy_fcadmin02" id="txtbasicfacility" />
例:管桩基础</span>
</p>
<p class="jy_fcscrtbox03">
<label>
主体结构:
</label>
<span class="s2">
<input type="text" maxlength="25" class="jy_fcadmin02" id="txtsubjectstruts" />
例:框架剪力墙结构</span>
</p>
<p 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>
</p>
</p>
</p>
</p>
<p class="jy_fcadminright" id="stepdiv3" style="display: none;">
<p class="jy_fcadmintil02">
添加栋号 >> <span>第三步</span></p>
<p class="jy_fcadmintil01">
<img src=https://www.2cto.com/uploadfile/2018/0621/20180621025138405.png" width="533" height="26" /></p>
<p class="jy_fcadminme">
<p 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=https://www.2cto.com/uploadfile/2018/0621/20180621025138238.png" width="80" height="25" align="absmiddle" alt="" /></a>
</td>
<td align="left" width="60%">
<p class="jy_fcscrtbox03">
<p id="tip_buildingfile" class="box004">
</p>
</p>
</td>
</tr>
</table>
<p id="p_buildingcontainer" class="jy_fcadminimg02">
<p style="float: left; width: 340px; height: 380px;">
<p id="showbuildingflv">
</p>
</p>
</p>
<p class="jy_fcgybox005">
<input id="btnpre_step3" type="button" class="jy_fcadminbottom02" value="上一步" /> <input type="button" id="btnsubmit_step3" class="jy_fcadminbottom02" value="完 成" />
</p>
</p>
</p>
</p>
</p>
<p id="page_bottom" class="jy_fcadminbottom">
<img src="/lpzx/images/fckj_27.png" width="950" height="6" alt="" />
</p>
</p>
<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++) {
$("p#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能更好用(不断的改进才能做到更好,改进离不开大家的建议)!
  补充:需要解决改进的功能——验证可支持*组合,如:电话和手机 只用验证其中的一个通过即可. 这个我自己尝试实现过,但效果不理想,没有想到一个比较好的解决方法,希望大家能帮忙考虑下!