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

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

相关推荐
Wang's Blog4 分钟前
Java 项目实战: 外卖平台优化-YApi接口管理平台与文档导入导出
java·开发语言·yapi
专业程序开发源9 分钟前
django新闻推荐系统70655-计算机课程设计、毕业设计
java·javascript·spring boot·后端·python·django·课程设计
jimy111 分钟前
基类没有虚析构函数,基类指针删除派生类对象,行为是未定义的
开发语言·c++
迅猛龙办公室20 分钟前
python获取星期字符串
开发语言·python
acd1200924 分钟前
前端随笔:数据明明变了,Vue 页面就是不更新
前端·javascript·vue.js
泡海椒1 小时前
JQuick-Excel dateFormat 转换实战:日期值与 FORMAT 显示格式的边界
开发语言·python·excel
树下困觉眯1 小时前
View绘制流程学习--获取WindowManager的三种方式
android·系统架构·view design
白杨尚青2 小时前
C++入门篇(十三):vector(上)——动态数组:构造、空间增长与迭代器失效
开发语言·c++·笔记·算法·stl
江江爱编程2 小时前
java零基础保姆级教学01
java·开发语言
传人2 小时前
悬停旋转放大和位移效果如何写
前端·javascript·css