element-ui 表单验证 多个 tabs 校验规则复用 bug All In One

element-ui 表单验证 多个 tabs 校验规则复用 bug All In One

多个 tabs 情况下，tab2 的校验规则应用到 tab1 ❌ bug

tab1, 校验规则是长度小于 1 字；❌
tab1, 校验规则是长度小于 6 字；✅

    <el-form-item
        label=""
        :prop="`creativeList.${creativeIndex}.descList.${index}.title`"
        :rules="[
            {
                required: false,
                // required: true,
                validator: (rule, value, callback) => descListValidator(rule, value, callback, index),
                // message: '自定义表单验证方法错误信息',
                trigger: 'blur',
            },
        ]">
        <CreativeTexts
            ref="creativeTextsRef1"
            titleType="descList"
            :titleIndex="index"
            :checkMinLength="false"
            :minTitleLength="1"
            :maxTitleLength="30"
            :creativeObj="creativeObj"
            :customWords="customWords"
            :sensitiveList="sensitiveList"
            :prohibitedList="prohibitedList"
            @validate-field="validateFieldByKey"
            @open-title-type="openTitleLibraryModal('descList', index)"
        />
    </el-form-item>

  <el-form-item
        label=""
        :prop="`creativeList.${creativeIndex}.descList.${index}.title`"
        :rules="[
            {
                required: true,
                validator: (rule, value, callback) => descListValidator(rule, value, callback, index),
                trigger: 'blur',
            },
        ]">
        <CreativeTexts
            ref="creativeTextsRef2"
            titleType="descList"
            :titleIndex="index"
            :checkMinLength="true"
            :minTitleLength="6"
            :maxTitleLength="30"
            :creativeObj="creativeObj"
            :customWords="customWords"
            :sensitiveList="sensitiveList"
            :prohibitedList="prohibitedList"
            @validate-field="validateFieldByKey"
            @open-title-type="openTitleLibraryModal('descList', index)"
        />
    </el-form-item>

        showError (name = '') {
            // console.log('组件名 =', name);
            let errorMsg = '';
            if(this.isEmpty) {
                errorMsg = `请输入${this.titleDesc}`;
            } else {
                if(this.isMaxError) {
                    errorMsg = `长度超过${this.maxTitleLength}字`;
                }
                if(this.checkMinLength && this.isMinError) {
                    errorMsg = `长度少于${this.minTitleLength}字`;
                }
            }
            return errorMsg;
        },

refs

---

---

©xgqfrms 2012-2025

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

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

---