【Vue中给输入框加入js验证_blur失去焦点进行校验】

news2024/10/6 22:29:27

【Vue中给输入框加入js验证_blur失去焦点进行校验】
通俗一点就是给输入框加个光标离开当前文本输入框时,然后对当前文本框内容进行校验判断
具体如下:
1.先给文本框加属性 @blur=“validatePhoneNumber”

<el-input v-model=“entity.telephone” @blur=“validatePhoneNumber” :disabled=“disabled”>

{{ errorText }}



2.在data中对需要值进行默认赋值,或者称之为自定义
在这里插入图片描述

telephone:‘’,
phoneNumber: ‘’,
isValid: true,
errorText: ‘请输入正确的手机号码’ ,
isPhoneValid: true,
3.在method中自定义校验的方法
在这里插入图片描述

 validatePhoneNumber() {  
  const resg1=/^1[3456789]\d{9}$/;
  this.isValid = resg1.test(this.entity.telephone);  
  if (!this.isValid) {  
    alert(this.errorText);  
  }  
} 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1326320.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

航空港务数据大屏为航空港的可持续发展提供有力支撑!

随着经济的发展&#xff0c;不断加建与扩建民用机场&#xff0c;空港行业规模不断扩大。在不断引进和消化发达国家先进技术的同时&#xff0c;中国深入开展了对新技术和新材料的研究&#xff0c;极大地丰富和发展了中国的机场建设技术。且各项机场建设计划均已落实推进&#xf…

下午好~ 我的论文【yolov5】(第四期)

文章目录 简介模型Mosaic数据增强自适应锚框计算自适应图片缩放Focus结构CSP结构 NeckCIOU_Lossnms非极大值抑制代码最后 简介 YOLO V4没过多久YOLO V5就出来了。YOLO V5的模型架构是与V4非常相近的。 模型 Yolov5官方代码中&#xff0c;给出的目标检测网络中一共有4个版本&…

列举mfc140u.dll丢失的解决方法,常见的mfc140u.dll问题

在使用电脑的过程中&#xff0c;有时会遇到mfc140u.dll文件丢失的问题&#xff0c;导致一些应用程序无法正常启动。本文将介绍mfc140u.dll丢失的常见原因&#xff0c;并提供相应的解决办法。同时&#xff0c;还会列举一些与mfc140u.dll丢失相关的常见问题和解答。 第一部分&…

基于FPGA的简易BPSK和QPSK

1、框图 2、顶层 3、m_generator M序列的生成&#xff0c;输出速率为500Kbps 4、S2P是串并转换模块 将1bit的m序列转换到50M时钟下的2bit M序列数据&#xff08;就有4个象限&#xff09;&#xff1b; 5、my_pll是生成256M的时钟作为载波&#xff0c;因为sin和cos信号的…

数据管理平台Splunk Enterprise本地部署结合内网穿透实现远程访问

文章目录 前言1. 搭建Splunk Enterprise2. windows 安装 cpolar3. 创建Splunk Enterprise公网访问地址4. 远程访问Splunk Enterprise服务5. 固定远程地址 前言 Splunk Enterprise是一个强大的机器数据管理平台&#xff0c;可帮助客户分析和搜索数据&#xff0c;以及可视化数据…

汽车大灯led恒流驱动芯片OC5501 可高低亮调光

LED恒流驱动芯片是一种在汽车大灯中常见的关键部件。它能提供稳定的电流&#xff0c;使LED灯光亮度均匀、稳定&#xff0c;并且延长LED的寿命。 传统的汽车大灯使用的是卤素灯泡&#xff0c;而现在越来越多的汽车厂商开始使用LED大灯。LED大灯具有更好的能效和更长的寿命&…

08 Vue3中的v-text指令

概述 v-text指令主要是用来渲染文本内容&#xff0c;和双大括号的效果基本一致&#xff0c;所以使用场景非常少。 一般情况下&#xff0c;我们都会使用双大括号语法去渲染文本内容&#xff0c;而不是使用v-text指令。 基本用法 我们创建src/components/Demo08.vue&#xff…

【超图】SuperMap iClient3D for WebGL/WebGPU ——颜色(1)

作者&#xff1a;taco 在项目中通常会出现&#xff0c;高亮对象。给对象设置颜色的一些问题。那么针对颜色设置在超图的 iClient3D for WebGl/WebGPU 中又提供了哪些方式呢&#xff1f;本篇文章将介绍一些颜色的设置方法。以及一些颜色的参数设置。 在iClient3D for WebGl/WebG…

ChimeraX使用教程-安装及基本操作

