uniapp小程序，输入框限制输入（正整数、小数后几位）

Forevermoremo

已于 2025-03-26 16:50:27 修改

阅读量798

点赞数 3

文章标签： uni-app 小程序

于 2025-03-21 16:55:22 首次发布

本文链接：https://blog.csdn.net/sunny123x/article/details/146424542

版权

  <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;
};