在绑定prop的时候以
xxx.xx的形式绑定，写rules的时候也以xxx.xx的形式定义健
data(){
return{
ruleForm:{
human:{
name:'',
sex:0,
},
dog:'',
}
}
rules:{
dog: { required: true, message: '请填写dog', trigger: 'blur' }, //type默认是string
'human.name':[{type: "string", required: true, message: '请填写名字', trigger: 'blur'}], //有多条校验条件的时候可以放个object数组
'human.sex':{ type: "string",required: true, message: '请填写性别', trigger: 'blur'},
},
}
methods:{
submitForm(formName) {
var self = this;
this.$refs[formName].validate((valid) => {
if (valid) {
//提交前校验以下是否通过
self.$http.post(this.HOST+"/xxx",JSON.stringify(self.ruleForm.human), {headers: {"Content-Type": "application/json"}}) //我这里只提交human部分
.then(res=>{
}).catch(err => {
});
} else { //这一段是为了找到第一个校验不通过的地方, 然后focus过去
var isError=document.getElementsByClassName("is-error");
isError[0].querySelector('input').focus();
return false;
}
});
},
}
<el-form
:inline="true"
:model="ruleForm"
label-width="110px"
ref="ruleForm"
:rules="rules"
style="width:90%;margin:0 auto">
<el-card>
<div slot="header">
<span>基本信息</span>
</div>
<div>
<div>
<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.sex">
<el-input v-model="ruleForm.human.sex"></el-input>
</el-form-item>
</div>
<div>
<el-form-item label="dog:" prop="dog">
<el-input v-model="ruleForm.dog"></el-input>
</el-form-item>
</div>
</div>
</el-card>
<el-form-item style="margin-top:20px;float:right">
<el-button type="primary" @click="submitForm('ruleForm')" >确定</el-button>
<el-button >取消</el-button>
</el-form-item>
<div class="clear"></div>
</el-form>
