Javascript前台简单验证插件

其实基于Js的验证插件机很多很多，使用起来也非常方便。为了学习Js的目的，在工作中我也自己写了个小验证插件，非常简单。

我觉得验证框架的大体流程是这样的，

（1）收集需要验证的元素(干扰式：直接写在页面表单中，无干扰式：使用Json配置需要验证的元素并在验证框架中分析Json提取需要验证的元素)

（2）选择验证方式(离开输入框即验证、表单提交验证等)

（3）使用验证方法验证(使用正则表达式实现常用的验证方法，要做到可扩展性)

（4）如若验证失败，根据失败信息显示方式，显示失败提示信息。

总的来说就是分成数据收集模块，验证模式模块，验证方法模块，错误显示模块。

下面送上我的第一个基于jquery的验证代码

//easyFormValidate1.0

//easyFormValidateWithJquery.js

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

//本验证方法验证模式就一种：手动调用该验证方法

//本验证方法失败信息显示方式也就一种：alert提示信息+页面焦点

//本验证方法是属于干扰式的验证方法，即需要在页面表单元素中增加验证属性。

//formid:传入需要验证的表单的Id或者name，在该表单的元素中需要首先定义要验证元素的验证属性，如

//<form id=testForm>元素A:<input type=text name='field1' value='I won't validate'><br>

//元素B:<input type=text name='field2' rules='fill;minlength(2);'

//msgs='元素B不能为空;元素B的最小长度不能小于2' value='I need validate'></form>

//然后在保存代码中加入if(!validateForm('testForm'))return;

function validateForm(formId){
var retFlag=true;
var form = $("#"+formId).size()>0?$("#"+formId):$("form[name="+formId+"]");
function convertToObj(rules,msgs){
var ruleArr = rules.split(";");
var msgArr = msgs.split(";");
var r={};
for(var i=0;i<ruleArr.length;i++){
r[ruleArr[i]]=msgArr[i]==null?"":msgArr[i];
}
return r;
}
$("*[rule]",form).each(function(){
var rule = convertToObj($(this).attr("rule"),$(this).attr("message"));
var methodName;
var param;
SimpleValidate.init(rule);
for(var method in rule){
if(method==null||method==''||SimpleValidate.rules.methods[method.toLowerCase()]==null)
continue;
methodName = method.match(/\w+/)[0];
param = method.match(/\([\w,]*\)/)==null?"":method.match(/\([\w,]*\)/)[0];
var ret =SimpleValidate.validate(this,methodName,param);
if(ret){
alert(ret);
retFlag=false;
$(this).focus();
return false;
}
}
});
return retFlag;
};
var SimpleValidate ={
init:function(rule){
var methodName = "";
for(var method in rule){
if(method==''||this.rules.methods[method.toLowerCase()]==null||rule[method]=='')
continue;
methodName = method.match(/\w+/)[0];
this.messages[methodName]=rule[method];
}
},
validate:function(elmt,rule,param){
var result = this.rules.methods[rule.toLowerCase()].call(this,elmt,param);
if(!result)return this.messages[rule.toLowerCase()];
},
messages:{
"fill":"该输入项不能为空",
"date":"日期格式错误，必须为形如2001-01-01格式",
"email":"邮箱格式错误，必须为形如pdcss_gs@163.com格式",
"integer":"必须是整数值",
"minlength":"",
"maxlength":"",
"rangelength":"",
"doctype":"不是有效的word类型"
},
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.getLength(elmt.value)>=param[0];
},
"maxlength":function(elmt,param){
param = this.rules.parameters(param);
return this.getLength(elmt.value)<=param[0];
},
"rangelength":function(elmt,param){
param = this.rules.parameters(param);
return this.getLength(elmt.value)>=param[0]&&this.getLength(elmt.value)<=param[1];
},
"doctype":function(elmt){
return /.+\.doc$/.test(elmt.value);
}
},
parameters: function(param){
var re = /[\(]?(\w*)\s?[,\)]/g;
var arr="";
var retArray=[];
while ((arr = re.exec(param)) != null){
retArray.push(arr[1]);
}
return retArray;
}
},
getLength:function(val){
var len = 0;
var ch;
if(val==null)
return len;
for(var i = 0; i<val.length;i++){
ch=val.charCodeAt(i);
if(ch>255)
len+=2;
else
len++;
}
return len;
}
};