form表单验证错误提示语太长无法全部展示的问题

项目场景：`

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">
          支持大小写字母、数字、“-”、“.”、“/”、“(”、“)”、“（”、“）”、下划线、中文，不超过32个字
     </div>
  </el-form-item>
  ......

在需要展示错误信息的输入框下面写个错误提示语句：

<div v-show="quotaNameErrFlag" class="quotaname-err-style">
    支持大小写字母、数字、“-”、“.”、“/”、“(”、“)”、“（”、“）”、下划线、中文，不超过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(
              ' '
              // '支持大小写字母、数字、“-”、“.”、“/”、“(”、“)”、“（”、“）”、下划线、中文，不超过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(
              ' '
              // '支持大小写字母、数字、“-”、“.”、“/”、“(”、“)”、“（”、“）”、下划线、中文，不超过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(
              '支持大小写字母、数字、“-”、“.”、下划线、中文，不超过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('配额级别只能为一位数字'));
      } 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: '请选择节点', trigger: 'change' },
        ],
        productCode: [
          { required: true, message: '请选择产品', trigger: 'change' },
        ],
        limitValue: [
          { required: true, message: '请输入配额数量', trigger: 'blur' },
          { pattern: /^\d+$/, message: '配额数量为非负整数' },
        ],
        level: [{ validator: checkLevel, trigger: 'blur' }],
      },
      rules: {
        productCode: [
          { required: true, message: '请选择产品', trigger: 'blur' },
        ],
      },
      formLabelWidth: '120px',
      quotaNameErrFlag: false,
    };
  },