element-ui 自动触发表单校验

与之前的校验不同，这次遇到的需求是后台检验失败前端需要在输入框下方显示响应的提示(之前都是一个message盒子弹出几秒提示)。简单来说就是当后台校验不通过时,错误提示需要与前端校验失败形式相同,也就是后台校验失败时前端需要自动触发检验失败并且显示提示信息。

先来一波效果图

1. 在el-form-item标签上添加error属性，初始赋值必须为空，不然直接就展示校验失败的状态。之后只需要在后台返回校验错误code时对errorMsg赋值就可以是实现需求。但是

<el-form-item prop="name" :error="errorMsg">

2. 当然，如果这么简单也就没必要记录了。上述办法还有一个细小的问题：第一次触发之后如果后续的错误信息没有变就不会再次触发。解决办法也很简单，在输入框上绑定blur事件，将errorMsg还原为空就行了。注意: 不要绑定input事件，如果仅仅只是把光标聚焦然后失焦时，错误信息会消失的(会触发前端的表单校验，我这里触发条件是失焦)，而errorMsg的值确没有被改变，这时候再点击提交按钮同样不会出现错误提示。