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

在vue3+ts的项目中,如何解决vant组件自带表单校验不生效?

问题描述:

点击发送验证码后,为了让逻辑更加严谨,使用了vant组件自带的表单校验,进行二次校验,防止验证码发送成功后,登录手机号被二次修改,但根据官网描述cv之后不生效,甚至连获取验证码后的倒计时也不走了...

 代码如下:

// 获取验证码
const getCode = async () => {


  // 节流:如果时间>0就不执行
  if (time.value > 0) return


  time.value = 10
  const res = await getLoginCode(mobile.value, 'login')
  console.log(res, '获取验证码')
  code.value = res.data.code


  // vant自带的表单校验,防止验证码获取后,手机号再次被修改,再次校验不通过就阻止执行
  console.log(formRef.value, 'fromRef')

  formRef.value?.validate('mobile').catch((error) => {
    console.log(error, 'error')
  })

  timeId = setInterval(() => {
    time.value -= 1
    codeText.value = time.value + 's后再次获取'
    if (time.value < 1) {
      codeText.value = '发送验证码'
      return clearInterval(timeId)
    }
  }, 1000)
}

用catch捕捉出来的错误是undefined,也就是validate方法传参的name没有值,检查发现是结构里面没加name属性

 

修改后的代码如下:

 <van-form autocomplete="off" @submit="login" ref="formRef">
      <van-field
        name="mobile"
        v-model="mobile"
        :rules="mobileRules"
        placeholder="请输入手机号"
        type="tel"
      ></van-field>

在需要校验的表单项中加上name属性就可以了

业务代码优化:

const getCode = async () => {


  // 节流:如果时间>0就不执行
  if (time.value > 0) return


  time.value = 10
  const res = await getLoginCode(mobile.value, 'login')
  console.log(res, '获取验证码')
  code.value = res.data.code

  // vant自带的表单校验,防止验证码获取后,手机号再次被修改,再次校验不通过就阻止执行
  // validate的返回值是一个promise,但这里不需要接收返回值,直接加一个await更简单 


  await formRef.value?.validate('mobile')

  timeId = setInterval(() => {
    time.value -= 1
    codeText.value = time.value + 's后再次获取'
    if (time.value < 1) {
      codeText.value = '发送验证码'
      return clearInterval(timeId)
    }
  }, 1000)
}

相关文章:

在vue3+ts的项目中,如何解决vant组件自带表单校验不生效?

问题描述&#xff1a; 点击发送验证码后&#xff0c;为了让逻辑更加严谨&#xff0c;使用了vant组件自带的表单校验&#xff0c;进行二次校验&#xff0c;防止验证码发送成功后&#xff0c;登录手机号被二次修改&#xff0c;但根据官网描述cv之后不生效&#xff0c;甚至连获取…...

华为OD机试真题Python实现【子序列长度】真题+解题思路+代码(20222023)

子序列长度 题目 有 N 个正整数组成的一个序列 给定一个整数sum 求长度最长的的连续子序列使他们的和等于sum 返回次子序列的长度 如果没有满足要求的序列 返回-1 🔥🔥🔥🔥🔥👉👉👉👉👉👉 华为OD机试(Python)真题目录汇总 ## 输入 两行输入 第一行…...

【答疑现场】我一个搞嵌入式的,有必要学习Python吗?

【答疑现场】我一个搞嵌入式的&#xff0c;有必要学习Python吗&#xff1f; 文章目录1 写在前面2 一个结论3 Python在嵌入式领域能干啥事4 Python是用来干大事的5 友情推荐6 福利活动大家好&#xff0c;我是架构师李肯&#xff0c;一个专注于嵌入式物联网系统架构设计的攻城狮。…...

MySQL存表报错问题 Incorrect string value

MySQL存表报错问题 Incorrect string value 问题 Incorrect string value: ‘\xF0\xA8\xA5\xA5\xE5\xAD…’ for column ‘xxxxxxx’ at row 1 意思是错误的字符&#xff0c;常出现在添加中文字符的时候。这个问题的产生原因主要是因为一些特色中文字符或者Emoji表情占4个字…...

SAP ABAP DIALOG长文本编辑框

1. 在SCREEN100 中创建一个定制控制(容器)&#xff0c;命名为PP *&---------------------------------------------------------------------* *& Report ZTEST_TEXT *& *&---------------------------------------------------------------------* *& *…...

电子技术——负反馈特性

电子技术——负反馈特性 本节我们进一步深入介绍负反馈特性。 增益脱敏性 假设 β\betaβ 是一个常数。考虑下面的微分方程&#xff1a; dAfdA(1Aβ)2dA_f \frac{dA}{(1 A\beta)^2} dAf​(1Aβ)2dA​ 将上式除以 AfA1AβA_f \frac{A}{1A\beta}Af​1AβA​ 得到&#xff1…...

网站移动端性能优化方法

移动端优化 click 的 300ms 延迟响应 click 的 300ms 延迟是由双击缩放(double tap to zoom)所导致的,由于用户可以进行双击缩放或者双击滚动的操作,当用户一次点击屏幕之后,浏览器并不能立刻判断用户是确实要打开这个链接,还是想要进行双击操作。因此,移动端浏览器就等…...

