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==''||t