🎉 前端福音！uni开发告别数字输入框的非法字符噩梦：nx-number-input

🎉 前言

在 Web 开发中，数字输入框的校验简直是程序员共同的痛！当你信心满满地使用 <input type="number">，以为万事大吉时，用户总能给你惊喜：输入++--符号、开头连打十个 0、甚至在小数点后塞入一堆乱码！测试同学拿着用例微微一笑：“这里为什么能输入非法字符？”

别慌！今天给大家安利一款UNI开发中专治各种数字输入不服的神器 ——nx-number-input！

🔍 为什么我们需要它？

• type=number的致命缺陷：
  原生输入框允许输入+-符号，也无法阻止00001这种反人类操作
• 手动校验太痛苦：
  正则写到头秃，还要兼容整数、小数、精度控制...
• 用户体验割裂：
  等用户输完再报错？不如从源头拦截非法字符！

🚀 四大核心超能力

通过numType参数一键切换模式：

<!-- 基础数字模式 -->
<nx-number-input v-model="value" numType="num" />

<!-- 严格整数模式（禁止开头0） -->
<nx-number-input v-model="value" numType="int" />

<!-- 小数模式（智能防多小数点） -->
<nx-number-input v-model="value" numType="float" />

<!-- 精度控制模式（自动保留2位小数） -->
<nx-number-input v-model="value" numType="float2" />

📌 实用特性一览

- ✅ **实时过滤**：输入过程直接干掉非法字符
- ✅ **零冗余校验**：自动处理连续0开头 `000123 → 123`
- ✅ **小数点防抖**：`1.2.3.4 → 1.234`
- ✅ **精度控制**：`float2`模式自动截断多余小数位
- ✅ **范围限制**：通过`min/max`设定数值边界

⚙️ 黑科技实现揭秘

核心逻都在正则里！小伙伴也可根据需要自己扩展

    const numInput = (e) => {
        let result = null
        const inputFnMap = {
            // 只能输入数字的验证;
            num: () => {
                const regx = /\D/g
                result = e.detail.value.replace(regx, '')
            },
            // 只能输入整数的验证,首位不能出现+，-符号或者连续0
            int: () => {
                const regx = /\D/g
                result = e.detail.value.replace(regx, '')
                const regx1 = /^0+(\d)/g
                result = result.replace(regx1, '$1')
            },
            // 只能输入小数的验证,首位不能出现+，-符号或者连续0
            float: () => {
                const regx = /[^0-9.]/g
                result = e.detail.value.replace(regx, '')
                const regx1 = /^0+(\d)/g
                result = result.replace(regx1, '$1')
                result = result.replace('.', '$#$')
                result = result.replace(/./g, '')
                result = result.replace('$#$', '.')
            },
            // 只能输入小数的验证,首位不能出现+，-符号或者连续0,精度为2
            float2: () => {
                const regx = /[^0-9.]/g
                result = e.detail.value.replace(regx, '')
                const regx1 = /^0+(\d)/g
                result = result.replace(regx1, '$1')
                result = result.replace('.', '$#$')
                result = result.replace(/./g, '')
                result = result.replace('$#$', '.')
                if (result.includes('.')) {
                    const reg3 = /^(\d+).(\d\d).*$/
                    result = result.replace(reg3, '$1.$2')
                }
            },
        }

        inputFnMap[props.numType]()
        if (isNumber(props.max) && result > props.max) {
            result = props.max
        }
        if (isNumber(props.min) && result < props.min) {
            result = props.min
        }

        nextTick(() => {
            inputValue.value = result
            emit('update:modelValue', result)
        })
    }

💡 设计哲学：与其事后校验报错，不如让用户根本输不进去错误内容！

🌈 适用场景

1. 金融系统：金额输入（再也不用担心用户输入100..00元）

2. 库存管理：商品数量必须为正整数

3. 数据报表：小数点精度强制统一

4. 移动端表单：避免键盘类型切换的体验割裂

👉 传送门：nx-number-input 插件主页