当前位置: 首页 > news >正文

Vue-自定义表单验证(rule,value,callback)详细使用

前言

  • 最近在实际开发中遇到需要验证合同编号是否在数据库已经存在,自定义表单验证。

  • 的表单验证大家都知道form绑定rules,prop绑定值与form.值一样,必填,失去焦点触发 提示信息。

  • 今天我们讲一讲自定义验证规则具体使用场景和它的三个参数意思和使用

  • 当我们明白了 validator3个参数意思,我们就可以随机组合我们自己的验证规则了

自定义验证规则

prop绑定值: [{validator: (rule, value, callback) => {console.log('验证规则信息',rule);console.log('输入框的值',rule);// callback()为空通过验证// callback(new Error('未通过验证,抛出异常'))console.log('是否通过验证规则',callback);},// 失去焦点触发trigger: "blur",},],

使用场景-正则验证是否是手机号

test()方法:用于检测字符串中指定的值,匹配成功返回true,匹配失败返回false

prop绑定值: [{ validator:  (rule, value, callback) {// 手机号正则表达式const reg = /^[1][3,4,5,7,8][0-9]{9}$/if (value == '' || value == undefined || value == null) {callback()} else {// 正则失败false,取反true抛出异常if (!reg.test(value) && value != '') {// 抛出异常,验证规则有错callback(new Error('请输入正确的电话号码'))} else {callback()}}// 输入框值变化一次执行一次}, trigger: "change" },],

使用场景-判断合同编号是否重复

prop绑定值: [{ required: true, message: "请输入合同编号", trigger: "blur" },{validator: async (rule, value, callback) => {// 发请求const res = await adrepetition(value);console.log("合同编号", res// 判断状态码if (res.code == 200) {callback();} else {callback(new Error("合同编号重复,请重新输入"));}},trigger: "blur",},],

使用场景-多选判断是否选中

checkListmain是data里面数据,是多选v-model绑定的值,是一个数组

prop绑定值: [{ required: true, message: "请输入合同编号", trigger: "blur" },{validator: async (rule, value, callback) => {// 发请求const res = await adrepetition(value);console.log("合同编号", res// 判断状态码if (res.code == 200) {callback();} else {callback(new Error("合同编号重复,请重新输入"));}},trigger: "blur",},],

总结:

经过这一趟流程下来相信你也对 Vue-自定义表单验证(rule,value,callback)详细使用 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!

什么不足的地方请大家指出谢谢 -- 風过无痕

相关文章:

Vue-自定义表单验证(rule,value,callback)详细使用

前言 最近在实际开发中遇到需要验证合同编号是否在数据库已经存在,自定义表单验证。 的表单验证大家都知道form绑定rules,prop绑定值与form.值一样,必填,失去焦点触发 提示信息。 今天我们讲一讲自定义验证规则具体使用场景和它…...

港联证券|TMT板块全线退潮,这些个股获主力逆市抢筹

计算机、电子、传媒、通讯职业流出规模居前。 今天沪深两市主力资金净流出709.92亿元,其中创业板净流出218.36亿元,沪深300成份股净流出187.92亿元。 资金流向上,今天申万一级职业普跌,除了国防军工职业小幅上涨,获主…...

WPF学习

一、了解WPF的框架结构 (第一小节随便看下就可以,简单练习就行) 1、新建WPF项目 xmlns:XML的命名空间 Margin外边距:左上右下 HorizontalAlignment:水平位置 VerticalAlignment:垂直位置 2…...

C#使用WebDriver模拟浏览器操作WEB页面

有时候需要模拟访问页面触发某个功能,可以使用WebDriver来实现这一功能,驱动打开浏览器,并对页面重定向以及对页面写入脚本等操作。 安装Selenium.Chrome,Selenium.Support.UI,Selenium 引入 using OpenQA.Selenium.…...

正则表达式 - 简单模式匹配

目录 一、测试数据 二、简单模式匹配 1. 匹配字面值 2. 匹配数字和非数字字符 3. 匹配单词与非单词字符 4. 匹配空白字符 5. 匹配任意字符 6. 匹配单词边界 7. 匹配零个或多个字符 8. 单行模式与多行模式 一、测试数据 这里所用文本是《学习正则表达式》这本书带的&a…...

银行数字化转型导师坚鹏:银行数字化转型培训方案

目录 一、银行数字化转型培训背景 二、银行数字化转型模型 三、银行数字化转型课程设计思路 四、 银行数字化转型课程基本介绍 五、 银行数字化转型课程设置 六、银行数字化转型课程大纲 七、培训方案实施流程 一、银行数字化转型培训背景 2020年1月3日&#xff…...

多维时序 | MATLAB实现BO-CNN-LSTM贝叶斯优化卷积神经网络-长短期记忆网络多变量时间序列预测

多维时序 | MATLAB实现BO-CNN-LSTM贝叶斯优化卷积神经网络-长短期记忆网络多变量时间序列预测 目录 多维时序 | MATLAB实现BO-CNN-LSTM贝叶斯优化卷积神经网络-长短期记忆网络多变量时间序列预测效果一览基本介绍模型搭建程序设计参考资料 效果一览 基本介绍 MATLAB实现BO-CNN-…...

Shell知识点(一)

1.echo 命令 echo命令的作用是在屏幕输入一行文本&#xff0c;可以降该命令的参数原样输出。 $ echo hello world hello world 如果想要输出的是多行文本&#xff0c;包含换行符&#xff0c;这时就需要把多行文本放在引号里面 $ echo "<HTML><HEAD><TITLE…...

mysql 索引失效、联合索引失效场景和举例

索引失效 假设有一张user 表&#xff0c;表中包含索引 (id); (name); (birthday); (name,age); 对索引字段进行函数操作 select name from user where year(birthday) 2000;使用模糊查询&#xff0c;查询中使用通配符 select name from user where name like %益达%;使用i…...

快速将PDF转换为图片:使用在线转换器的步骤

PDF文件是一种常见的文档格式&#xff0c;但在某些情况下需要将其转换为图片格式&#xff0c;例如将PDF文件插入PPT演示文稿中。此时&#xff0c;使用在线PDF转换器是一种快速且简便的方法。 本文将介绍如何使用在线转换器将PDF文件转换为图片格式。 步骤1&#xff1a;选择合…...

什么是gpt一4-如何用上gpt-4

怎么使用gpt-4 目前GPT-4还未正式发布或公开&#xff0c;因此也没有详细的对接说明。但是我们可以根据GPT-4的前身GPT-3的应用经验&#xff0c;以及GPT-4的预期功能推测一些可能的使用步骤&#xff1a; 选择适合的GPT-4实现技术&#xff1a;GPT-4可能有不同的实现技术&#xff…...

Docker 相关概念

1、Docker是什么&#xff1f; 如何确保应用能够在这些环境中运行和通过质量检测&#xff1f;并且在部署过程中不出现令人头疼的版本、配置问题&#xff0c;也无需重新编写代码和进行故障修复&#xff1f; 答案就是使用容器。Docker之所以发展如此迅速&#xff0c;也是因为它对…...

STM32平衡小车 TB6612电机驱动学习

TB6612FNG简介 单片机引脚的电流一般只有几十个毫安&#xff0c;无法驱动电机&#xff0c;因此一般是通过单片机控制电机驱动芯片进而控制电机。TB6612是比较常用的电机驱动芯片之一。 TB6612FNG可以同时控制两个电机&#xff0c;工作电流1.2A&#xff0c;最大电流3.2A。 VM电…...

动态加载 JS 文件

动态加载JS文件是指在网页运行过程中通过JavaScript代码向页面中动态添加外部JS文件&#xff0c;这种方式能够提高页面加载速度和用户体验&#xff0c;并且可以帮助网站实现更多的功能和特效。 本文将详细介绍动态加载JS文件的基本原理、优势、注意事项以及具体实现方法&#…...

14、lldb调试指令

LLDB LLDB(Low Lever Debug): 默认内置于Xcode中的动态调试工具.标准的lldb提供了一组广泛的命令,旨在与老版本的GDB命令兼容.除了使用标准配置外,还可以很容易地自定义lldb以满足实际需要. 1.1 lldb语法: <command> [<subcommand> [<subcommand>...]] &l…...

浏览器缓存策略:强缓存和协商缓存

浏览器缓存&#xff1a;其实就是在本地使用的计算机中开辟一个内存区&#xff0c;同时也开辟一个硬盘区&#xff0c;作为数据传输的缓冲区&#xff0c;然后利用这个缓冲区来暂时保护用户以前访问的信息通常浏览器的缓存策略分为两种&#xff1a;强缓存和协商缓存&#xff0c;强…...

2023年Chat GPT 应用前景分析

从2022年12月初刚上线至今&#xff0c;不到半年时间ChatGPT月活就超过了1亿用户&#xff01;可谓火的一塌糊涂&#xff0c;比尔盖茨都称&#xff1a;ChatGPT的历史意义重大&#xff0c;不亚于PC或互联网诞生。以至于ChatGPT官网长期都处于满负荷运转的状态&#xff01; 由于Ch…...

并发计算公式

常用并发数计算公式&#xff1a;N[(n0.8SP)/(T0.2)]*R 其中&#xff1a; n为系统用户数&#xff1b; S为每个用户发生的业务笔数&#xff08;QPS&#xff09;&#xff1b; P为每笔业务所需要访问服务器的时间&#xff0c;单位为秒&#xff1b; T为使用业务的时间&#xff0c;单…...

“华为杯”研究生数学建模竞赛2020年-【华为杯】E题:能见度估计与预测(附获奖论文及python代码实现)

​​​​​​​ 目录 摘 要: 一、问题背景与问题重述 1.1 问题背景 1.2 问题重述...

Arduino学习笔记3

一.RGB三色小灯实验 1.源代码 int rgb_R11;//接到板子上面的PWM口11 R int rgb_G9;//接到板子上面的PWM口9 G int rgb_B10;//接到板子上面的PWM口10 B void setup() {pinMode(rgb_R,OUTPUT);//设置rgb_R的控制口为输出模式pinMode(rgb_G,OUTPUT);//设置rgb_G的控制口为输出模…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

Python Ovito统计金刚石结构数量

大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...

探索Selenium:自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...