2023年AI语音会议汇总

2023年&#xff0c;AI语音领域学术会议精彩纷呈&#xff0c;语音之家汇总了国内外重要的会议呈现给大家&#xff0c;大家可根据时间统筹安排好2023年的学术活动交流行程。如果信息有误&#xff0c;欢迎指正。 ICASSP 2023 2023 IEEE International Conference on Acoustics, S…...

Mybatis持久层框架 | Mapper加载方式、目录结构解析

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; Mapper(resource、class、package)加载方式 resource方式加载 通过resource或url加载单个mapper&#xff0c;接口文件与映射文件不在同一路径下&#xff0c;只能用re…...

九龙证券|创业板向未盈利企业敞开大门 考验投行估值定价能力

未盈余企业上市有了新选择。2月17日&#xff0c;全面实行股票发行注册制相关准则规矩发布施行。深交所发布《深圳证券交易所创业板股票上市规矩&#xff08;2023年修订&#xff09;》及《关于未盈余企业在创业板上市相关事宜的告诉》&#xff0c;“预计市值不低于50亿元&#x…...

「TCG 规范解读」第12章 TPM工作组 TCG身份验证研讨

可信计算组织&#xff08;Ttrusted Computing Group,TCG&#xff09;是一个非盈利的工业标准组织&#xff0c;它的宗旨是加强在相异计算机平台上的计算环境的安全性。TCG于2003年春成立&#xff0c;并采纳了由可信计算平台联盟&#xff08;the Trusted Computing Platform Alli…...

Logstash:在 Logstash 管道中的定制的 Elasticsearch update by query

我们知道 Elasticsearch output plugin 为我们在 Logstash 的 pipeline 中向 Elasticsearch 的写入提供了可能。我们可以使用如下的格式向 Elasticsearch 写入数据&#xff1a; elasticsearch {hosts > ["https://localhost:9200"]index > "data-%{YYYY.M…...

Spring Cloud Kubernetes环境下使用Jasypt

前言最近半年着手开始做了基于微服务的中台项目&#xff0c;整个项目的技术栈采用的是Java Spring Cloud Kubernetes Istio。业务开放上还是相当顺利的。但是在安全审核上&#xff0c;运维组提出了一个简易。现在项目一些敏感配置&#xff0c;例如MySQL用户的密码&#xff0…...

Kotlin-面向对象

本片博客主要写创建对象&#xff0c;创建接口&#xff0c;创建抽象类&#xff0c;data关键字的作用 创建对象 如何声明一个对象&#xff0c;使用class关键字 格式为&#xff1a; class 对象名字(对象属性名&#xff1a;属性类型…)&#xff5b;&#xff5d; 如果对象没有函数…...

循环、函数、对象——js基础练习

目录 一、循环练习 1.1 取款机案例 1.2 九九乘法表 1.3 根据数据生成柱形图 1.4 冒泡排序 1.6综合大练习 二、函数 2.1 转换时间案例 三、对象 1. 遍历数组对象 2. 猜数字游戏 3. 生成随机颜色 4. 学成在线页面渲染案例 一、循环练习 1.1 取款机案例 // 准备一个…...

精确控制 AI 图像生成的破冰方案,ControlNet 和 T2I-Adapter

ControlNet 和 T2I-Adapter 的突破性在哪里&#xff1f;有什么区别&#xff1f;其它为 T2I 扩散模型施加条件引导的相关研究ControlNet 和 T2I-Adapter 的实际应用效果如何&#xff1f;使用体验上&#xff0c;跟 SD原生支持的 img2img 有什么区别&#xff1f;ControlNet 在插画…...

让师生“不跑腿”,教育数据治理究竟有何魔力

当前&#xff0c;教育信息化新基础设施正在加紧建设&#xff0c;教育业务系统应用不断推进&#xff0c;各种软硬件平台源源不断地产生着教育数据。海量数据的汇聚和分析&#xff0c;能给教育系统带来什么&#xff1f;如何在教育数字化转型中&#xff0c;探索出基于数据驱动的新…...

力扣-寻找用户推荐人

大家好&#xff0c;我是空空star&#xff0c;本篇带大家了解一道简单的力扣sql练习题。 文章目录前言一、题目&#xff1a;584. 寻找用户推荐人二、解题1.正确示范①提交SQL运行结果2.正确示范②提交SQL运行结果3.正确示范③提交SQL运行结果4.其他总结前言 一、题目&#xff1a…...

mmdetection测试阶段

首先需要训练&#xff0c;训练会自动生成&#xff1a;latest.pth 权重文件 根据权重文件生成“.pkl”文件&#xff1b; 下面以faster_rcnn为例&#xff0c;–out是只生成的权重文件地址&#xff0c;result是生成的pkl文件名&#xff1b; python ./tools/test.py ./configs/…...

【无标题】10.货币系统

题目描述: 在网友的国度中共有 n 种不同面额的货币&#xff0c;第 i 种货币的面额为 a[i]&#xff0c;你可以 假设每一种货币都有无穷多张。为了方便&#xff0c;我们把货币种数为 n、 面额数组为 a[1..n] 的货币系统记作 (n,a)。 在一个完善的货币系统中&#xff0c;每一个非…...

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

云原生玩法三问:构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...