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

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.kler.cn/a/595259.html

相关文章:

  • Umi-OCR 实践教程:离线、免费、高效的图像文字识别工具
  • 家庭网络安全:智能设备与IoT防护——当“智能家居”变成“僵尸网络”
  • Java 记忆链表,LinkedList 的升级版
  • PostgreSQL_数据表结构设计并创建
  • 使用 Ansys Fluent 评估金属管道腐蚀
  • 1204. 【高精度练习】密码
  • 《Python实战进阶》No42: 多线程与多进程编程详解(上)
  • 【漫话机器学习系列】153.残差平方和(Residual Sum of Squares, RSS)
  • LeetCode 2680.最大或值:位运算
  • 如何在IPhone 16Pro上运行python文件?
  • 【UI设计】一些好用的免费图标素材网站
  • el-select下拉框,搜索时,若是匹配后的数据有且只有一条,则当失去焦点时,默认选中该条数据
  • ngx_http_conf_port_t
  • 每天学一个 Linux 命令(6):shutdown
  • QT学习笔记3
  • ⭐算法OJ⭐二叉树的后序遍历【树的遍历】(C++实现)Binary Tree Postorder Traversal
  • 强大的AI网站推荐(第二集)—— V0.dev
  • 解释下Cumulative Layout Shift (CLS)以及如何优化?
  • JavaScript(JS)单线程影响速度
  • Linux:gsd-account进程异常内存泄漏排查