ElementUI是怎么做表单验证的？在循环里对每个input验证怎么做呢？_elementui validate 循环校验表单项

Element UI 表单动态for循环验证

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、普通的表单验证

1.表单验证的目的是在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。
2.Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
3.通过给表单绑定ref属性，在保存方法中配合validate回调函数，即可在表单提交时触发回调函数，继而弹出消息提醒用户。

二、动态for循环表单验证

代码示例：

    <template>
  <div style="width:100%;height:100%;" id="ManualAddId">
    <div class="el-table el-table--fit el-table--border el-table--enable-row-transition">
      <el-form style="width: 100%;" size="medium" :model="formInfo" ref="form" :rules="rules">
        <div v-for="(item,index) in formInfo.processData" :key="index">
          <table class="el-table__header" id="perCrudID" style="width: 100%;" cellspacing="0" cellpadding="0"
                 border="0">
            <tr class="el-table__row">
              <td class="col-th">
                <div class="cell">设备序列号</div>
              </td>
              <td colspan="2">
                <el-form-item :prop="'processData.'+index+'.devNum'" :rules="rules.devNum">
                  <el-input placeholder="请输入设备序列号" class="addinput" v-model="item.devNum">
                  </el-input>
                </el-form-item>
              </td>
              <td class="col-th">
                <div class="cell">设备位置</div>
              </td>
              <td colspan="2">
                <el-form-item :prop="'processData.'+index+'.location'" :rules="rules.location">
                  <el-input placeholder="请输入设备序列号" class="addinput" v-model="item.location">
                  </el-input>
                </el-form-item>
              </td>
              <td class="col-th">
                <div class="cell">设备名称</div>
              </td>
              <td colspan="2">
                <el-form-item :prop="'processData.'+index+'.name'" :rules="rules.name">
                  <el-input placeholder="请输入设备序列号" class="addinput" v-model="item.name">
                  </el-input>
                </el-form-item>
              </td>
              <td>
                <div class="cell">
                  <el-button size="mini" type="danger" @click="deleteMethod(index)">删除</el-button>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </el-form>
    </div>
    <div class="butClass">
      <el-button size="medium" type="primary" @click="addMethod">增加循环数组</el-button>
      <el-button size="medium" type="primary" @click="submitForm('form')">保存</el-button>
      <el-button size="medium" type="plain" @click="cancelMethod">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var checkdevNum = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('设备序列号不能为空！'));
      } else {
        if (value.length > 30) {
          callback(new Error('输入内容长度不能大于30个字符！'));
        } else {
          callback();
        }
      }
    };
    var checkdevType = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('设备位置不能为空！'));
      } else {
        if (value.length > 30) {
          callback(new Error('输入内容长度不能大于30个字符！'));
        } else {
          callback();
        }
      }
    };
    var checkdevLocation = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('设备名称不能为空！'));
      } else {
        if (value.length > 30) {
          callback(new Error('输入内容长度不能大于30个字符！'));
        } else {
          callback();
        }
      }
    };
    return {
      rules: {
        devNum: [{
          validator: checkdevNum,
          trigger: 'blur'
        }],
        location: [{
          validator: checkdevType,
          trigger: 'change'
        }],
        name: [{
          validator: checkdevLocation,
          trigger: 'change'
        }],
      },
      formInfo: {
        processData: [{
          devNum: '',
          location: '',
          name: '',
        }],
      }
    }
  },
  mounted() {
  },

  methods: {
    addMethod() {
      this.formInfo.processData.push({
        devNum: '',
        location: '',
        name: '',
      })
    },
    deleteMethod(index) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.formInfo.processData.splice(index, 1)
      }).catch(() => {
      });
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
}
</script>

<style scoped>
.cell {
  font-weight: bold;
  text-align: center;
  border-collapse: collapse;
}
.el-table td,
.el-table th {
  padding: 8px 8px;
}
.butClass {
  margin: 0.5% 0 0.5% 0;
  text-align: center;
}
</style>
<style>
#ManualAddId .el-form-item {
  margin-bottom: 8px;
}
</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

2.效果展示

总结

觉得有帮助的随机发挥