element-ui组价中表单的验证提示显示后台的提示信息及自定义提示

我在做这个的时候一个是分给我的那个页面是有两个接口的，所以提示信息就是根据接口的response.success 提示写一个提示语“XX已存在”如下：

html:


<el-form :model="form" :rules="rules" ref="form" label-width="110px" autocomplete="false"><el-form-item label="商户名称" prop="name"><el-input v-model="form.name" size="small" placeholder="请输入商户名称"></el-input></el-form-item></el-form>

js:

写在data里面


var judgeName = (rule, value, callback) =>{if(validateNull(value)){return callback(new Error("请输入商户名称"));}else{repetitionName(this.form.id,this.form.name).then(response => {if(response.success) {if(response.data){return callback(new Error("商户名称已存在"));}else{callback();}} else {callback();}});}}

rules


rules: {name: [{required: true,validator: judgeName,trigger: "blur"}]}

2:就是显示后台的提示信息

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

<el-form-item label="商户名称" prop="name" :error="errorMsg"><el-input v-model="form.name" size="small" placeholder="请输入商户名称"></el-input></el-form-item>

error要在data里面定义一下不然会报错

channelAdd(this.form).then(response => {if (response.success) {//成功的结果this.$message({message: response.message,type: "success",duration: 2000});} else {//错误信息this.errorMsg = response.message}});

element-ui组价中表单的验证提示显示后台的提示信息及自定义提示相关推荐

Element UI 表格嵌套表单、输入框、选择框
Element UI 表格嵌套表单.输入框.选择框有时候我们需要一次添加多条数据,这个时候我们就可以使用表格嵌套表单.输入框和选择框等等的方式,添加保存和修改数据. 直接展示代码 <el-fo ...
修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...
element UI 组件封装--搜索表单（含插槽和内嵌组件）
组件封装–搜索表单 searchForm.vue 可根据需要,参考姓名和工作自行增加更多常用的默认搜索项 <template><div style="padding: 30 ...
前端笔记-在Element UI中表格如何根据数据动态变化显示
前言实际上我需要的功能类似于前端工程中的字典.由于在前端的学习自己写代码的过程中可能不会对一个项目工程化的如此的彻底,所以这里给出了一种解决方法. 需求对于Element UI里的表格,如果假设传 ...
javaScript中表单的验证
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...
element ui里dialog关闭后清除验证条件
//vue<el-dialog title="编辑用户" :visible.sync="dialogFor ...
elementUI表单验证怎么显示后台返回的错误信息
elementUI的表单验证使用非常方便,此处不赘述,网上的方法和官方文档都有描述. 如果后台返回的错误信息要显示在表单验证错误提示的地方,而不是另外弹出提示框或者,实现效果如下图: 这个效果要如何实 ...
Element UI数字组件四舍五入问题及居右显示
1.数字组件会自动进行四舍五入,通过以下方法,可以直接进行位数的截取. <el-input-number v-model="vv" controls-position=&qu ...
修改element UI的select下拉框组件右边的小箭头（使用自定义图片）
i.el-select__caret {/*很关键:将默认的select选择框样式清除*/ appearance:none;-moz-appearance:none;-webkit-appearanc ...

element-ui组价中表单的验证提示显示后台的提示信息及自定义提示

element-ui组价中表单的验证提示显示后台的提示信息及自定义提示相关推荐

最新文章

热门文章