Javascript前台简单验证插件2

前面的easyFormValidateWithJquery.js是基于 Jquery的，是我在工作中的第一个验证插件，使用起来比较灵活的。但是不足之处也显而易见，除了细节方面的诸多不足，最大的不足就是在于是干扰表单式的，所以一定要对表单的元素属性进行修改，这就在可重用性、维护性等方面造成了不便，这毕竟是把双刃剑，灵活的同时污染了表单。

其实在工作中很快我就写了第二个验证插件，这次是无干扰式的，而且是基于Dom的Javascript，不需要Jquery库支持。下面就附上代码。

//easyFormValidate2.0

//easyFormValidateWithDom.js

//本验证方法基本能满足简单的验证需求，如不能为空，必须是日期，必须是整数，最大值，最小值等

//本验证方法验证模式有2种：焦点离开文本域即验证和手动调用验证方法

//本验证方法失败信息显示方式有2种：alert提示信息+元素焦点;添加错误样式+元素焦点

//本验证方法是属于无干扰式的验证方法，只需要初始化验证信息即可。

//本验证方法最大缺点是由于是基于json的，并且使用了大量的对象for each语句，所以在大量元素验证的性能方面可能或有不如意的地方，

//但是完全可以胜任中小型的表单验证。
var SimpleValidate ={
validates:{
quick:{
},
normal:{}
},
elements:{
},
elmt:{
id:"1",
rule:[],
messages:[]
},
init:function(objs){
for(var obj in objs){
this.addToValidates(objs[obj]);
}
},
addToValidates:function(obj){
if(!obj)return;
var checkType = obj.checkType;
if(checkType=='quick'){
var eles = obj.eles;
this.addToElements(eles);
//if checkType is quick,add their focusout event;
this.addOnFocusOutEvent(eles);
}else if(checkType=='normal'){
var eles = obj.eles;
this.addToElements(eles);
//if checkType is normal,just do nothing except add elements.And when invoking the validate method,
//each elements in this.elements will be validated.
}
},
//initializaing the elements,add new elements to this.elements,give those elements their dom reference property;
addToElements:function(eles){
for(var id in eles){
var info = eles[id];
info.domEle = this.tools.getEle(id);
info.id = info.id||id;
this.elements[id]=info;
}
},
addOnFocusOutEvent:function(eles){
for(var f in eles){
var nScope = this;
nScope.elements[f].domEle.onfocusout=function(){
var ret = nScope.validateDomEle(this);
}
}
},
initMessage:function(myEle,rule){
var methodName = "";
for(var method in rule){
methodName = method.match(/\w+/)==null?method:method.match(/\w+/)[0];
if(methodName==''||this.rules.methods[methodName.toLowerCase()]==null||rule[method]=='')
continue;
var messages = myEle.messages;
if(!messages){
messages = {};
myEle.messages=messages;
}
messages[methodName]=rule[method];
}
},
validateRule:function(elmt,rule,param){
var result = this.rules.methods[rule.toLowerCase()].call(this,elmt,param);
if(!result){
var retMsg;
if(!this.elements[elmt.id]||!this.elements[elmt.id].messages)return this.messages[rule.toLowerCase()];
return this.elements[elmt.id].messages[rule.toLowerCase()]||this.messages[rule.toLowerCase()];
}
},
messages:{
"fill":"该输入项不能为空",
"date":"日期格式错误，必须为形如2001-01-01格式",
"email":"邮箱格式错误，必须为形如pdcss_gs@126.com格式",
"integer":"该输入项必须是非负整数",
"minlength":"最小长度没有符合要求",
"maxlength":"最大长度没有符合要求",
"rangelength":"长度范围没有符合要求",
"doctype":"不是有效的word类型",
"maxvalue":"最大值没有符合要求",
"minvalue":"最小值没有符合要求"
},
rules:{
methods:{
"fill":function(elmt){
return /\S/.test(elmt.value);
},
"date":function(elmt){
return /\d{4}-\d{2}-\d{2}/.test(elmt.value);
},
"email":function(elmt){
return /\w+@\w+\.\w+/.test(elmt.value);
},
"integer":function(elmt){
return /^\d*$/.test(elmt.value);
},
"minlength":function(elmt,param){
param = this.rules.parameters(param);
return this.tools.getLength(elmt.value)>=param[0];
},
"maxlength":function(elmt,param){
param = this.rules.parameters(param);
return this.tools.getLength(elmt.value)<=param[0];
},
"rangelength":function(elmt,param){
param = this.rules.parameters(param);
return this.tools.getLength(elmt.value)>=param[0]&&this.tools.getLength(elmt.value)<=param[1];
},
"doctype":function(elmt){
return /.+\.doc$/.test(elmt.value);
},
"maxvalue":function(elmt,param){
param = this.rules.parameters(param);
return elmt.value<=param[0];
},
"minvalue":function(elmt,param){
return elmt.value>=param[0];
},
"regex":function(elmt,param){
if(param.charAt(0)!='('||param.charAt(param.length-1)!=')')return false;
param = param.substring(1,param.length-2);
return new RegExp(param).test(elmt.value);
}
},
parameters: function(param){
var re = /[\(]?\s*(\w*)\s*[\s,\)]/g;
var arr="";
var retArray=[];
while ((arr = re.exec(param)) != null){
retArray.push(arr[1]);
}
return retArray;
}
},
tools:{
getLength:function(val){
var len = 0;
var ch;
if(val==null)
return len;
for(var i = 0; i<val.length;i=i+1){
ch=val.charCodeAt(i);
if(ch>255)
len+=2;
else
len=len+1;
}
return len;
},
convertToObj:function(rules,msgs){
var ruleArr = rules.split(";");
var msgArr = msgs.split(";");
var r={};
for(var i=0;i<ruleArr.length;i=i+1){
r[ruleArr[i]]=msgArr[i]==null?"":msgArr[i];
}
return r;
},
convertArrayToObj:function(rules,msgs){
var r={};
for(var i=0;i<rules.length;i=i+1){
r[rules[i]]=msgs[i]==null?"":msgs[i];
}
return r;
},
getFormByFormIndex:function(formIndex){
var retForm = document.getElementById(formIndex)||document.all(formIndex);
if(retForm&&retForm.length){
retForm = retForm[0];
}
return retForm;
},
getEle:function(eleIndex){
var retEle = document.getElementById(eleIndex)||document.all(eleIndex);
if(retEle&&retEle.length){
retEle = retEle[0];
}
return retEle;
},
getObjPropertyNum:function(obj){
var num =0;
for(var p in obj)num=num+1;
return num;
}
},
validate:function(){
var notError = true;
var elemts = this.elements;
for(var ele in elemts){
var myEle = elemts[ele];
var retMsg = this.validateMyEle(myEle);
if(retMsg){
this.addErrMsg(myEle,retMsg);
myEle.domEle.focus();
return false;
}else this.removeErrMsg(myEle);
}
return notError;
},
validateDomEle:function(domEle){
var myEle = this.elements[domEle.id||domEle.name];
if(!myEle)return;
var retMsg = this.validateMyEle(myEle);
if(retMsg){
this.addErrMsg(myEle,retMsg);
return false;
}else this.removeErrMsg(myEle);
},
addErrMsg:function(myEle,retMsg){
var eTypes = myEle.errorType;
var domEle = myEle.domEle;
if(!eTypes)return;
for(var i=0;i<eTypes.length;i=i+1){
var etype = eTypes[i];
if(etype=='alert'){
alert(retMsg);
}else if(etype=='page'){
var cName = domEle.className;
if(cName.indexOf("wrongClass")==-1){
domEle.className=domEle.className+" wrongClass";
domEle.title = retMsg;
}
}
}
},
removeErrMsg:function(myEle){
var eTypes = myEle.errorType;
var domEle = myEle.domEle;
if(!eTypes)return;
for(var i=0;i<eTypes.length;i=i+1){
var etype = eTypes[i];
if(etype=='page'){
var cName = domEle.className;
if(cName.indexOf("wrongClass")!=-1){
domEle.className = cName.replace("wrongClass","");
domEle.title = "";
}
}
}
},
validateMyEle:function(myEle){
if(!myEle)return;
var rule = myEle.rule;
var msg = myEle.message;
var domEle = myEle.domEle;
if(!domEle)return;
var rule = this.tools.convertArrayToObj(rule,msg);
var methodName;
var param;
this.initMessage(myEle,rule);
for(var method in rule){
methodName = method.match(/\w+/)==null?method:method.match(/\w+/)[0];
if(methodName==null||methodName==''||this.rules.methods[methodName.toLowerCase()]==null)
continue;
param = method.match(/\([\w,\s]*\)/)==null?"":method.match(/\([\w,\s]*\)/)[0];
if(methodName=='regex'){
param = method.substring(5);
}
var ret =this.validateRule(domEle,methodName,param);
if(ret!=null&&ret!='undefined'){
//formElement.focus();
return ret;
}
}
}
};

