element-ui中el-input输入时自定义校验,并且调后端接口查重

2023-11-07

一、实现效果:
1.只能属于正整数
2.只能属于7位或者9位
3.输入时实时校验
4.查重,不能输入列表存在的,除自己之外

<el-form-item :label="$t('receivingTankerCode') + ':'" prop="receivingTankerCode">
	<el-input v-model="ruleForm.receivingTankerCode" maxlength="9" clearable size="small" @input="value => (ruleForm.receivingTankerCode = Tool.calcNumEvery(value))" :placeholder="$t('placehEnter')"></el-input>
</el-form-item>
//在tool文件,引入正整数函数
// 正整数
export const Tool = {
	calcNumEvery(num) {
		num = num.replace(/[^0-9.]/g, ''); // 清除“数字”以外的字符
		return num;
	}
}
//data自定义校验
 data() {
    //自定义校验方法
	const validateReceivingCode = (rule, value, callback) => {
		if (String(value).length !== 7 && String(value).length !== 9) {
			callback(new Error('只允许输入7位或9位数字'));
		} else {
			const params = {
				receivingTankerCode: value
			};
			//查重
			this.checkTanker(params).then(res => {
				console.log(res, '是否重复');
				if (res.records && res.records.length === 0) {
					callback();
				} else {
				   //不能输入列表已存在的,除了自身之外
					if (res.records.some(item => item.receivingTankerCode === value && item.id !== this.Hid)) {
						callback(new Error('船号重复,请重新输入'));
					} else {
						callback();
					}
				}
			});
		}
	};
	return {
		ruleForm: {
			receivingTankerCode: ''
		},
		rules: {
			receivingTankerCode: [
			   //需要添加change时间,实时校验是否为空值
				{ required: true, message: '输入内容不可为空,请输入', trigger: ['blur', 'change'] },
				{
					validator: validateReceivingCode,
					trigger: 'blur' //不能添加change事件,不然数据变化时就会调接口
				}
			]
		}
	};
},
method:{
   //查重函数
	checkTanker(params) {
		return new Promise(resolve => {
			// 关键
			API.getReceivingTankerList(params)
				.then(res => {
					if (res.status) {
						resolve(res.data); // 关键
					} else {
						this.$message.error(res.msg || '请求失败');
					}
				})
				.catch(err => {
					this.$message.error(err.msg || '请求失败');
				});
		});
	}
}	
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

element-ui中el-input输入时自定义校验,并且调后端接口查重 的相关文章

