vue获取el-form的整体验证状态

Celandine ·

更新时间:2024-09-20

· 657 次阅读

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>

到此这篇关于vue获取el-form的整体验证状态的文章就介绍到这了,更多相关vue获取el-form的整体验证状态内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！

VUE form

1024 个赞