vue获取el-form验证

时间:2022-09-28 悟空和大王人气:0

el-form-item 的验证状态在 validateState 属性中，该属性的值, 默认为：空字符串，验证通过为success, 验证失败为error

如果需要在一开始就要通过表单数据的验证状态，决定操作按钮（如：保存）是否禁用，那么需要注意两点：

需要通过如下方式获取验证状态

// this.$refs.validateForm 表示一个el-form
// this.$refs.validateForm.fields 表示所有el-form-item
// validateStateArr结果大概会是：['','success','error']
const validateStateArr = this.$refs.validateForm.fields.map((item) => {
    return item.validateState;
  })

有两种情况表示验证不通过:
- A情况：el-form-item的validateState为error.
- B情况：el-form-item存在验证规则，但validateState为空字符串.

示例代码:

<template>
  <div>
    <el-form
      ref="validateForm"
      :model="formData"
      @validate="onValidate"
      :status-icon="true"
    >
      <el-form-item label="姓名" :rules="ruleObj.name" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="状态" :rules="ruleObj.status" prop="status">
        <el-select v-model="formData.status">
          <el-option :value="1" label="启用"></el-option>
          <el-option :value="2" label="禁用"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="账号" :rules="ruleObj.account" prop="account">
        <el-input v-model="formData.account"></el-input>
      </el-form-item>
      <el-form-item
        label="开始日期"
        :rules="ruleObj.beginDate"
        prop="beginDate"
      >
        <el-date-picker
          type="date"
          v-model="formData.beginDate"
          placement="bottom-start"
          value-format="yyyy-MM-dd"
          @change="(values) => onChange(values, 'endDate')"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="结束日期" :rules="ruleObj.endDate" prop="endDate">
        <el-date-picker
          type="date"
          v-model="formData.endDate"
          placement="bottom-start"
          value-format="yyyy-MM-dd"
          @change="(values) => onChange(values, 'beginDate')"
        ></el-date-picker>
      </el-form-item>
    </el-form>
    <el-button type="primary" :disabled="!validatePass" @click="onSave">
      保存
    </el-button>
  </div>
</template>

<script>
export default {
  name: "StyleTextPage",
  data() {
    return {
      formData: {
        status: null,
        name: null,
        account: null,
        endDate: null,
        beginDate: null,
      },
      // 表单是否整体通过验证
      validatePass: false,
      // 账号ajax是否正处于验证中
      accountAjaxValidating: false,
      ruleObj: {
        endDate: [
          {
            validator: (rule, value, callback) => {
              if (this.formData.beginDate === this.formData.endDate) {
                return callback(new Error("开始日期不能等于结束日期"));
              } else {
                // 如果即在endDate验证成功时，立即触发beginDate的验证，且在beginDate验证成功时，立即触发endDate的验证会导致验证死循环，因此这种验证，只能在change事件中触发
                // this.$nextTick(() => {
                //   this.$refs.validateForm.validateField("beginDate");
                // });
                return callback();
              }
            },
            trigger: "change",
          },
        ],
        beginDate: [
          {
            validator: (rule, value, callback) => {
              if (this.formData.beginDate === this.formData.endDate) {
                return callback(new Error("开始日期不能等于结束日期"));
              } else {
                // 如果即在beginDate验证成功时，立即触发endDate的验证，且在endDate验证成功时，立即触发beginDate的验证会导致验证死循环，因此这种验证，只能在change事件中触发
                // this.$nextTick(() => {
                //   this.$refs.validateForm.validateField("endDate");
                // });
                return callback();
              }
            },
            trigger: "change",
          },
          { required: true, message: "必填", trigger: "change" },
        ],
        name: [],
        account: [
          { required: true, message: "必填" },
          {
            validator: (rule, value, callback) => {
              console.log("自定义账号校验");
              this.accountAjaxValidating = true;
              // 进入账号自定义验证方法，则将表单设置为验证不通过（用来保证setTimeout休眠期间，保存按钮是不可用的），最中是否通过由setTimeout的结果决定
              this.validatePass = false;
              setTimeout(() => {
                console.log("获取到验证结果");
                this.accountAjaxValidating = false;
                if (value === "111") {
                  return callback(new Error("账号已存在"));
                } else {
                  return callback();
                }
              }, 2000);
            },
            trigger: "blur",
          },
        ],
        status: [{ required: true, message: "必填" }],
      },
    };
  },
  mounted() {
    console.log(this.$refs.validateForm.fields);
    this.updateFormValidateStatus();
  },
  methods: {
    onChange(val, relValidateField) {
      console.log(val, relValidateField);
      this.$refs.validateForm.validateField(relValidateField);
    },
    updateFormValidateStatus() {
      let validateStateArr = [];
      if (this.$refs.validateForm) {
        validateStateArr = this.$refs.validateForm.fields.map((item) => {
          if (item.validateState) {
            return item.validateState;
          } else if (item.rules && item.rules.length > 0) {
            return "error";
          } else {
            return "success";
          }
        });
      }
      this.validatePass =
        !this.accountAjaxValidating &&
        validateStateArr.find((item) => item === "error") !== "error";
    },
    onValidate(...args) {
      console.log("args", args);
      this.updateFormValidateStatus();
    },
    async onSave() {
      try {
        await this.$refs.validateForm.validate();
      } catch (e) {
        console.error(e);
      }
    },
  },
};
</script>

<style scoped></style>

加载全部内容