uni-app input-number数字输入框组件能输入两个负号 且能以数字 0 开头输入

uni-app input-number数字输入框组件能输入两个负号 且能以数字 0 开头输入

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 win10
HBuilderX 正式
HBuilderX版本 3.0.7
手机系统 全部
手机版本号 Android 10
手机厂商 华为
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

测试过的手机：

H5、手持PDA

操作步骤：

  • input-number数字输入框组件能输入两个负号，且能以数字 0 开头输入

预期结果：

  • input-number 数字输入框组件不能输入两个负号，且不能以数字 0 开头输入

实际结果：

  • input-number 数字输入框组件能输入两个负号，且能以数字 0 开头输入

bug描述：

  • input-number 数字输入框组件能输入两个负号，且能以数字 0 开头输入

f80ff31534ea8fee0602bfb99f8e15fa

3e25faa066d685cf7f4bb524fcd76aca


更多关于uni-app input-number数字输入框组件能输入两个负号 且能以数字 0 开头输入的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

浏览器的特性就是这样，你用html做个input一样的效果。

更多关于uni-app input-number数字输入框组件能输入两个负号 且能以数字 0 开头输入的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-app input-number组件的问题。该组件在输入验证方面存在缺陷，允许用户输入多个负号以及以0开头的数字。

解决方法建议：

  1. 使用原生input type="number"并添加自定义验证逻辑
  2. 在@change事件中手动校验输入值
  3. 使用正则表达式过滤非法输入

示例代码：

<input type="number" 
       @input="handleInput"
       :value="numberValue"/>

methods: {
  handleInput(e) {
    let value = e.target.value
    // 过滤多个负号
    if(value.match(/-.*-/)) {
      value = value.replace(/-/g, '')
      if(value !== '') value = '-' + value
    }
    // 过滤前导0
    if(value.match(/^0\d+/)) {
      value = value.replace(/^0+/, '')
    }
    this.numberValue = value
  }
}
回到顶部