验证部分表单是否重复
1. 效果
- 图片中的名称、机构编码需要进行重复验证
2. 思路及实现
- 表单验证
- 在获取数据将需要验证的表单数据进行保存
this.nameChangeTemp = response.data.orgName;this.codeChangeTemp = response.data.orgCode;
- 通过rule对表单进行验证
以名字的验证为例
rules: {orgName: [// 设置为必传{ required: true, message: "请输入用户", trigger: 'blur' },// 设置长短{ min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: 'blur' },// 通过方法进行验证{ validator: validateIsReOrgName, trigger: 'blur' }],}...var validateIsReOrgName = (rule, value, callback) => {let obj = {orgName: value}// 如果没有发生编辑,那么就直接返回if (value === this.nameChangeTemp) {callback();return}// 通过接口访问后台,然后确定通过后台的数据,判断是否重复isNameDuplication(obj).then((res) => {if (res.data) {callback(new Error('机构重名,请重新输入'));}callback();})}
- 更新时,对输入框内容的处理
- 更新时,如果需要验证的内容没有发生改变,那么就不需要传到后台。
- 这儿有两种方式可以知道内容是否发生改变:
(1)一种是1中验证的时候,然后验证通过设置标志位;
(2)通过change
事件;
这儿我们通过change
事件完成
// 表单部分,以名称为例<el-form-item label="名称" prop="orgName" ref="orgName"><el-input v-model="form.orgName" placeholder="请输入名称" :disabled="form.orgName==='云课堂'" @change="nameChange"></el-input></el-form-item>......// 事件驱动程序 nameChange () {this.nameChangeMark = true;},codeChange () {this.codeChangeMark= true;}// 进行编辑时的请求,首先通过delete将这两个属性去掉,再根据标志位将对应的属性添加进来let obj = deepClone(this.form) // 这儿对表单里面的数据进行深度赋值delete obj.orgName;delete obj.orgCode;if (this.nameChangeMark) {obj.orgName = this.form.orgName;}if (this.codeChangeMark) {obj.orgCode = this.form.orgCode;}putObj(obj).then(res => {if (!res || res.status !== 200) {this.$message.error(res.message)return}this.showValue();this.$message({message: '更新成功',type: 'success'});});
转载于:https://www.cnblogs.com/usebtf/p/9620957.html
验证部分表单是否重复相关推荐
- 重置表单验证 清除表单校验信息
重置表单验证 清除表单校验信息 提交表单验证的时间经常遇见的一个问题 再次打开时表单验证依旧存在,这种就很烦,用户体验有点差, 在使用Vant或Element UI框架时经常会遇到,再次打开表单时,原 ...
- 表单的重复提交问题解决方案
1.在我们的web开发中,常常会遇到表单的重复提交问题,那么我们的解决方案有两种:①重定向:response.sendrediect(); ②token的使用,即做个标记 下面写一个token的例子: ...
- Spring MVC表单防重复提交
转载自 Spring MVC表单防重复提交 利用Spring MVC的过滤器及token传递验证来实现表单防重复提交. 创建注解 @Target(ElementType.METHOD) @Retent ...
- 关于表单防重复提交一些东东
前阵子弄了些表单防重复提交的东西,想整理整理,免得下次要用时再四处去找,其实这里的东西还是挺简单的. 原理: 在Session中保存一个表单的唯一编号,将该编号放在一个隐藏域中,同其他数据一同提交.在 ...
- 2021-10-15 验证form表单的内容是否已存在数据库
验证form表单的内容是否已存在数据库 <template><el-dialog:visible.sync="dialogVisible"width=" ...
- uniqid php 重复_在php使用隐藏字段和uniqid来实现表单的重复提交
在php中,最简单,也是做常用的放发来放置表单重复提交的方法就是设置隐藏域的来实现,在php有一个uniqid();函数,他可以生成唯一的标示符,这样我们就可以通过判断这个标示符来判断表单是不是处于重 ...
- angularjs php登录验证,AngularJs表单验证的方法
Anjularjs表单验证 能够根据用户在表单中输入的内容给出实时视觉反馈是非常重要的.在人与人沟通的语境中,表单验证给出来的反馈同获得正确输入同等重要. 表单验证不仅能给用户提供有用的反馈,同时也能 ...
- struts上传文件,验证失败表单数据丢失的原因
struts上传文件,验证失败表单数据丢失的原因 发现一个问题,使用struts进行文件上传,如果有些参数没有完全定义在ActionForm中,需要从request.getParameter获取,在表 ...
- 如何防止表单的重复提交
表单重复提交是在多用户Web应用中最常见.带来很多麻烦的一个问题.有很多的应用场景都会遇到重复提交问题,比如: (1)点击提交按钮两次. (2)点击刷新按钮. (3)使用浏览器后退按钮重复之前的操作, ...
最新文章
- 2022-2028年全球与中国生物质燃料粒行业市场智研瞻分析报告
- 如何在TVM上集成Codegen(下)
- 用户自定义协议client/server代码示例
- 论文笔记之:End-to-End Localization and Ranking for Relative Attributes
- moel vue 自定义v_vue如何在自定义组件中使用v-model
- 如何在Django模板中注入全局变量
- 文件夹复制 覆盖_软网应用:U盘即插即复制
- spark-sql建表语句限制_第三篇|Spark SQL编程指南
- STM32工作笔记0030---编写跑马灯实验--使用库函数
- 华为MDC调试工具使用介绍
- netty源码解解析(4.0)-15 Channel NIO实现:写数据
- HDOJ--1106排序
- PS滤镜插件工具箱Mac版:Nik Collection 4
- 怎么用几何画板作一些简单的图形
- 基于Android平台的x264的移植与应用(一):移植篇
- 预测模型构建利器——基于logistic的列线图(R语言)
- 影片剪辑实例名的几点注意
- 软考高级 真题 2016年上半年 信息系统项目管理师 案例分析
- 用于 Linux* 的英特尔® 图形驱动程序 以后买本本的时候,先注意一下
- guzzle php,PHP中使用Guzzle进行API测试
热门文章
- aix内核是linux,查看Linux及AIX硬件信息方法总结
- 为什么用链路聚合_H3C ComwareV7平台网络设备可靠性配置——链路聚合
- python运行结果图_[宜配屋]听图阁
- python不能创建字典的是_用Python创建带有重复键的字典
- 加油站会员管理系统源码php_加油站使用会员管理系统,如何解决行业瓶颈?
- Java——多线程实现的三种方式
- Java——集合(HashMap与Hashtable的区别)
- 线性表----循环链表和静态链表
- mfc在运行的时候为什么没有实例化_为什么不建议把数据库部署在Docker容器内?...
- powerbi的功能介绍_Power BI:1分钟快速生成可视化报表