策略模式下的表单校验

2014-04-03 北京

简介

最近在做搜狐汽车数据库的项目，项目构建以backbone为基础，页面的片段都以不同的view来创建，同时一些公用的业务组件除了用view实现，也提取出来创建一个单独的lib库供调用，在此基础上，尝试学习下javascript里面的设计模式的不同写法。

策略模式

策略模式支持在运行时选择算法。代码的客户端只调用一个接口，但是提供的接口可供用户配置属性，以便根据用户执行的上下文的不同任务，来选择特定的方法进行处理。

下面就是一个表单验证的例子。

数据验证实例

在当前环境下，需要对用户名和手机号进行验证，同时其他页面也需要此功能，因此将此功能提取出作为一个公用的组件。

代码实现

window.AutoDB={
        validator:{
            //可用的检查
            types:{
                isNonEmpty:{
                    validate: function(value){
                        return value!=="";
                    },
                    instructions:"格式错误"
                },
                isPhone:{
                    validate: function(value){
                        return /^(13[0-9]|15[0|3|6|7|8|9]|18[8|9])\d{8}$/g.test(value);
                    },
                    instructions:"格式错误"
                }
            },
            //错误消息
            messages:[],

            //验证配置
            config:{
                name:'isNonEmpty',
                phone:'isPhone'
            },

            validate:function(data){
                var i,msg,type,checker,result_ok;
                //重置消息
                this.messages=[];
                for(i in data){
                    if(data.hasOwnProperty(i)){
                        type = this.config[i];
                        checker = this.types[type];
                        if(!type){
                            continue;
                        }
                        if(!checker){
                            throw{
                                name:"ValidationError",
                                message:"No handler to validate type" + type
                            };
                        }
                        result_ok = checker.validate(data[i]);
                        if(!result_ok){
                            msg = "Invalid value for *"+i+"*,"+checker.instructions;
                            this.messages.push({i:checker.instructions});
                        }
                    }
                }
                return this.hasErrors();
            },

            hasErrors:function(){
                return this.messages.length !==0;
            }

        }
}

调用方法为

AutoDB.validator.validate(data);

if(AutoDB.validator.hasErrors()){
    //此处写业务逻辑
    return ;
}

实际应用

validator对象是通用的，如果在多个页面调用，只需要把他放在全局变量下或者自己的LIB库下调用。