elementUI表单验证怎么显示后台返回的错误信息

elementUI的表单验证使用非常方便，此处不赘述，网上的方法和官方文档都有描述。

如果后台返回的错误信息要显示在表单验证错误提示的地方，而不是另外弹出提示框或者，实现效果如下图：

这个效果要如何实现呢？网上搜索了一些别人的做法，例如：

vm.$refs.ruleForm.fields.filter((item) => (item.prop === i))[0];

不知道是什么鬼怎么用的~~我用了没有达到想要的效果，如果哪些网友知道，望告知

还有一种做法是：

this.$refs.ruleForm.fields[0].error="错误提示"

这个是可以起作用的，但是控制窗口会有如下警告：

webpack-internal:///./node_modules/vue/dist/vue.esm.js:592 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "error"found in---> <ElFormItem><ElForm><ElDialog><DeptManageTab> at src\modules\settings\userManage\DeptManageTab.vue<TabPane><Tabs>……<AppContainer> at src\containers\AppContainer.vue<App> at src\App.vue<Root>

提示error属性的使用方法有误，避免直接更改一个属性的值，因为父组件重新加载时，该值会被覆盖，可以在data或者computed中定义一个变量来替代。

form-item里有个error的属性，刚用elementUI的童鞋可能很容易忽略

要实现在表单验证的地方显示后来返回的错误，加上error的属性，在data中定义一个错误信息的变量errorMsg，修改变量即可

<el-form :model="depForm" ref="depForm" :rules="depFormRules"><el-form-item label="部门名称" label-width="25%" prop="name" :error="errorMsg"><el-input v-model="depForm.name" auto-complete="off" clearable /></el-form-item></el-form>

post(Url,params, function (result) {if (result.data.success) { //成功时操作 } else { // 后台返回的错误信息赋值给变量errorMsg self.errorMsg = result.data.message}})

然后你会发现只有第一次出错时才有提示，后续一样的错误不会有验证失败的提示，在下猜测可能是errorMsg修改成一样的值，vue没触发响应

在请求前将错误信息置空即可

self.errorMsg = ''
post(Url,params, function (result) {if (result.data.success) { //成功时操作 } else { // 后台返回的错误信息赋值给变量errorMsg self.errorMsg = result.data.message}})

So easy有木有！！！！说得不对的地方望批评指正，大家一起进步~

elementUI表单验证怎么显示后台返回的错误信息相关推荐

elementUI表单验证
elementUI表单验证注意: el-form中要有::model=" " :rules=" " el-form-item要有:prop 如果点击提交时也启 ...
elementUI表单验证之动态表单验证
elementUI 中 Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可. (1)常用表单验证 ...
element-ui表单验证：用户名、密码、电话、邮箱
之前设计login组件时增加了简单的表单验证,因此对应的users组件,添加用户功能也必须设置相应的验证规则. 文档form表单验证只提供了用户名/密码,是否必须/长度限制的验证.对于电话.邮箱和地址 ...
element-ui表单验证
情景我想利用饿了么框架实现表单验证 http://element-cn.eleme.io/#/zh-CN/component/form#form-biao-dan 但是我的form里面的model和 ...
element-ui表单验证（验证手机号是否正确，自定义验证规则）
效果图 1. html <el-form :model="userForm"status-icon:rules="rules"class="lo ...
vue 中 Element-UI 表单验证的几种方法
在开始之前需要把element-ui在vue中引入好,如果没有引入好的话,需要先跟着element-ui的文档进行操作,接下来就可以进行学习了. 第一种:在el-form-item单个添加验证这种方 ...
Element-UI 表单验证规则rules 配置参数说明
官方文档 : https://github.com/yiminghe/async-validator 转载于:https://www.cnblogs.com/itstac/p/11063125.htm ...
创建一个简单的后台教务管理系统,包含动态增删改查学生,年级和课程信息及查看登录日志等功能,包含表单验证.
创建一个简单的后台教务管理系统,包含动态增删改查学生,年级和课程信息及查看登录日志等功能,包含表单验证. 一.显示页面新建一个登录页面,即login.jsp <%--Created by In ...
表单验证设计的用户体验基本原则
转自:http://www.oschina.net/translate/ux-form-validation?from=20130331 英文原文:The Ultimate UX Design of ...

elementUI表单验证怎么显示后台返回的错误信息

elementUI表单验证怎么显示后台返回的错误信息相关推荐

最新文章

热门文章