input 正则限制只能输入数字且最多只有个小数点并保留2位小数

本文详细介绍了如何使用JavaScript创建一个数字输入框,该输入框能够自动清除非法字符,限制小数位数,并确保数值的有效性。通过正则表达式和函数调用,实现了输入数字的格式控制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<input type="text" name="je" onkeyup="clearNoNum(this)"/>

function clearNoNum(obj){
        obj.value = obj.value.replace(/[^\d.]/g,"");  //清除“数字”和“.”以外的字符
        obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的
        obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
        obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数
        if(obj.value.indexOf(".")< 0 && obj.value !=""){//以上已经过滤,此处控制的是如果没有小数点,首位不能为类似于 01、02的金额
            obj.value= parseFloat(obj.value);
        }
    }

### 实现方案 以下是通过 JavaScript 和 Vue.js 的方式来实现 `input` 输入框仅允许输入数字小数点最多保留两位的功能。 #### 方法一:纯 JavaScript 实现 可以利用正则表达式和事件监听器来限制用户的输入行为。以下是一个完整的解决方案: ```javascript document.querySelector('input').addEventListener('input', function () { this.value = this.value.replace(/^(\d*\.\d{0,2}).*/, '$1'); // 限制小数点最多两位[^1] }); ``` 此方法的核心在于使用正则表达式匹配替换不符合条件的部分,从而确保用户无法输入多余的小数。 --- #### 方法二:Vue.js 中的实现 如果是在 Vue.js 环境下开发,则可以通过绑定 `@input` 或者自定义指令的方式完成同样的功能。 ##### 方案 A:基于 `@input` 事件处理逻辑 在模板中可以直接绑定 `onkeyup` 属性或者通过 Vue 的事件处理器来动态修改值。 ```html <el-input v-model="value" @input="(v) => value = v.replace(/^(\d*\.\d{0,2}).*/, '$1')" ></el-input> ``` 上述代码会实时监控输入框的变化,自动修正超出范围的内容[^4]。 ##### 方案 B:自定义指令实现更灵活的行为 对于更加复杂的场景,推荐使用 Vue 自定义指令的方式来增强可维护性和复用性。 ```javascript // 注册全局指令 app.directive('number-limit', { mounted(el) { el.addEventListener('input', (e) => { e.target.value = e.target.value.replace(/^(\d*\.\d{0,2}).*/, '$1'); }); } }); // 使用该指令 <el-input v-number-limit v-model="value"></el-input> ``` 这种方式不仅能够满足当前需求,还便于扩展到更多类似的输入验证场景[^5]。 --- #### Android 平台上的实现思路 虽然题目主要关注的是 Web 开发环境下的解决办法,但如果涉及移动端应用开发(如 Android),也可以采用相似的技术手段——即通过设置 InputFilter 来限定输入内容格式[^3]。 ```java EditText editText = findViewById(R.id.editText); editText.setFilters(new InputFilter[]{new DecimalDigitsInputFilter(9, 2)}); ``` 其中 `DecimalDigitsInputFilter(int integerCount, int fractionCount)` 参数分别表示整数部分的最大长度以及小数部分最大长度。 --- ### 总结 无论是前端还是原生移动开发领域,针对特定类型的字段校验都离不开基本的数据清洗机制。以上列举了几种常见框架和技术栈内的实践案例供参考选用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值