ChimeraX使用教程-安装及基本操作 1、访问https://www.cgl.ucsf.edu/chimerax/download.html进行下载&#xff0c;然后安装 安装完成后&#xff0c;显示界面 2、基本操作 1、点击file&#xff0c;导入 .PDB 文件。 &#xff08;注&#xff1a;在 alphafold在线预测蛋白》点…

比特币和区块链并非游离在法律之外

​​发表时间&#xff1a;2023年12月01日 近年来&#xff0c;围绕区块链监管的讨论&#xff0c;已经成为政策制定者、行业领袖和区块链爱好者之间越来越重要的话题。随着各国政府在促进创新和确保消费者保护之间寻求着平衡&#xff0c;有关区块链监管的持续讨论反映出这项变革性…

Ansible的脚本---Playbook剧本编写

playbook的组成部分 1、 tasks&#xff1a;任务 在目标主机上需要执行的操作。使用模块定义这些操作。每个任务都是一个模块的调用。 2、 variables&#xff1a;变量 用于存储和传递数据。类似于shell脚本中的变量。变量可以自定义。可以在playbook当中定义为全局变量&…

计算机网络3

1.三种通信方式 2.失真 &#xff08;码间串扰&#xff1a;码元传输速率过快导致&#xff09; 3.奈氏准则 4.香农定理 5.基带and宽带信号 6.编码与调制 ​​​​​​​7.数据交换方式 1.电路交换及优缺点 2.报文交换及优缺点 3.分组交换及优缺点 8.数据交换方式的选择和特点…

智能图像编辑软件Luminar Neo mac提供多种调整和滤镜选项

Luminar Neo mac是一款由Skylum公司开发的AI技术图像编辑软件&#xff0c;旨在为摄影师和视觉艺术家提供创意图像编辑解决方案。Luminar Neo拥有强大的AI技术和丰富的后期处理工具&#xff0c;可帮助用户快速轻松地实现从基本到高级的图像编辑需求。 Luminar Neo提供了多种调整…

电商行业的生存环境如何,比较占优势的发展模式有哪些?

我是电商珠珠 随着互联网技术的发展和普及&#xff0c;电商行业已经成为了当今社会不可或缺的一部分。在改变人们生活娱乐习惯的同时&#xff0c;还带动了整个产业链的变革。 据统计&#xff0c;全球电商交易额已经达到了数万亿美元&#xff0c;且仍在快速增长。 在电商行业…

【lesson20】MySQL复合查询(1)基本查询回顾、多表查询和自连接

文章目录 基本查询回顾建表插入数据实例 多表查询建表插入数据实例 自连接建表插入数据实例 基本查询回顾 建表 插入数据 实例 查询工资高于500或岗位为MANAGER的雇员&#xff0c;同时还要满足他们的姓名首字母为大写的J 按照部门号升序而雇员的工资降序排序 使用年薪进行降…

无约束优化问题求解笔记(2):最速下降法

目录 3. 最速下降法3.1 最速下降法的基本思想3.2 基于精确搜索的最速下降法3.3 基于精确搜索的最速下降法的程序实现3.4 基于精确搜索的最速下降法的缺点 Reference 3. 最速下降法 3.1 最速下降法的基本思想 最速下降法是典型的线搜索方法. 设 f f f 是 R n \mathbb{R}^n R…

操作系统大会2023 | 麒麟信安根植openEuler社区,全场景·同生态·共未来

12月15-16日&#xff0c;以“崛起数字时代 引领数智未来”为主题的操作系统大会 &openEuler Summit 2023在北京举行。产业组织、开放原子开源基金会、学术领袖、行业用户、生态伙伴以及开发者等&#xff0c;共同探讨操作系统产业发展方向和未来机遇&#xff0c;展示最新合作…

playbook

playbook list together nested with_items Templates 模版 jinja模版架构&#xff0c;通过模版可以实现向模版文件传参&#xff08;python转义&#xff09;把占位符参数传到配置文件中去。 生成一个目标文本文件&#xff0c;传递变量到需要配置文件当中&#xff08;web开…

el-table 实现行拖拽排序

element ui 表格实现拖拽排序的功能&#xff0c;可以借助第三方插件Sortablejs来实现。 引入sortablejs npm install sortablejs --save组件中使用 import Sortable from sortablejs;<el-table ref"el-table":data"listData" row-key"id" …

R语言【cli】——cli_warn可以更便捷的在控制台输出警告信息

Package cli version 3.6.2 cli_warn(message, ..., .envir parent.frame()) 参数【message】&#xff1a;它是通过调用 cli_bullets() 进行格式化的。进一步地&#xff0c;还需要调用 inline-makeup&#xff08;内联标记&#xff09;。 参数【...】&#xff1a;传递给 rlan…