1.当表单的字段值是数组或者对象时的rules配置
- 对象：直接用obj.xx配置rules和prop
- 数组：用list.index.xx配置rules和prop
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="人名" prop="human.name">
<el-input v-model="ruleForm.human.name"></el-input>
</el-form-item>
<el-form-item label="年纪" prop="human.age">
<el-input v-model="ruleForm.human.age"></el-input>
</el-form-item>
<el-form-item label="狗狗" prop="dog">
<el-input v-model="ruleForm.dog"></el-input>
</el-form-item>
<el-form-item label="朋友1" prop="friend.0.value">
<el-input v-model="ruleForm.friend[0].value"></el-input>
</el-form-item>
<el-form-item label="朋友2" prop="friend.1.value">
<el-input v-model="ruleForm.friend[0].value"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">立即创建</el-button>
</el-form-item>
</el-form>
<script>
new Vue({
el: "#app",
data: {
ruleForm: {
human: {
name: "",
age: ""
},
dog: "",
friend: [
{
name: "朋友1",
value: ""
},
{
name: "朋友2",
value: ""
}
]
},
rules: {
dog: [
{ required: true, message: '请输入狗狗名称222', trigger: 'blur' }
],
'human.name':[
{ required: true, message: '请输入人名称222', trigger: 'blur' }
],
'human.age':[
{ required: true, message: '请输入人年纪22', trigger: 'blur' }
],
'friend.0.value': [
{ required: true, message: '请输入朋友1名称', trigger: 'blur' }
],
'friend.1.value': [
{ required: true, message: '请输入朋友2名称', trigger: 'blur' }
],
}
},
created() { },
mounted() { },
methods: {
submitForm(formName) {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
console.log(this.ruleForm)
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
}
})
</script>