脚本宝典收集整理的这篇文章主要介绍了

vue验证中如何使用策略模式

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

根据网上现有的资料改的vue适用的策略验证,如果还需要别的验证直接自己添加规则就行了 。 上代码
新建一个js文件

let strategys = {
    isNotEmpty: (value, errorMsg) => {
        if(value === ''){
            return errorMsg;
        }
    },
    minLength: (value, length, errorMsg) => {
        if(value.length < length){
            return errorMsg;
        }
    },
    mobileFormat: (value, errorMsg) => {
        if(!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
            return errorMsg;
        }
    }
}

export var Validator = function () {
        this.cache = [];  // 保存效验规则
};
Validator.prototype.add = function(dom,rule,errorMsg) {
    var str = rule.split(":");
    this.cache.push(function(){
        // str 返回的是 minLength:6 
        var strategy = str.shift();
        str.unshift(dom); // value添加进参数列表
        str.push(errorMsg);  // 把errorMsg添加进参数列表
        return strategys[strategy].apply(dom,str);
    });
};
Validator.prototype.start = function () {
  for (var i = 0, validatorFunc; validatorFunc = this.cache[i++]; ) {
        var msg = validatorFunc()  // 开始效验 并取得效验后的返回信息
        if(msg) {
            return msg
        }
    }
};

将文件导入要使用的组件或者视图中

import { Validator } from './validate.js'

然后在你需要的地方导入就搞定了

methods: {
            submit_click() {
                let errorMsg = this.validateFunc();
                if (errorMsg) {
                    alert(errorMsg);
                    return false
                }
            },
            validateFunc() {
              let that = this;
                let validator = new Validator();
                validator.add(that.userName, 'isNotEmpty', '用户名不能为空');
                validator.add(that.password, 'minLength:6', '密码长度不能小于6位');
                validator.add(that.phoneNumber, 'mobileFormat', '手机号码格式不正确');

                var errorMsg = validator.start(); // 获得效验结果
                return errorMsg; // 返回效验结果
            }
        }

总结

以上是脚本宝典为你收集整理的

vue验证中如何使用策略模式

全部内容,希望文章能够帮你解决

vue验证中如何使用策略模式

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过