uniapp小程序,输入框限制输入(正整数、小数后几位)

html 复制代码
  <uv-input inputAlign="right" type="number" v-model="quantity" placeholder="请输入单价"
    border="none" @input="e => handleInput(e, 2)"/>
javascript 复制代码
const quantity = ref()
const handleInput = (e, decimals) =>{
  //setTimeout解决input不及时更新
  setTimeout(() => {
    quantity = handleNumberInput(e, decimals)
  }, 0)
}
/**
 * 处理数字输入
 */
 function handleNumberInput (
  e: string | number /**输入的值 */,
  decimals: number = 2 /**小数点位数 */
) => {
  if (e === "") return;
  let result = "";
  result = String(e);
  // 只能输入正整数
  if (!decimals) {
    return (
      result
        // 第一步:去除非数字和小数点
        .replace(/[^\d.]/g, "")
        // 第二步:替换开头的0、所有非数字字符、所有小数点
        .replace(/^0|[^\d]|[.]/g, "")
    );
  }
  // 处理小数位数
  if (decimals > 0) {
    const decimalRegex = new RegExp(`(\\.\\d{${decimals}})\\d+$`, "g");
    result = result
      // 第一步:去除非数字和小数点
      .replace(/[^\d.]/g, "")
      // 第二步:处理前导0(非零开头的数字)
      .replace(/^0+(\d)/, "$1")
      // 第三步:处理开头单独的小数点,转为0.
      .replace(/^\./, "0.")
      // 第四步:保留第一个小数点,去掉多余的
      .replace(/\./g, (s, offset, str) =>
        offset === str.indexOf(".") ? s : ""
      )
      // 第五步:截断小数部分到decimals位
      .replace(decimalRegex, "$1")
      // 第六步:处理整数部分的前导0(比如0后面没有小数点的情况)
      .replace(/^0+([1-9])/, "$1")
      // 确保精确到指定位数
      .replace(new RegExp(`(\\.[\\d]{${decimals}}).*$`), "$1"); 
  }
  return result;
};
相关推荐
2501_916007474 小时前
Bundle ID 注册与管理 App ID 创建指南 命名规则 权限开关与删除注意事项
android·ios·小程序·https·uni-app·iphone·webview
PedroQue9910 小时前
uni-app路由插件化:解锁高效开发新姿势
前端·uni-app
凡科网小帆10 小时前
2026小程序商城做的比较好的品牌,怎么选小程序商城品牌
小程序·小程序商城
2501_9159090611 小时前
iOS 证书创建与管理 类型限制 p12 密码与云备份实操
android·ios·小程序·https·uni-app·iphone·webview
anyup11 小时前
【2026年8月】uView Pro 千星,还拿到了 GVP
前端·uni-app·github
andr_gale1 天前
02_uniapp自定义上凸效果的底部TabBar
前端·javascript·uni-app·移动端
黄华SJ520it1 天前
顶俏洗衣液模式制度开发介绍:S2B2C社交分销+多门店核销系统全解析
前端·数据库·小程序·零售·系统开发
不爱说话郭德纲1 天前
uni-app x iOS 扫码模糊怎么办?AVFoundation 灰尘级别摄像头助你超广角聚焦
前端·uni-app·app
北极糊的狐1 天前
钉钉小程序报错data.formatTime is not a function是因为 axml 模板中不能直接调用 Page 内自定义方法!
java·小程序·钉钉
CHB2 天前
uni-app x 蒸汽模式 性能测试基准报告 Benchmark【Android版】
android·ios·uni-app