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

lvzishen 发布于2019-08-20 14:36 / 1058人阅读

摘要：根据网上现有的资料改的适用的策略验证，如果还需要别的验证直接自己添加规则就行了。

根据网上现有的资料改的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; // 返回效验结果
            }
        }

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81786.html

JavaScript 设计模式系列 - 策略模式与动态表单验证

摘要：策略模式又称政策模式，其定义一系列的算法，把它们一个个封装起来，并且使它们可以互相替换。的表单具有表单验证功能，用来校验用户输入的表单内容。实际需求中表单验证项一般会比较复杂，所以需要给每个表单项增加自定义校验方法。 showImg(https://segmentfault.com/img/remote/1460000020135990); 策略模式（Strategy Pattern...

宋华 2019-08-26 14:06 评论0 收藏0
2019年7-8月份前端面试题

摘要：站点接收到请求后，对请求进行验证，并确认是受害者的凭证，误以为是无辜的受害者发送的请求。函数内部语句返回的值，会成为方法回调函数的参数。记录我最近面试缺漏的知识点 css 1.bootstrap如何实现手机PC端自适应媒体查询 2.flex布局父容器：（记得常用属性） display:flex flex-direction： row | row-reverse | column ...

shevy 2019-08-26 14:05 评论0 收藏0
5分钟即可掌握的前端高效利器：JavaScript 策略模式

摘要：策略模式由两部分构成一部分是封装不同策略的策略组，另一部分是。策略模式的典型应用场景是表单校验中，对于校验规则的封装。然而图像的压缩及上传错误处理等部分是公用的。遂考虑使用策略模式封装。浅谈 JavaScript 中策略模式的使用：什么是设计模式什么是策略模式策略模式在 JavaScript 中的应用（使用策略模式封装百度AI识别调用）策略模式在 Vue 组件封装中的应用（...

BlackFlagBin 2019-08-23 11:48 评论0 收藏0
前端资源收集整理

摘要：工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。 Github版本：Front-End Resource Collection 前端相关资源汇总学习指导精华文章 Web前端的路该怎么走？：文章超长，但是干货超级多，值得反复精读！听说2017你想写前端？：适合于已经度过了小白阶...

awesome23 2019-08-20 18:23 评论0 收藏0
前端资源收集整理

摘要：工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。 Github版本：Front-End Resource Collection 前端相关资源汇总学习指导精华文章 Web前端的路该怎么走？：文章超长，但是干货超级多，值得反复精读！听说2017你想写前端？：适合于已经度过了小白阶...

antyiwei 2019-08-29 13:03 评论0 收藏0