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

vant2 vue2 两个输入框联动验证遇到的问题

需求是两个输入框,一个输上限A,一个输下限B


<van-fieldv-model="formData.upperLimit"name="upperLimit"type="number"label="上限"required:formatter="formatter"/><van-fieldv-model="formData.lowerLimit":rules="[{ required: true, message: '请输入预警下限' },{validator: (val) => {return val < this.formData.comUpperLimit},message: '下限必须小于上限'}]"name="lowerLimit"type="number"label="下限"required:formatter="formatter"/>

下限输入时能正常触发验证,但是当输入上限时,下限的验证无法被触发

所以在上限输入时 触发验证

this.$refs.formRef.validate();

但实际开发过程中发现验证不会更新保持一直飘红或不触发验证,导致我一直怀疑方法是不是用的不对

退回到原本的只验证下限,发现 上限输入12,下限输入2 都还是飘红

所以打印了数据类型,发现被数据类型变成了string。

所以加上类型转换,再次测试

[{ required: true, message: '请输入预警下限' },{validator: (val) => {return Number(val) < Number(this.formData.comUpperLimit)},message: '下限必须小于上限'}]

上下限联动成功

http://www.lryc.cn/news/544180.html

相关文章:

  • 硬件工程师入门教程
  • 如何使用Docker搭建哪吒监控面板程序
  • python-leetcode 45.二叉树转换为链表
  • uni小程序wx.switchTab有时候跳转错误tab问题,解决办法
  • 【一起学Rust | 框架篇 | Tauri2.0框架】在Tauri应用中设置Http头(Headers)
  • STM32G473VET6 在 Keil MDK 下手动移植 FreeRTOS 指南
  • 波导阵列天线 学习笔记11双极化全金属垂直公共馈电平板波导槽阵列天线
  • DeepSeek-R1自写CUDA内核跑分屠榜:开启GPU编程自动化新时代
  • 001 Kafka入门及安装
  • 2024 年出现的 11 大数据收集趋势
  • 动态内容加载的解决方案:Selenium与Playwright对比故障排查实录
  • OSPF BIT 类型说明
  • java excel xlsx 增加数据验证
  • React + TypeScript 数据血缘分析实战
  • 魔搭 ModelScope 模型下载
  • WorldQuant Brain的专属语言——Fast Expression
  • 在低功耗MCU上实现人工智能和机器学习
  • MSSQL2022的一个错误:未在本地计算机上注册“Microsoft.ACE.OLEDB.16.0”提供程序
  • (2.26 “详细分析示例“ 暴力+位运算 最长优雅子数组)leetcode 2401
  • 【洛谷贪心算法题】P1094纪念品分组
  • 基于coze+微信小程序的ai对话
  • [Linux]项目自动化构建工具-make/Makefile
  • Dashboard-frps
  • android 新增native binder service 方式(三)
  • (IDE接入DeepSeek)简单了解DeepSeek接入辅助开发与本地部署建议
  • seasms v9 注入漏洞 + order by注入+​information_schema​解决方法
  • 【实战 ES】实战 Elasticsearch:快速上手与深度实践-1.3.1单节点安装(Docker与手动部署)
  • 如何使用useEffect模拟组件的生命周期?
  • 【DeepSeek】私有化本地部署图文(Win+Mac)
  • Python 入门教程(2)搭建环境 | 2.3、VSCode配置Python开发环境