在使用el-dialog组件做为留言表单的时候 , 因为“提交”按钮没有验证非空 ,所以导致非空的input也能提交,通过学习,做出以下总结:
- el-form 中的 model(表单数据源) 、 rules (验证规则源)属性和 el-form-item 中的 prop 属性缺一不可;
- 需要验证的字段一定要在data中进行初始化,在 rules 中填写需要验证的属性
- 点击 “提交” 时因为不是直接验证提交的,所以需要在提交方法里添加规则判断
that.$refs.ruleForm.validate((valid)=>{
if(valid){
//校验通过的代码
}
})