VUE2表单检验及提示的消除

表单的检验规则如下：

rules: {
        brandId: [
          { required: true, message: "品牌不能为空", trigger: "blur" }
        ],
        seriesId: [
          { required: true, message: "系列不能为空", trigger: "blur" }
        ],
        levelName: [
          { required: true, message: "等级名称不能为空", trigger: "blur" }
        ],
        firstLetter: [
          { required: true, message: "检索首字母不能为空", trigger: "blur" }
        ],

      }

上面的检验存在局限性，当表单数据发生变化时，不能灵活做到提示文字的消除。可通过以下方式来实现：

1. 使用 trigger: 'change' 或 trigger: 'input'

默认情况下，trigger: 'blur' 会在输入框失去焦点时触发校验。如果你希望输入内容时实时校验，可以将 trigger 改为 'change' 或 'input'。

rules: {
  brandId: [
    { required: true, message: "品牌不能为空", trigger: "change" } // 实时校验
  ],
  seriesId: [
    { required: true, message: "系列不能为空", trigger: "change" } // 实时校验
  ],
  levelName: [
    { required: true, message: "等级名称不能为空", trigger: "change" } // 实时校验
  ],
  firstLetter: [
    { required: true, message: "检索首字母不能为空", trigger: "change" } // 实时校验
  ],
}

2. 使用 validateField 方法手动触发校验

如果你希望在数据变化时手动触发校验，可以使用 validateField 方法。例如，在输入框的 @input 事件中调用该方法。

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="品牌" prop="brandId">
      <el-input v-model="form.brandId" @input="validateField('brandId')"></el-input>
    </el-form-item>
    <el-form-item label="系列" prop="seriesId">
      <el-input v-model="form.seriesId" @input="validateField('seriesId')"></el-input>
    </el-form-item>
    <el-form-item label="等级名称" prop="levelName">
      <el-input v-model="form.levelName" @input="validateField('levelName')"></el-input>
    </el-form-item>
    <el-form-item label="检索首字母" prop="firstLetter">
      <el-input v-model="form.firstLetter" @input="validateField('firstLetter')"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        brandId: "",
        seriesId: "",
        levelName: "",
        firstLetter: "",
      },
      rules: {
        brandId: [
          { required: true, message: "品牌不能为空", trigger: "blur" }
        ],
        seriesId: [
          { required: true, message: "系列不能为空", trigger: "blur" }
        ],
        levelName: [
          { required: true, message: "等级名称不能为空", trigger: "blur" }
        ],
        firstLetter: [
          { required: true, message: "检索首字母不能为空", trigger: "blur" }
        ],
      }
    };
  },
  methods: {
    validateField(prop) {
      this.$refs.form.validateField(prop);
    }
  }
};
</script>

3. 使用 watch 监听表单数据变化

如果你不想在每个输入框上绑定 @input 事件，可以通过 watch 监听表单数据的变化，并调用 validateField 方法。

export default {
  data() {
    return {
      form: {
        brandId: "",
        seriesId: "",
        levelName: "",
        firstLetter: "",
      },
      rules: {
        brandId: [
          { required: true, message: "品牌不能为空", trigger: "blur" }
        ],
        seriesId: [
          { required: true, message: "系列不能为空", trigger: "blur" }
        ],
        levelName: [
          { required: true, message: "等级名称不能为空", trigger: "blur" }
        ],
        firstLetter: [
          { required: true, message: "检索首字母不能为空", trigger: "blur" }
        ],
      }
    };
  },
  watch: {
    "form.brandId": function (newVal) {
      this.$refs.form.validateField("brandId");
    },
    "form.seriesId": function (newVal) {
      this.$refs.form.validateField("seriesId");
    },
    "form.levelName": function (newVal) {
      this.$refs.form.validateField("levelName");
    },
    "form.firstLetter": function (newVal) {
      this.$refs.form.validateField("firstLetter");
    },
  }
};

4. 使用 clearValidate 方法清除校验状态

如果输入框的值已经合法，你可以调用 clearValidate 方法清除校验状态。

methods: {
  validateField(prop) {
    this.$refs.form.validateField(prop, (errorMessage) => {
      if (!errorMessage) {
        this.$refs.form.clearValidate(prop); // 清除校验状态
      }
    });
  }
}

5. 使用 async-validator 的 validate 方法

如果你需要更灵活的控制，可以直接使用 async-validator 的 validate 方法。

import Schema from "async-validator";

const descriptor = {
  brandId: { required: true, message: "品牌不能为空" },
  seriesId: { required: true, message: "系列不能为空" },
  levelName: { required: true, message: "等级名称不能为空" },
  firstLetter: { required: true, message: "检索首字母不能为空" },
};

const validator = new Schema(descriptor);

methods: {
  validateField(prop) {
    validator.validate({ [prop]: this.form[prop] }, (errors) => {
      if (errors) {
        // 显示错误信息
      } else {
        // 清除错误信息
      }
    });
  }
}