依赖包
- vue 2.x
- ant design vue 1.75
功能描述
校验表单时,后台返回状态码为400类型的错误,需将错误内容显示到对应表单下。效果如下图:
实现逻辑
前端可以通过err.response拿到错误信息的响应体,前后端约定统一名称的键值,具体实现代码如下:
1.处理err.reponse,去掉键值不为空的属性(tips:此为error.js工具类)
2.在表单界面引入处理错误工具类,data中声明errObj,然后在dom中绑定对应属性
如上图代码,即可实现将后台错误显示到对应表单下,补充一下注意点,form的声明放在data中,不要挡在beforeCreate中,否则不生效,onValueChange是为了对应表单值改变时清空验证规则。为了显示表单原有的验证规则(即v-decorator 中的rules的message)validateStatus与help属性要么为undefined要么为后台返回的错误信息,否则表单原有的验证无法正常的触发。
如果有帮助到您的话,麻烦动动小手点个赞!
谢谢啦