ElementUI表单验证手动触发

需求：用户输入时或者失去焦点时不校验，只在点击提交按钮是校验。

自定义校验规则的触发方式改成manul

template结构

    <el-form ref="formRef" :model="form" :rules="rules" label-width="210px">
      <el-form-item label="主轴编号" prop="axisCode" label-width="180px">
        <el-select
          :filterable="true"
          :disabled="
            props.rowData.action == 'view' || props.rowData.action == 'edit'
          "
          v-model="form.axisCode"
          placeholder="请选择主轴编号"
          clearable
        >
          <el-option
            v-for="(item, index) in axisCodeList"
            :key="index"
            :value="item"
            :label="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="评估技师" prop="technicianId">
        <el-select
          disabled
          :filterable="true"
          v-model="form.technicianId"
          placeholder="请选择评估技师"
          clearable
        >
          <el-option
            v-for="(item, index) in technicianIdList"
            :key="index"
            :value="item.userId"
            :label="item.nickName"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <el-button>提交</el-button>

vue3的校验

/** 检验，如果需要用户输入时校验，trigger改成change/blur，这样用户输入时校验，同时点击按钮的时候也会触发校验 */
const rules = {
  axisCode: [
    { required: true, message: "请输入主轴编号", trigger: "manul" },
    { min: 1, max: 30, message: "主轴编号在1-30个字符之间", trigger: "manul" },
  ],
  technicianId: [
    { required: true, message: "请选择评估技师", trigger: "manul" },
  ],
};
// 获取当前组件实例的
const { proxy } = getCurrentInstance();

/** 提交按钮 */
function submitForm() {
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      addAccessUnit(form).then((response) => {
          handleUpload(response.data);
          reset();
        });
    }
  });
}

vue2的校验

export default {
  data() {
    return {
      rules: {
        axisCode: [
          { required: true, message: "请输入主轴编号", trigger: "manul" },
          {
            min: 1,
            max: 30,
            message: "主轴编号在1-30个字符之间",
            trigger: "manul",
          },
        ],
        axisCode: [
          { required: true, message: "请选择主轴编号", trigger: "manul" },
        ],
        technicianId: [
          { required: true, message: "请选择评估技师", trigger: "manul" },
        ],
      },
    };
  },
  methods: {
    subform() {
      this.$refs["formRef"].validate((valid) => {
        if (valid) {
          addAccessUnit(form).then((response) => {
            handleUpload(response.data);
            reset();
          });
        }
      });
    },
  },
};

指定行的某个字段跳过验证

<template>
  <el-form ref="myForm">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名">
        <template slot-scope="scope">
          <el-form-item :prop="getFormItemProp(scope.row)" :rules="getFormItemRules(scope.row)">
            <el-input v-model="scope.row.name"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="validateForm">校验表单</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'Alice', isFixed: 1 },
        { name: 'Bob', isFixed: 2 },
        { name: 'Charlie', isFixed: 1 }
      ]
    };
  },
  methods: {
    getFormItemProp(row) {
      if (row.isFixed === 2) {
        return false;
      } else {
        return 'name';
      }
    },
    getFormItemRules(row) {
      const rules = [
        { required: true, message: '请输入姓名', trigger: 'manual' }
      ];
      if (row.isFixed === 2) {
        return [];
      } else {
        return rules;
      }
    },
    validateForm() {
      this.$refs.myForm.validate((valid) => {
        if (valid) {
          this.$message.success('表单校验通过！');
          // 校验通过时的操作
        } else {
          this.$message.error('表单校验未通过，请完善信息！');
          // 校验未通过时的操作
        }
      });
    }
  }
};
</script>

通过 slot-scope 属性，我们可以获取到当前行的数据。

在 getFormItemProp 方法中，我们根据当前行的 isFixed 值来动态设置 el-form-item 的 prop 属性。如果 isFixed 为 2，则返回 false，禁用校验；否则返回 'name'，启用校验。

在 getFormItemRules 方法中，我们根据当前行的 isFixed 值来动态设置校验规则。如果 isFixed 为 2，则返回空数组 []，表示不进行校验；否则返回包含必填规则的数组。

最后，在点击 "校验表单" 按钮时，调用 validate() 方法进行表单校验，并根据校验结果执行相应的操作。