使用el-input数字校验,输入汉字之后校验取消不掉

先说说复现方式

本来input是只能输入数字的,然后你不小心输入了汉字,触发校验了,然后这时候,你发现校验取消不掉了

就这样了

咋办啊,你一看校验没错啊,各种number啥的也写了,发现没问题啊

javascript 复制代码
<el-input
  v-number-input
  v-model.number="specification.goodsNum"
  placeholder="对应商品数量"
  maxlength="5"
 ></el-input>

goodsNum: [
 {
    required: true,
    message: "对应商品数量必填,限输入5个字符",
    trigger: "blur",
  },
],

然后就绞尽脑汁想,哪出问题了呢,又是想失焦之后去掉校验,又是啥啥的,都不好使

你猜怎么着

用最原始的方法

javascript 复制代码
<el-input
  v-model="specification.goodsNum"
  placeholder="对应商品数量"
  maxlength="5"
 ></el-input>

const validateNumber = (rule, value, callback) => {
if (!/^\d*\.?\d{0,2}$/.test(value)) {
    callback(new Error("请输入数字,最多2位小数"));
  } else {
    callback();
  }
};

goodsNum: [
{ validator: validateNumber, trigger: "blur" },
  {
    required: true,
    message: "对应商品数量必填,限输入5个字符",
    trigger: "blur",
  },
],

对,就这样写,嘎嘎好使,再也不报错了

相关推荐
就叫_这个吧14 小时前
Java递归方法实现面包屑导航
java·开发语言
fīɡЙtīиɡ ℡15 小时前
AI 应用系统设计
java·开发语言·人工智能
今天AI了吗16 小时前
Python 基础语法(一):常量、变量、输入输出与运算符
开发语言·数据库·人工智能·python·sql·深度学习·机器学习
kyriewen17 小时前
我把最常踩的8个CORS跨域报错整理了一遍——第8个去年还不存在
前端·javascript
TELL52117 小时前
selenium webdriver 第二次初始化的异常
开发语言·python
动词ing17 小时前
【C语言】自定义函数+指针入门
c语言·开发语言·算法
夜雪一千17 小时前
MySQL 全局锁是什么?原理、风险、备份踩坑完整实战
android·mysql·adb
重生之后端学习17 小时前
283. 移动零[简单]✅
开发语言·数据结构·算法·leetcode·职场和发展
动词ing18 小时前
【C语言】结构体+文件基础
c语言·开发语言·数据结构