js 设计模式(策略模式)

策略模式
策略模式定义了一系列算法，从概念上来说，所有的这些算法都是做相同的事情，只是实现不同，他可以以相同的方式调用所有的方法，减少了各种算法类与使用算法类之间的耦合。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="main">
<p><span>账号:</span><input v-model="name" type="text" name=""><span></span></p>
<p><span>密码:</span><input v-model="password" type="text" name=""></p>
<p><span>手机:</span><input v-model="tel" type="text" name=""></p>
<p><span>e-mail:</span><input v-model="email" type="text" name=""></p>
<p><span>邮编:</span><input v-model="number" type="text" name=""></p>
        <button @click="cleck">确定</button>
</div>

</body>

<script  src="http://apps.bdimg.com/libs/vue/1.0.14/vue.js"></script>
<script type="text/javascript">
    var tt=new Vue({
        el:'.main',
        data:{
            name:'',
            password:'',
            tel:'',
            email:'',
            number:''
        },
        mounted(){
            this.aa()
        },
        methods:{
            cleck(){
                var data={
                    name:this.name,
                    tel:this.tel,
                    num:this.password,
                    email:this.email
                }
                check.validate(data)
            }
        }
    })
</script>
<script>

var check={
    types:{},
    messages:[],
    config:{},
    validate:function(data){
        var i,mes,type,checker,result_ok;

        this.message=[];
        for(i in data){
            //判断有没有属性i
            if(data.hasOwnProperty(i)){

                type = this.config[i];  // 根据key查询是否有存在的验证规则
                checker = this.types[type]; // 获取验证规则的验证类

                result_ok = checker.validate(data[i]); // 使用查到到的单个验证类进行验证
                if (!result_ok) {
                    msg = checker.instructions;;
                    //this.messages.push(msg);
                    console.log(msg)
                }
            }
        }
    }
}

// 验证给定的值是否不为空
check.types.isNon = {
    validate: function (value) {
        return value !== "";
    },
    instructions: "传入的值不能为空"
};

// 验证给定的值是否不为手机号码
check.types.isTel = {
    validate: function (value) {
        return /^(13[0-9]{9})|(15[89][0-9]{8})$/.test(value)
    },
    instructions: "传入的值不是手机号码"
};

// 验证给定的值是否不为手机号码
check.types.isNum = {
    validate: function (value) {
        return !/[^a-z0-9]/i.test(value);
    },
    instructions: "传入的值只能保护字母和数字，不能包含特殊字符"
};


// 验证给定的值是否不为e-mail
check.types.isEmail = {
    validate: function (value) {
        return /\w@\w*\.\w/.test(value);
    },
    instructions: "传入的值不是e-mail"
};

// 验证给定的值是否不为邮编
check.types.isCode = {
    validate: function (value) {
        return /^[1-9][0-9]{5}$/.test(value);
    },
    instructions: "传入的值不是邮编"
};

check.config = {
    name: 'isNon',
    tel: 'isTel',
    num: 'isNum',
    email: 'isEmail',
    code: 'isCode',
};


</script>
</html>
秒客网

js 设计模式(策略模式)

相关文章
