JS实现的通用表单验证插件完整实例

时间：2021-05-26

本文实例讲述了JS实现的通用表单验证插件。分享给大家供大家参考。具体如下：

这里演示一个通用的JS表单验证插件代码。使用方法：第一步：需设定表单项数据类型，第二步：实例表单验证，验证错误提示说明（程序有自带相关错误提示，可自定义每项验证错误提示时文本，只需添加msg）。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-normal-table-check-plug-codes/

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://pare:function(v,operator,v2,DataType){ //为空时自动判断格式 if(!DataType){ if(this.Validator.number[0].test(v)){DataType='number';} else if(this.Validator.date[0].test(v)){DataType='date';} else{DataType='text'} } //数据格式转换 if(DataType=='number'){v-=0;v2-=0;} else if(DataType=='date'){ var _mdt=v.match(this.Validator.date[0]); if(_mdt==null){return false;} v=new Date(_mdt[2],_mdt[3]-1,_mdt[4])-new Date; _mdt=v2.match(this.Validator.date[0]); if(_mdt==null){return false;} v2=new Date(_mdt[2],_mdt[3]-1,_mdt[4])-new Date; } switch (operator){ case ">": return v>v2;break; case ">=": return v>=v2;break; case "<": return v<v2;break; case "<=": return v<=v2;break; case "!=": return v!=v2;break; default: return v==v2; } }, //日期验证范围 Check_Date:function(v,min,max){ var _mdt=v.match(this.Validator.date[0]); if(_mdt==null){return false;} v=new Date(_mdt[2],_mdt[3]-1,_mdt[4])-new Date; _mdt=min.match(this.Validator.date[0]); min=_mdt==null?null:new Date(_mdt[2],_mdt[3]-1,_mdt[4])-new Date; _mdt=max.match(this.Validator.date[0]); max=_mdt==null?null:max=new Date(_mdt[2],_mdt[3]-1,_mdt[4])-new Date; return this.Check_Num(v,min,max); }, //设置样式 vfSetCss:function(o,css,s){ if(!s){ SetCss(o,this.Stat.inCorrect,'del'); SetCss(o,this.Stat.inError,'del'); SetCss(o,this.Stat.inFocus,'del'); } if(s){o.className=css;}else{SetCss(o,css,'add');} }}new ValidatorForm(GetID('theForm'));</script>

希望本文所述对大家的javascript程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章