随机推荐

  • 【转】latex常见错误对照表

    原文链接 http www cs utexas edu witchel errorclasses html Latex Error Classes Ambiguous Errors This is a list of error class
  • 【低功耗蓝牙】① 蓝牙广播数据格式分析

    摘要 本文章主要讲解了蓝牙的发展史 蓝牙信号 蓝牙广播数据的格式 最后使用ESP32芯片MicroPython固件给出了蓝牙广播的具体代码 是蓝牙初学者很好的参考资料 也可以参考下我在B站的蓝牙视频教程 ESP32教程 第二章 低功耗蓝牙B
  • 创建多个线程、数据共享问题分析与案例代码

    创建多个线程 数据共享问题分析与案例代码 创建和等待多个线程 在实际的工作中 可能要创建的线程不止一个 也许有多个 所以 这里展示一下创建多个线程的一种写法 大家可以举一反三 在lesson4 cpp的上面位置 书写线程入口函数 mypri
  • Python框架区别是什么?比较常用的框架有哪些?

    前言 本文的文字及图片来源于网络 仅供学习 交流使用 不具有任何商业用途 版权归原作者所有 如有问题请及时联系我们以作处理 众所周知 Python开发框架大大减少了开发者不必要的重复劳动 提高了项目开发效率的同时 还使得创建的程序更加稳定
  • webpack原理

    1 webpack核心概念 entry 一个可执行模块或库的入口文件 chunk 多个文件组成的一个代码块 例如把一个可执行模块和它所有依赖的模块组合和一个 chunk 这体现了webpack的打包机制 loader 文件转换器 例如把es
  • 海康网络摄像机与电脑交互,有网络和无网络两种方式读取URL视频流,以及无网络情况下配置IP地址

    目录 1 准备工具 2 通过WiFi的接口连接 3 无网络情况下进行交互 4 海康官方软件 5 RTSP视频流 a RTSP b 视频流 c rtsp流地址 1 准备工具 电脑 台式或笔记本 网线 普通网线即可 POE海康网络摄像机 不需要
  • Nerf如何制作自己的llff数据集

    Nerf三维重建使用Pycharm运行自己的数据集 20230427更新 Nerf代码讲解 从零简单复现论文代码 Nerf环境配置教程 你好 这里是 出门吃三碗饭 本人 本文章接下来将介绍自己制作Nerf数据集 让你自己动手渲染第一个三维模
  • PyCharm 代码调试教程

    目录 一 图文教程 二 调试相关的快捷键 调试的过程分为三步 第一步 在你想要调试的地方 打上断点 第二步 使用调试模式来运行这个 python 程序 第三步 使用各种手段开始代码调试 一 图文教程 1 首先第一步和第二步 我用下面这张图表
  • Spring Cloud Config 实现配置中心,看这一篇就够了

    Spring Cloud Config 是 Spring Cloud 家族中最早的配置中心 虽然后来又发布了 Consul 可以代替配置中心功能 但是 Config 依然适用于 Spring Cloud 项目 通过简单的配置即可实现功能 配
  • ArcGIS:如何添加字段、属性表的连接、字段的计算?

    目录 01 加载原始数据 02 加载的数据分析与处理 2 1 查看tracts要素的属性表 2 2 为tracts要素的属性表添加 人口密度 字段 03 与tract pop属性表进行连接 3 1 为什么要连接 3 2 连接有什么需要注意的
  • vue 导出 导入

    vue 导出 方法一 1 util自带工具包 Export2Excel js 2 引用 import export json to excel from utils Export2Excel 3 导出方法 formatJson filter
  • 基于lua-nginx-module(openresty)的WEB应用防火墙

    独乐乐 不如众乐乐 分享给大家一篇WEB应用防火墙的文章 基于Lua Nginx实现 以下是ngx lua waf的作者全文输出 Github地址 https github com loveshell ngx lua waf ngx lua
  • MySQL 5.7 root登录问题

    For Mac 安装完成后 当使用 mysql u root p 登录时 出现下面错误 ERROR 1045 28000 Access denied for user root localhost using password NO 可通过
  • 正则替换下划线为字母大写

    本人需要手工将数据库中的字段批量转换为java对象的字段 比如 将TRADE DATE 转换为 tradeDate 最终的结果为 1 xxx xml 格式如下 result property tradeDate column TRADE D
  • calendar 字符串日期转时间戳

    public class TestDate public static void main String args SimpleDateFormat dateFormat new SimpleDateFormat yyyy MM dd 指定
  • github上传本地项目代码

    github上传本地项目代码 小白教程 github上申请一个账号 https github com 下载一个git工具 https gitforwindows org 进入github首页 点击新项目new repository 如下图所
  • Java中Comparable和Comparator区别小结

    阅读目录 一 Comparable简介 二 Comparator简介 三 Comparable和Comparator区别比较 回到顶部 一 Comparable简介 Comparable是排序接口 若一个类实现了Comparable接口 就
  • Codeforces Round 883 (Div. 3)

    A Rudolph and Cut the Rope 只需要按照钉子距离的高度a i 和绳子的长度b i 的差值进行排序即可 代码 int n pii a N bool cmp pii a pii b return a x a y
  • python爬虫总是爬不到数据,你需要解决反爬虫了

    爬虫最讨厌的就是反爬虫 但是如果没有反爬虫的存在的 那么大家都可以随随便便就进行网络爬虫 那么服务器又怎么支撑得起来呢 那么又怎么彰显我们的能力呢 所以说反爬虫是一个门槛 跨过这一个门槛就可以轻松掌握爬虫的技术了 跨不过那么你就一直都在起点
  • element-ui中el-input输入时自定义校验,并且调后端接口查重

    一 实现效果 1 只能属于正整数 2 只能属于7位或者9位 3 输入时实时校验 4 查重 不能输入列表存在的 除自己之外