vue驗證中如何使用策略模式

lvzishen 發布于2019-08-20 14:36 / 1059人閱讀

摘要：根據網上現有的資料改的適用的策略驗證，如果還需要別的驗證直接自己添加規則就行了。

根據網上現有的資料改的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; // 返回效驗結果
            }
        }

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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