ElFormItem使用v-if导致校验异常问题

环境信息

1
2
vue: `2.6.14`
element-ui: `2.15.12`

问题描述

当使用v-if控制多个ElFormItem显隐时，表单校验不生效。

不生效体现在两点:

  • 1.使用elform.validate显式调用无效
  • 2.blur/change无法触发的校验

这里有几个关键:

  • 使用v-if控制
  • 多个ElFormItem
  • 先展示的是不进行校验的ElFormItem
  • 不进行校验的ElFormItem数量多余进行校验的ElFormItem

原因

使用elform.validate显式调用无效

先展示的ElFormItem不带prop导致mounted阶段没有向ElForm注册自身示例.

v-if组件缓存,导致显式调用elForm.validate找不到后面展示的ElFormItem示例

针对这个问题直接在el-form-item标签上添加prop即可解决

blur/change无法触发的校验

v-if组件缓存,导致复用了先前展示的ElFormItem实例,而由于先前展示的ElFormItem是非必填的,
所以复用的实例并没有绑定el.form.blur与el.form.change事件(ElFormItem的addValidateEvents方法),进而导致blur/change无法触发的校验

针对这个问题直接在el-form-item标签上添加key即可解决

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
  >
    <!-- <el-form-item
      label="活动名称2"
      prop="name2"
      key="name2"
      v-if="show2"
    >
      <el-input v-model="ruleForm.name2" />
    </el-form-item>
    <el-form-item
      label="活动名称5"
      prop="name5"
      key="name5"
      v-if="show2"
    >
      <el-input v-model="ruleForm.name5" />
    </el-form-item> -->
    <el-form-item
      label="活动名称2"
      prop="name2"
      v-if="show2"
    >
      <el-input v-model="ruleForm.name2" />
    </el-form-item>
    <el-form-item
      label="活动名称5"
      prop="name5"
      v-if="show2"
    >
      <el-input v-model="ruleForm.name5" />
    </el-form-item>
    <el-form-item
      label="活动名称3"
      prop="name3"
      v-if="show34"
    >
      <el-input v-model="ruleForm.name3" />
    </el-form-item>
    <el-form-item
      label="活动名称4"
      prop="name4"
      v-if="show34"
    >
      <el-input v-model="ruleForm.name4" />
    </el-form-item>
    <el-button
      type="primary"
      @click="show2=!show2;show34=!show34"
    >
      SHOW2-SHOW34
    </el-button>
    <el-button
      type="primary"
      @click="submitForm('ruleForm')"
    >
      提交
    </el-button>
    <el-button @click="resetForm('ruleForm')">
      重置
    </el-button>
  </el-form>
</template>

<script>
export default {
  name: 'Root',
  data () {
    return {
      show2: true,
      show34: false,
      ruleForm: {
        name1: '',
        name2: '',
        name3: '',
        name4: ''
      },
      rules: {
        name3: [
          { required: true, message: '请输入活动名称3', trigger: 'blur' }
        ],
        name4: [
          { required: true, message: '请输入活动名称4', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.ruleForm = { ...this.$options.data().ruleForm }
      this.$refs[formName].resetFields()
    }
  }
}
</script>