Element UI自定義表單驗證 公共提取

主要代碼:

util文件夾下validate.js 文件

export const VDT = {
    messages:{
        required: "這是必填字段",
        email: "請輸入有效的電子郵件地址",
        url: "請輸入有效的網址",
        minlength: "輸入字數太短",
        maxlength: "輸入字數過長",
        date: "請輸入有效的日期",
        dateISO: "請輸入有效的日期 (YYYY-MM-DD)",
        number: "請輸入有效的數字",
        digits: "只能輸入數字",
        creditcard: "請輸入有效的信用卡號碼",
        equalTo: "你的輸入不相同",
        extension: "請輸入有效的後綴",
        mphone: "請輸入正確的手機號格式",
        tphone: "請輸入正確的電話格式",
        postal: "請輸入正確的郵編格式"
    },
    required:  (value, param) => {
        return value != undefined ? (value.toString().length > 0) : false
    },
    email: (value) => {
        return /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(value)
    },
    url: (value) => {
        return /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(value)
    },
    minlength:  (value, param) => {
        return value.length >= param
    },
    maxlength:  (value, param) => {
        return value.length <= param
    },
    date: function (value) {
        return !/Invalid|NaN/.test(new Date(value).toString());
    },
    dateISO: function (value) {
        return /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/.test(value);
    },
    number: function (value) {
        return /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value);
    },
    digits: function (value) {
        return /^\d+$/.test(value);
    },
    isarr: function (o) {
        return Object.prototype.toString.call(o) == '[object Array]';
    },
    rangelength: function (value, param) {
        var length = $.isArray(value) ? value.length : this.getLength(value);
        return (length >= param[0] && length <= param[1]);
    },
    min: function (value, param) {
        return value >= param;
    },
    max: function (value, param) {
        return value <= param;
    },
    range: function (value, param) {
        return (value >= param[0] && value <= param[1]);
    },
    equalTo: function (value, param) {
        return value === param;
    },
    mphone: function (value) {
        return /^1[3|4|5|8][0-9]\d{4,8}$/.test(value);
    },
    tphone: function (value) {
        return /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/.test(value);
    },
    postal: function (value) {
        return /^[a-zA-Z0-9 ]{3,12}$/g.test(value);
    }

}

export const VDATA = (value,config) => {
    for (let fun in config) {
        if (typeof VDT[fun] == "function" && (!(config[fun].param == undefined ? VDT[fun](value) : VDT[fun](value, config[fun].param)))) { 
            if (typeof config[fun] == "object") {
               return { msg: config[fun].msg ? config[fun].msg : VDT[fun], result: false };
            } else {
                return { msg: typeof config[fun] == "string" ? config[fun] :VDT[fun], result: false };
            }

        } else if (typeof config[fun] == "function") {
            var tmpr = config[fun](value);
            if (tmpr != "" && tmpr != undefined && tmpr != false) {
                return { msg: tmpr, result: false }
            }
        }
    }

    return {msg:"" , result:true}
}

頁面邏輯代碼

import  {VDT ,VDATA} from '@/util/validate'
  export default {
      data() {
        return {
            rules: {
                    name:[
                        { required: true, message: '請輸入名稱', trigger: 'blur' },
                    ],
                    // urlPath: [
                    //     { required: true, message: '請輸入IOT路徑', trigger: 'blur' },
                    //     { min: 3, max: 200, message: '長度在 3 到 200 個字符', trigger: 'blur' }
                    // ],
                    IntervalType: [
                        { required: true, message: '請選擇週期', trigger: 'change' }
                    ],
                    type: [
                        { required: true, message: '請選擇類型', trigger: 'change' }
                    ],
                    time:[
                        { type: 'date', required: true, message: '請輸入定時計劃', trigger: 'change' }
                    ],
                    urlPath: [
                          { 
                             validator: (rule,value,callback) => {
                                let vdt = VDATA(value,{"required" : { msg : "請輸入URL路徑"}, "url" : {msg:"請輸入有效URL路徑"}, "maxlength":{param: "200", msg: "最大值不能超過200個字符"}})
                               if (!vdt.result) {
                                    callback(new Error(vdt.msg))
                                }else{
                                    callback();
                                }
                           },
                             trigger: 'blur' 
                           }
                    ]
                   
                },
        }
    }
}，
 methods: {
     submitAddForm(formName) {
          this.$refs[formName].validate((valid) => {
                    if (valid) { 
                        
                    } else {
                        return false;
                    }
                });
    }
}