vue 表单验证 rule message bug All In One

vue 表单验证 rule message bug All In One

有 rules message ❌

    <el-form-item
        class="is-required"
        label="应用名"
        prop="appName"
        :rules="[
            {
                required: true,
                message: '请输入应用名',
                trigger: 'blur',
                validator: validateAppName,
            },
        ]">
        <el-input
            style="width: 300px;"
            placeholder="4-20个字符，中文占两个字符"
            v-model="ruleForm.appName"
            @change="appNameChange"
        />
    </el-form-item>

    appNameChange (value) {
        if(value) {
            this.validateFieldByKey('appName');
        }
    },
    validateAppName  (rule, value, callback) {
        const len = Util.getByteLen(value.trim());
        const wordList = this.prohibitedList.filter(item => value.includes(item));
        if (value === '') {
            // callback(new Error(rule.message));
            callback(new Error('请输入应用名'));
        } else if ( len < 4 || len > 20) {
            callback(new Error('4-20个字符，中文占两个字符，请正确输入'));
        } else if (wordList.length > 0) {
            callback(new Error(`包含违禁词：${wordList.join('、')}`));
        } else {
            callback();
        };
    },

注释掉 rules message ✅

    <el-form-item
        class="is-required"
        label="应用名"
        prop="appName"
        :rules="[
            {
                required: true,
                // message: '请输入应用名',
                trigger: 'blur',
                validator: validateAppName,
            },
        ]">
        <el-input
            style="width: 300px;"
            placeholder="4-20个字符，中文占两个字符"
            v-model="ruleForm.appName"
            @change="appNameChange"
        />
    </el-form-item>

    appNameChange (value) {
        if(value) {
            this.validateFieldByKey('appName');
        }
    },
    validateAppName  (rule, value, callback) {
        const len = Util.getByteLen(value.trim());
        const wordList = this.prohibitedList.filter(item => value.includes(item));
        if (value === '') {
            // callback(new Error(rule.message));
            callback(new Error('请输入应用名'));
        } else if ( len < 4 || len > 20) {
            callback(new Error('4-20个字符，中文占两个字符，请正确输入'));
        } else if (wordList.length > 0) {
            callback(new Error(`包含违禁词：${wordList.join('、')}`));
        } else {
            callback();
        };
    },

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---