当前位置: 首页 > news >正文

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

  <uv-input inputAlign="right" type="number" v-model="quantity" placeholder="请输入单价"
    border="none" @input="e => handleInput(e, 2)"/>
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;
};
http://www.dtcms.com/a/83607.html

相关文章:

  • `sscanf` 和 `scanf` 的区别
  • 磁盘清理工具-TreeSize Free介绍
  • 使用 QR-Code-Styling 在 Vue 3 中生成二维码
  • 【004安卓开发方案调研】之Ionic+Vue+Capacitor开发安卓
  • Z型隶属函数(Z-shaped Membership Function)的详细介绍及python示例
  • logisim安装以及可能出现的问题
  • _KiComputeTimerTableIndex函数分析
  • Excel筛选填充的正确方法
  • 在 Ubuntu 20.04 上重新启动网络
  • 掌握新编程语言的秘诀:利用 AI 快速上手 Python、Go、Java 和 Rust
  • 蓝桥杯真题 3513.岛屿个数
  • doris:时区管理
  • 学习笔记:黑马程序员JavaWeb开发教程(2025.3.22)
  • 鱼书--学习2
  • Python入门基础
  • 【数据分享】2000—2024年我国省市县三级逐年归一化植被指数(NDVI)数据(年平均值/Shp/Excel格式)
  • MySQL数据库精研之旅第二期:库操作的深度探索
  • 计算机基础:编码04,认识反码和补码
  • 深度学习3-pytorch学习
  • python学习笔记--实现简单的爬虫(二)
  • AutoImageProcessor代码分析
  • Python设计模式 - 适配器模式
  • 二十四、实战开发 uni-app x 项目(仿京东)- 前后端实现登录注册
  • 在线生成自定义二维码
  • 失物招领|校园失物招领系统|基于Springboot的校园失物招领系统设计与实现(源码+数据库+文档)
  • 【 <二> 丹方改良:Spring 时代的 JavaWeb】之 Spring Boot 中的异常处理:全局异常与自定义异常
  • 【自学笔记】Linux基础知识点总览-持续更新
  • 利用Dify编制用户问题意图识别和规范化回复
  • C#单例模式
  • 常考计算机操作系统面试习题(二)(中)