<template>
<el-form :model="form" :rules="rules" ref="form" @submit="onSubmit">
<el-form-item v-for="(item, index) in formItems" :key="index" :label="item.label" :prop="item.prop">
<el-input v-model="form[item.prop]" :placeholder="item.placeholder"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" native-type="submit" >提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {},
formItems: [
{ label: '用户名', prop: 'username', placeholder: '请输入用户名' },
{ label: '密码', prop: 'password', placeholder: '请输入密码' }
// 可以根据实际情况添加更多的表单项
],
rules: {
username: [
{ required: true, message: '用户名不能为空', trigger: 'blur' }
// 根据需要添加更多验证规则
],
password: [
{ required: true, message: '密码不能为空', trigger: 'blur' }
// 根据需要添加更多验证规则
]
}
};
},
methods: {
onSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
// 表单验证通过后的操作
console.log('表单验证通过');
} else {
// 表单验证未通过的操作
console.log('表单验证未通过');
}
});
}
}
};
</script>
在这个示例中，我们使用 v-for 指令循环 formItems 数组，动态生成表单项。
然后在 el-form 上设置 :model （接收的是一个object类型）和 :rules 属性来绑定表单数据和验证规则。
最后，在 @submit 事件上调用 onSubmit 方法来触发表单验证。
为什么el-form上设置的:rules 不生效，要在循环的每个el-form-item上再设置一个:rules呢？
在 Element UI 中，el-form 表单的验证规则应该是可以通过 :rules 属性设置在整个表单上的。如果发现 el-form
上设置的 :rules 不生效，而需要在每个循环的 el-form-item 上再设置一个 :rules 才能生效的话，可能有以下几个原因：1.错误的数据绑定：确保 :model 和 :rules 正确地绑定到了表单数据和验证规则上。
2.存在其他干扰：可能有其他代码或配置干扰了全局的验证规则生效。请检查是否有其他地方重写或覆盖了验证规则的设置。
3.版本或BUG问题：某些特定版本的 Element UI 可能存在一些 BUG 或问题，导致全局的 :rules 设置不能正确生效。在这种情况下，你可以尝试升级或降级 Element UI 的版本来解决问题。
在大多数情况下，在 el-form 上设置的 :rules 应该可以对整个表单生效，而不需要在每个 el-form-item
上再次设置。如果你遇到了这个问题，可以尝试根据上述原因逐一排查，找到并解决问题的根源。
如何在el-form-item上添加:rules？
<el-form-item label="用户名" :prop="item.prop" :rules="rules.username">
<el-input v-model="form.username"></el-input>
</el-form-item>
如果el-form要和el-row 结合使用。 一行多列的情况， 需要循环且提交进行表单校验
如下：
代码：
el-form 里的 :model=“registerForm” 绑定为一个对象， :rules=“rules” 要配合el-form-item 里的:prop一起使用进行表单验证，:prop要动态绑定数组的值，
