Utilisation du plug-in de validation de formulaire personnalisé pour Element UI

Cette fois, je vais vous présenter l'utilisation du plug-in Validation de formulaire personnalisé d'Element UI. Quelles sont les précautions lors de l'utilisation du plug-in de validation de formulaire personnalisé d'Element UI ? est un cas pratique, jetons un coup d'oeil.

Code principal du plug-in :

//vdt.jsconst 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 };
        }
    };

Utilisation (cliquez pour voir l'effet) :

<!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(&#39;ruleForm&#39;)">立即创建</el-button>
                <el-button @click="resetForm(&#39;ruleForm&#39;)">重置</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: &#39;#app&#39;,        data: {            ruleForm: {                name: &#39;&#39;,                region: &#39;&#39;,                date1: &#39;&#39;,                date2: &#39;&#39;,                delivery: false,                type: [],                resource: &#39;&#39;,                desc: &#39;&#39;
            },            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(&#39;验证成功!&#39;);
                    } else {
                        alert(&#39;验证失败!!&#39;);                        return false;
                    }
                });
            },
            resetForm(formName) {                this.$refs[formName].resetFields();
            }
        }
    })</script></html>

Je pense que vous avez lu le cas dans cet article. Vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe : Comment envoyer des e-mails via la boîte aux lettres qq en python3

Comment nodejs implémente une démo d'authentification unique via jsonp

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!