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

 更新时间:2022年08月10日 09:42:26   作者:悟空和大王  
本文主要介绍了vue获取el-form的整体验证状态,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

相关文章

  • vue2路由方式--嵌套路由实现方法分析

    vue2路由方式--嵌套路由实现方法分析

    这篇文章主要介绍了vue2嵌套路由实现方法,结合实例形式分析了vue2嵌套路由基本实现方法与操作注意事项,需要的朋友可以参考下
    2020-03-03
  • vue-cli的webpack模板项目配置文件分析

    vue-cli的webpack模板项目配置文件分析

    本篇文章主要对vue-cli的webpack模板项目配置文件进行分析。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • 利用Vue.js实现checkbox的全选反选效果

    利用Vue.js实现checkbox的全选反选效果

    最近用vue做了两个项目,都需要实现全选反选的功能,所以想着记录下分享给大家,方便自己或者有需要的朋友们参考讲学习,所以下面这篇文章主要介绍了利用Vue.js实现checkbox的全选反选效果,需要的朋友可以一起来学习学习。
    2017-01-01
  • vue如何将v-for中的表格导出来

    vue如何将v-for中的表格导出来

    这篇文章主要介绍了vue如何将v-for中的表格导出来,需要的朋友可以参考下
    2018-05-05
  • Vue 列表上下过渡效果的实例代码

    Vue 列表上下过渡效果的实例代码

    最近有个需求,一个列表上下移动要有简单过渡效果。本文通过实例代码给大家介绍Vue 列表上下过渡效果,需要的朋友可以参考下
    2019-06-06
  • vue3.0实现复选框组件的封装

    vue3.0实现复选框组件的封装

    这篇文章主要为大家详细介绍了vue3.0实现复选框组件的封装代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vuex刷新之后数据丢失,数据持久化,vuex-persistedstate问题

    vuex刷新之后数据丢失,数据持久化,vuex-persistedstate问题

    这篇文章主要介绍了vuex刷新之后数据丢失,数据持久化,vuex-persistedstate问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • vuex 中插件的编写案例解析

    vuex 中插件的编写案例解析

    Vuex 的 store 接受 plugins 选项,这个选项暴露出每次 mutation 的钩子。Vuex 插件就是一个函数,这篇文章主要介绍了vuex 中插件的编写案例,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • vuejs简单验证码功能完整示例

    vuejs简单验证码功能完整示例

    这篇文章主要介绍了vuejs简单验证码功能,结合完整实例形式分析了vue.js验证码的生成、显示、校验等相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • Vue导出页面为PDF格式的实现思路

    Vue导出页面为PDF格式的实现思路

    这篇文章主要介绍了Vue导出页面为PDF格式的实现思路,其实思路也很简单,就是将页面转换成图片格式.然后通过图片的base64码.生成PDF..感兴趣的朋友跟随脚本之家小编一起看看吧
    2018-07-07

最新评论