項目場景：`

form表單驗證錯誤提示語太長無法全部展示，導致提示語折疊，如下圖：

解決方案：

最終效果：

附錄代碼：

需要返回錯誤信息的部分寫個空callback(new Error(' '));,用this.quotaNameErrFlag = true;來控制v-show="quotaNameErrFlag"展示錯誤提示，再給提示語寫個樣式

直接上熱乎的代碼：

<el-form class="quota-edit-form" ref="quotaForm" :rules="rule" :model="quotaFormData" label-width="125px" label-position="left">
  <el-form-item prop="quotaName" label="配額名稱">
     <el-input v-model="quotaFormData.quotaName" placeholder="請輸入" class="form-item-width" maxlength="32"></el-input>
     <div v-show="quotaNameErrFlag" class="quotaname-err-style">
          支持大小寫字母、數(shù)字、“-”、“.”、“/”、“(”、“)”、“（”、“）”、下劃線、中文，不超過32個字
     </div>
  </el-form-item>
  ......

在需要展示錯誤信息的輸入框下面寫個錯誤提示語句：

<div v-show="quotaNameErrFlag" class="quotaname-err-style">
    支持大小寫字母、數(shù)字、“-”、“.”、“/”、“(”、“)”、“（”、“）”、下劃線、中文，不超過32個字
</div>

定義控制變量：

quotaNameErrFlag: false,

需要返回錯誤信息的部分寫個空callback(new Error(' '));,用this.quotaNameErrFlag = true;看控制v-show="quotaNameErrFlag"展示錯誤提示，再給提示語寫個樣式

var validateName = (rule, value, callback) => {
      if (value) {
        if (value === this.quotaFormData.quotaCode) {
          callback(new Error('配額名稱與配額編碼不能相同'));
        }
        let reg = /^[0-9A-Za-z\u4e00-\u9fa5-./_（(）)]{0,32}$/;
        if (!reg.test(value)) {
          this.quotaNameErrFlag = true;
          callback(
            new Error(
              ' '
              // '支持大小寫字母、數(shù)字、“-”、“.”、“/”、“(”、“)”、“（”、“）”、下劃線、中文，不超過32個字'
            )
          );
        } else {
          this.quotaNameErrFlag = false;
        }
        callback();
      } else {
        callback(new Error('請輸入配額名稱'));
      }
    };

樣式：

.quotaname-err-style {
  color: #f56c6c;
  font-size: 12px;
  width: 450px;
  margin-bottom: -19px;
  line-height: 18px;
}

附加代碼：

export default {
  data() {
    var validateName = (rule, value, callback) => {
      if (value) {
        if (value === this.quotaFormData.quotaCode) {
          callback(new Error('配額名稱與配額編碼不能相同'));
        }
        let reg = /^[0-9A-Za-z\u4e00-\u9fa5-./_（(）)]{0,32}$/;
        if (!reg.test(value)) {
          this.quotaNameErrFlag = true;
          callback(
            new Error(
              ' '
              // '支持大小寫字母、數(shù)字、“-”、“.”、“/”、“(”、“)”、“（”、“）”、下劃線、中文，不超過32個字'
            )
          );
        } else {
          this.quotaNameErrFlag = false;
        }
        callback();
      } else {
        callback(new Error('請輸入配額名稱'));
      }
    };
    var validateCode = (rule, value, callback) => {
      if (value) {
        if (value === this.quotaFormData.quotaName) {
          callback(new Error('配額編碼與配額名稱不能相同'));
        }
        let reg = /^[0-9A-Za-z\u4e00-\u9fa5-._]{0,32}$/;
        if (!reg.test(value)) {
          callback(
            new Error(
              '支持大小寫字母、數(shù)字、“-”、“.”、下劃線、中文，不超過32個字'
            )
          );
        }
        callback();
      } else {
        callback(new Error('請輸入配額編碼'));
      }
    };
    var checkLevel = (rule, value, callback) => {
      var reg = /^[0-9]{1}$/;
      if (!value) {
        return callback();
      } else if (!reg.test(value)) {
        return callback(new Error('配額級別只能為一位數(shù)字'));
      } else {
        return callback();
      }
    };
    return {
     
      rule: {
        quotaName: [
          {
            required: true,
            validator: validateName,
            trigger: ['blur', 'change'],
          },
        ],
        quotaCode: [
          {
            required: true,
            validator: validateCode,
            trigger: ['blur', 'change'],
          },
        ],
        regionId: [
          { required: true, message: '請選擇節(jié)點', trigger: 'change' },
        ],
        productCode: [
          { required: true, message: '請選擇產(chǎn)品', trigger: 'change' },
        ],
        limitValue: [
          { required: true, message: '請輸入配額數(shù)量', trigger: 'blur' },
          { pattern: /^\d+$/, message: '配額數(shù)量為非負整數(shù)' },
        ],
        level: [{ validator: checkLevel, trigger: 'blur' }],
      },
      rules: {
        productCode: [
          { required: true, message: '請選擇產(chǎn)品', trigger: 'blur' },
        ],
      },
      formLabelWidth: '120px',
      quotaNameErrFlag: false,
    };
  },