使用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",
  },
],

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

相关推荐
一只小风华~2 小时前
JavaScript 函数
开发语言·前端·javascript·ecmascript·web
苕皮蓝牙土豆2 小时前
Qt 分裂布局:QSplitter 使用指南
开发语言·qt
仰望星空的凡人3 小时前
【JS逆向基础】数据库之MongoDB
javascript·数据库·python·mongodb
樱花开了几轉4 小时前
React中为甚么强调props的不可变性
前端·javascript·react.js
猿小蔡-Cool5 小时前
Android ADB命令之内存统计与分析
android·adb
Monkey-旭5 小时前
Android Handler 完全指南
android·java·handler
Brookty5 小时前
Java线程安全与中断机制详解
java·开发语言·后端·学习·java-ee
Mr...Gan5 小时前
VUE3(四)、组件通信
前端·javascript·vue.js
從南走到北6 小时前
JAVA东郊到家按摩服务同款同城家政服务按摩私教茶艺师服务系统小程序+公众号+APP+H5
android·java·开发语言·微信小程序·小程序
alexhilton6 小时前
学会用最优雅的姿式在Compose中显示富文本
android·kotlin·android jetpack