Element UI自定义表单验证插件

Element UI自定义表单验证
官方示例参考:https://jsfiddle.net/api/post/library/pure/

插件主要代码:

//vdt.js
const VDT = {
        messages: {
            required: "这是必填字段",
            remote: "请修正此字段",
            email: "请输入有效的电子邮件地址",
            url: "请输入有效的网址",
            date: "请输入有效的日期",
            dateISO: "请输入有效的日期 (YYYY-MM-DD)",
            number: "请输入有效的数字",
            digits: "只能输入数字",
            creditcard: "请输入有效的信用卡号码",
            equalTo: "你的输入不相同",
            extension: "请输入有效的后缀",
            minlength: "输入字数过短",
            maxlength: "输入字数过长",
            mphone: "请输入正确的手机号格式",
            tphone: "请输入正确的电话格式",
            postal: "请输入正确的邮编格式"
        },
        required: function (value, param) {
            return value != undefined ? (value.toString().length > 0) : false;
        },
        email: function (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: function (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);
        },
        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]';
        },
        minlength: function (value, param) {
            return value.length >= param;
        },
        maxlength: function (value, param) {
            return value.length <= param;
        },
        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);
        },
        vdata: function (value, config) {//返回正确错误对象 提示 与结果
            for (var fun in config) {
                if (typeof this[fun] == "function" && (!(config[fun].param == undefined ? this[fun](value) : this[fun](value, config[fun].param)))) {
                    if (typeof config[fun] == "object") {
                        return { msg: config[fun].msg ? config[fun].msg : this.messages[fun], result: false };
                    } else {
                        return { msg: typeof config[fun] == "string" ? config[fun] : this.messages[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 };
        }
    };

使用(点击查看效果):

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
</head>

<body>
    <div id="app">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="活动名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="活动区域" prop="region">
                <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="活动时间" required>
                <el-col :span="11">
                    <el-form-item prop="date1">
                        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                    <el-form-item prop="date2">
                        <el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="即时配送" prop="delivery">
                <el-switch on-text="" off-text="" v-model="ruleForm.delivery"></el-switch>
            </el-form-item>
            <el-form-item label="活动性质" prop="type">
                <el-checkbox-group v-model="ruleForm.type">
                    <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                    <el-checkbox label="地推活动" name="type"></el-checkbox>
                    <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                    <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="特殊资源" prop="resource">
                <el-radio-group v-model="ruleForm.resource">
                    <el-radio label="线上品牌商赞助"></el-radio>
                    <el-radio label="线下场地免费"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="活动形式" prop="desc">
                <el-input type="textarea" v-model="ruleForm.desc"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</body>
<script src="./vdt.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            ruleForm: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            rules: {
                name: (rule, value, callback) => {
                    var vdt = VDT.vdata(value, { "required": { msg: "请输入活动名称" }, "maxlength": { param: "5", msg: "最大值不能超过5位" }, "minlength": { param: "3", msg: "最小值不能低于3位" } });
                    if (!vdt.result) {
                        callback(new Error(vdt.msg));
                    } else {
                        callback();
                    }
                },
                region: (rule, value, callback) => {
                    var vdt = VDT.vdata(value, { "required":{}} );
                    if (!vdt.result) {
                        callback(new Error(vdt.msg));
                    } else {
                        callback();
                    }
                },
                date1:(rule, value, callback) => {
                    var vdt = VDT.vdata(value, { "required": { msg: "请选择日期" } });
                    if (!vdt.result) {
                        callback(new Error(vdt.msg));
                    } else {
                        callback();
                    }
                },
                date2:(rule, value, callback) => {
                    var vdt = VDT.vdata(value, { "required": { msg: "请选择日期" } });
                    if (!vdt.result) {
                        callback(new Error(vdt.msg));
                    } else {
                        callback();
                    }
                }, 
                type:(rule, value, callback) => {
                    var vdt = VDT.vdata(value, { "required": { msg: "请至少选择一个活动性质" } });
                    if (!vdt.result) {
                        callback(new Error(vdt.msg));
                    } else {
                        callback();
                    }
                },
                resource: (rule, value, callback) => {
                    var vdt = VDT.vdata(value, { "required": { msg: "请选择活动资源" } });
                    if (!vdt.result) {
                        callback(new Error(vdt.msg));
                    } else {
                        callback();
                    }
                },
                desc: (rule, value, callback) => {
                    var vdt = VDT.vdata(value, { "required": { msg: "请填写活动形式" } });
                    if (!vdt.result) {
                        callback(new Error(vdt.msg));
                    } else {
                        callback();
                    }
                }
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('验证成功!');
                    } else {
                        alert('验证失败!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    })
</script>
</html>