vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue获取el-form验证

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

作者:悟空和大王

本文主要介绍了vue获取el-form的整体验证状态,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

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

示例代码:

<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的整体验证状态内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文