demo:

<html>
<head>
<script src="js/easyFormValidateWithDom.js" type="text/javascript"></script>
<script type="text/javascript">
function validate(){
if(!SimpleValidate.validate())return;
}
function init(){
SimpleValidate.init({
"validateA":{
checkType:"normal",//离开焦点即验证(quick);调用方法验证(normal)
eles:{
"inputC":{rule:["fill","integer"],message:["inputC不能为空"],errorType:["alert"]},
"inputD":{rule:["fill","regex(/\w*?hello\w*?/g)"],message:["inputD不能为空","输入项必须含有hello"],errorType:["alert"]}
}
},
"validateB":{
checkType:"quick",//离开焦点即验证(quick);调用方法验证(normal)
eles:{
"inputA":{rule:["fill","maxlength(3 ,4)"],message:["inputA不能为空","inputA最大长度为3"],errorType:["alert","page"]}
}
}
});
}
</script>
<style type='text/css'>
.wrongClass{ border: 1px dotted red; }
</style>
</head>
<body onload='init()'>
<form id='testForm'>
A:<input type=text value='need validate' id='inputA'><br>
B:<input type=text value='need not validate' id='inputB'><br>
C:<input type=text value='need validate' id='inputC'><br>
D:<input type=text value='custom regex validate' id='inputD'>
<input type=button value='Validate' onclick='validate()'>
</form>
</body>
</html>

表单验证.rar (5.2 KB)

下载次数: 3