element-ui表单验证可添加规则_el表单增加校验规则

近日在公司使用ElementUI开发表单，遇到验证问题我在这里记录下。
需求：能手动添加规则，并且表单金额之间是需要相互限制的，规则最多添加3条。多余的话就不说了下述代码能够直接使用。
添加规则并进行表单验证效果图：

<template>
  <div class="content-validate">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px">
      <div v-for="(item,index) in ruleForm.rules" :key="index">
        <el-form-item label="預算金额" :prop="'rules[' + index + '].budget'">
          <el-input type="text" v-model="item.budget" clearable class="inputWidth"></el-input>
        </el-form-item>

        <el-form-item label="分配区间" required>
          <el-form-item :prop="'rules[' + index + '].min'" style="display:inline-block;">
            <el-input type="text" v-model="item.min" clearable class="inputWidth"></el-input>
          </el-form-item>
          <span>至</span>
          <el-form-item :prop="'rules[' + index + '].max'" style="display:inline-block;">
            <el-input type="text" v-model="item.max" clearable class="inputWidth"></el-input>
          </el-form-item>
        </el-form-item>
      </div>
      <el-form-item>
        <el-button type="success" @click="addRule(1)" size="small">添加规则</el-button>
        <el-button type="danger" @click="addRule(0)" size="small">删除规则</el-button>
        <el-button type="primary" @click="submitForm" size="small">提交活动</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 表单的真实数据
      ruleForm: {
        rules: [
          {
            budget: '',
            min: '',
            max: ''
          }
        ]
      },
      // 模板数据用于初始化
      BasesRuleForm: {
        rules: [
          {
            budget: '',
            min: '',
            max: ''
          }
        ]
      },
      rules: {
        'rules[0].max': [
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请输入最大金额'))
              } else if (value > Number(this.ruleForm.rules[0].budget)) {
                callback(new Error('不得超出预算金额!'))
              } else if (value < Number(this.ruleForm.rules[0].min)) {
                callback(new Error('不得小于最小金额!'))
              } else {
                callback()
              }
            },
            trigger: 'blur',
            required: true
          }
        ],
        'rules[1].max': [
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请输入最大金额'))
              } else if (value > Number(this.ruleForm.rules[1].budget)) {
                callback(new Error('不得超出预算金额!'))
              } else if (value < Number(this.ruleForm.rules[1].min)) {
                callback(new Error('不得小于最小金额!'))
              } else {
                callback()
              }
            },
            trigger: 'blur',
            required: true
          }
        ],
        'rules[2].max': [
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请输入最大金额'))
              } else if (value > Number(this.ruleForm.rules[2].budget)) {
                callback(new Error('不得超出预算金额!'))
              } else if (value < Number(this.ruleForm.rules[2].min)) {
                callback(new Error('不得小于最小金额!'))
              } else {
                callback()
              }
            },
            trigger: 'blur',
            required: true
          }
        ]
      }
    }
  },
  created () {
    this._initRules()
  },
  methods: {
    // 添加新的规格
    addRule (type) {
      if (type) {
        if (this.ruleForm.rules.length < 3) {
          this.ruleForm.rules.push(
            JSON.parse(JSON.stringify(this.BasesRuleForm.rules[0]))
          )
        } else {
          this.$message({
            type: 'warning',
            message: '最多只能添加3条规则'
          })
        }
      } else {
        if (this.ruleForm.rules.length > 1) {
          this.ruleForm.rules.pop()
        }
      }
    },
    // 验证表单
    submitForm () {
      this.$refs.ruleForm.validate((validate) => {
        if (validate) {
          this.$message({
            type: 'success',
            message: this.ruleForm.rules
          })
        }
      })
    },
    // 动态循环添加验证规则
    _initRules () {
      for (let index = 0; index < 3; index++) {
        let budget = 'rules[' + index + '].budget'
        this.rules[budget] = [
          {
            trigger: 'blur',
            required: true,
            message: '请输入预算金额'
          }
        ]

        let min = 'rules[' + index + '].min'
        this.rules[min] = [
          {
            trigger: 'blur',
            required: true,
            message: '请输入最小金额'
          }
        ]
      }
    }
  }
}
</script>

<style>
.content-validate{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.inputWidth {
  width: 150px;
}
</style>
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177

在上面的代码中存在对max 验证代码重复度很大，可是又不能使用for循环添加，如果哪位大佬有更好的方法，希望能给我指点指点。
以上就是我对Element表达验证的理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。