el-form 清除表单验证结果

• 总是遇到的一个表单验证问题，怕下次忘了，在这里记录一下

问题

• 编辑页面时总是在刚进入页面显示触发表单验证结果，由于此时并未提交，影响用户体验感

• 效果图如下：

• 代码实现：

<template>
            <el-form
                ref="dateForm"
                :`rules`="`rules`"
                :model="workorderDetail"
                label-position="right"
                label-width="128px"
                class="form"
                size="small"
              >
                <div class="info-box">
                  <el-form-item label="工单类型:" prop="orderType">
                    <el-select
                      v-model="workorderDetail.orderType"
                      clearable
                      class="editinput"
                      size="small"
                      placeholder="请选择"
                      :disabled="initState !== 0"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="工单完成定义:" prop="actualQuantity">
                    <el-input
                      v-model="workorderDetail.actualQuantity"
                      placeholder="请输入内容"
                      class="editinput"
                      clearable
                      :disabled="initState !== 0"
                    />
                  </el-form-item>
                  <el-form-item label="优先级:" prop="priority">
                    <el-input
                      v-model="workorderDetail.priority"
                      placeholder="请输入内容"
                      class="editinput"
                      clearable
                      :disabled="initState !== 0"
                    />
                  </el-form-item>
                  <el-form-item label="备注:" prop="remark">
                    <el-input
                      v-model="workorderDetail.remark"
                      placeholder="请输入内容"
                      class="editinput"
                      clearable
                      :disabled="initState !== 0"
                    />
                  </el-form-item>
                </div>
              </el-form>
</template>
import { workorderData } from "@/api/workorder-model";
export default {
  name: "",
  components: {},
  data() {
    return {
      `rules`: {
        orderType: [
          {
            required: true,
            message: "该参数是必填项",
            trigger: ["blur", "change"],
          },
        ],
        actualQuantity: rule_number("请输入数字", ["change", "blur"]),
        priority: rule_number("请输入正整数", ["change", "blur"]),
      },
      workorderDetail: {
        remark: "",
        orderType: "",
        priority: "",
        actualQuantity: "",
      },
    };
  },
  mounted() {
    this.getworkorderData(this.$route.params.id);
  },
  methods: {
    getworkorderData(id) {
      workorderData(id).then((res) => {
        if (res.data.code === "200") {
            // 将查询结果赋值到表单
          this.workorderDetail = res.data.data;
        }
      });
    },
  },
};

导致这个问题的原因

• 由于在 rules 验证规则内触发条件（trigger）添加了 change ，会在值改变的时候触发验证规则，所以在页面进入对表单 重新赋值 导致值改变，触发了 change 事件，从而触发验证规则

解决办法（两种办法）

1、将验证规则 rules 修改为只在 blur 条件下触发，去掉触发条件（trigger）里的 change ，这样就避免了赋值时触发 change 事件，导致验证表单。

• 如图所示：

`rules`: {
        orderType: [
          {
            required: true,
            message: "该参数是必填项",
            trigger: ["blur"],
          },
        ],
        actualQuantity: rule_number("请输入数字", ["blur"]),
        priority: rule_number("请输入正整数", ["blur"]),
      },

2、在不改变 rules 的情况下，在对表单进行赋值之后使用 clearValidate 方法移除校验结果，此处应注意 clearValidate 是对 DOM 的操作，需要在 nextTick 内实现，以避免不生效的问题

• 如图所示：

methods: {
    getworkorderData(id) {
      workorderData(id).then((res) => {
        if (res.data.code === "200") {
            // 将查询结果赋值到表单
          this.workorderDetail = res.data.data;
            //  使用clearValidate移除表单验证结果
          this.$nextTick(() => {
            this.$refs["dateForm"].clearValidate();
          });
        }
      });
    },
  },

最终效果

• 以上两种方法都可实现以下效果：进入编辑页面就不会因为触发验证规则一开始就显示表单验证结果