日期:2014-05-16  浏览次数:20416 次

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