VUE + Element-UI 表单校验input框数据已存在
基础校验方式实现
html代码
<el-form-item label="值名称:" style="width: 80%" prop="valueName" :rules="[ { required: true, message: '值名称不能为空'},{ validator: checkValueNameIfExist, trigger: 'blur'},{ pattern: \^[\u4E00-\u9FA5A-Za-z0-9_]+$\g, message: '只允许输入中文、英文、下划线' }]"><el-input v-model="formData.valueName" style="width: 90%"></el-input>
</el-form-item>
这里的:rules
绑定的值也可以统一定义data.return里面。
2.js代码,methods中添加checkValueNameIfExist
校验方法
// 校验值名称是否存在async checkValueNameIfExist(rule, value, callback) {if(value) {let valueName = valuelet id = this.checkIdlet res = false// 发送请求,查询数据库当前表单内容是否已存在// 这里必须等待请求结束才能执行之后的代码// 否则 res 一直等于 false 即校验通过await checkRuleElemName({valueName, id}).then((data) => {res = data})if (res === true) {callback(new Error('值名称已存在'))} else {callback()}callback()}callback()},
注意: 代码中的checkValueNameIfExist
方法必须加关键字await !!!
3.查询sql:
select COUNT(ID) from table where VALUE_NAME = #{valueName}
<if test="id != null and id != ''">id <![CDATA[<>]]> #{id}
</if>
sql解释:
前端新增和修改用的是同一个页面,所以需要考虑到修改的时候校验重复性。
前端实现步骤
在data.return
中添加checkId: null
新增时this.checkId = ""
把checkId设置成空或者null
修改时this.checkId = this.multipleSelection.xxId
把获取到的表格中指定行数据的ID赋值给checkId
VUE + Element-UI 表单校验input框数据已存在相关推荐
- vue+element ui表单校验(邮箱、电话、工商信息)
vue+element ui表单校验(邮箱.电话.工商信息)) Html部分 <template><div><el-steps :active="active& ...
- element ui表单校验prop的链式写法----源码分析
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width=& ...
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
- vue 3.0记录Element UI 表单使用(看了隔壁小孩儿都会用的Element UI 表单组件使用)
Element UI 表单 使用 记录 element ui 表单 input 文本域 日期选择 中国标准时间与xxxx-xx-xx格式时间之间的来回切换 中国标准时间转换为xxxx-xx-xx格式 ...
- form generator ——Element UI表单设计及代码生成器
form generator Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中. 网站地址:https://mrhj.gitee.io/form-ge ...
- vue + element 自定义表单验证的时候 需要通过请求后端接口验证
vue + element 自定义表单验证的时候 需要通过请求后端接口验证 做vue项目的时候遇到了一个需求,在验证某个表单项时不仅需要是必填项而且要去通过接口校验是否有重复值. // templat ...
- element UI 表单自定义验证,css水平且垂直居中方法
element UI 表单自定义验证 element UI提供了一种内部的表单验证,但是这种方法不能够来进行复杂的验证,如邮箱,手机号等的验证需要用到自定义验证 首先是element UI 提供的基础 ...
- vue开源Element UI表单设计及代码生成器
1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代码可直接运行在基于 Element 的 vue 项目中. github仓库 https:// ...
- Vue+element ui表单中省市区级联选择—v-distpicker/Cascader
v-distpicker组件或Cascader 级联选择器 1.页面 <el-form ref="form" :model="form" :rules=& ...
最新文章
- jQuery Mobile 快速入门
- 科大讯飞和百得思维_最佳辩手陈铭力荐 讯飞智能学习机让学习不再难
- filebeat Template 报错(安装的时候遇到错误了用这个方法解决的)
- 操作系统实验报告5:进程的创建和终止
- 基础之实战猜年龄游戏
- 判断是否遵守某个协议
- 为SoC-FPGA添加TFT显示屏和USB键盘
- Windows7orServer2008安装VM-Tools
- Some file crunching failed, see logs for details 一种情形的解决办法
- 局域网共享文件的方法
- 2021年实验中学高考成绩查询,2021年北京高中排名,高中高考成绩排名一览表
- MFC添加鼠标右键菜单
- 怎样串联两台无线路由器:[1]二级路由设置
- kali下的免杀之veil安装步骤
- python中fact()是什么意思_python中fact函数是什么及如何使用?
- 微信首页登录html页面,H5页面接入微信授权登录和分享
- 【风马一族_Android】Android学习
- 【小程序】自定义顶部导航栏(左上角返回等)
- 股市小白必看!能获取股票数据的编程语言:Python带你看懂股市线
- 客户画像分析无头绪?来试下风险评分与特征的方案与实现
热门文章
- python扫雷总结与体会_扫雷拓展训练心得体会
- 《C语言陷阱和缺陷》笔记
- getenv、setenv函数(获取和设置系统环境变量) 与 环境变量
- 【Unity2D入门教程】简单制作一个弹珠游戏之制作场景③(设置砖块,添加碰撞)
- 最有用的期货技术 — 无招胜有招
- App Inventor的简单介绍
- react为什么要废弃三个生命周期?
- 【Java】Java计算器
- 每日新闻:阿里云掀起新一轮价格大战;比特大陆正式发布AI芯片;百度区块链实验室落户海南;救市意图明显 北京海淀区成立百亿纾困基金...
- 95后小伙记录一次京东Java实习校招面经,三轮技术面+HR面,已给口头offer!