输入框input,正则校验输入的是正数

文章讲述了如何使用正则表达式处理输入的数字,移除连续的0、多余的0以及保证不超过100且不包含01的情况,通过`handleInput`函数实现数字格式的规范化。

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

οninput=“value=value.replace(/^(0{2,})/g, ‘0’).replace(/^(?!0$)0+(?!.)/, ‘’).replace(/[^\d.]+/g, ‘’).replace(/(…*)./g, ‘$1’)”
解释:


    replace(/^(0{2,})/g, '0'):这个正则表达式匹配开头有连续两个或更多的0的情况,并将其替换为单个0。
    replace(/^(?!0$)0+(?!\.)/, ''):这个正则表达式匹配开头有多个0的情况(但不包括单个0),并将其替换为空字符串。这个正则表达式确保数字不以多个0开头。
    replace(/[^\d.]+/g, ''):这个正则表达式匹配任何不是数字或小数点的字符,并将其替换为空字符串。这个正则表达式用于删除除数字和小数点之外的任何字符。
    replace(/(\..*)\./g, '$1'):这个正则表达式匹配小数点后面还有小数点的情况,并将第二个小数点及其后面的内容替换为第一个小数点前的内容。这个正则表达式用于确保只有一个小数点出现在输入中。

或是采用方法@input=“handleInput”,输入的是数字,排除00,01情况,且不大于100

 handleInput (value, key) {
     	value = value.replace(/^[0]+[0-9]{1,}|[^\d]/g, '');
       value = (parseInt(value) || '') <= 100 ? value : value.slice(0, -1);
       this.params[key] = value;
}
### 实现限制 input 输入框仅接受正数、负数和小数的方法 在前端开发中,可以通过多种方式实现对 `input` 输入框输入内容进行限制。以下是几种常见的实现方法: #### 方法一:使用正则表达式校验 通过监听用户输入事件(如 `@input` 或 `@keypress`),结合正则表达式过滤非法字符。以下是一个基于 Vue.js 的示例代码: ```javascript methods: { validateInput(event) { const regex = /^-?\d*\.?\d*$/; // 正则表达式匹配正数、负数和小数[^1] if (!regex.test(event.target.value)) { event.target.value = event.target.value.slice(0, -1); // 移除非法字符 } } } ``` ```html <el-input v-model="formInfo.amountYear" @input="validateInput" clearable></el-input> ``` #### 方法二:绑定自定义校验函数 通过绑定 `@keypress.native` 事件,拦截非数字键的输入。这种方法可以实时阻止非法字符的输入。 ```html <el-input v-model="formInfo.amountYear" clearable @keypress.native="onlyNumber" ></el-input> ``` ```javascript methods: { onlyNumber(event) { const charCode = (event.which) ? event.which : event.keyCode; if ( (charCode !== 45 || // 允许负号 (event.target.value.indexOf('-') !== -1 && event.target.value.length > 0)) && (charCode !== 46 || // 允许小数点 (event.target.value.indexOf('.') !== -1)) && (charCode < 48 || charCode > 57) // 允许数字 ) { event.preventDefault(); // 阻止非法字符输入 } } } ``` #### 方法三:使用 `type="number"` 并隐藏步进器 如果使用 `<el-input>` 的 `type="number"` 属性,虽然能够限制输入为数字类型,但会显示默认的步进器,并且可能会将字母 `e` 或 `E` 转换为科学计数法表示的数字。可以通过以下方法隐藏步进器并避免科学计数法问题: ```css /* 隐藏步进器 */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } ``` ```html <el-input v-model="formInfo.amountYear" type="number" @wheel.prevent step="any" onkeydown="return (event.keyCode !== 69 && event.keyCode !== 101)" ></el-input> ``` #### 方法四:结合后端校验 尽管前端校验可以提升用户体验,但无法完全防止恶意输入。因此,建议在后端对输入数据进行再次校验,确保数据的有效性和安全性。 --- ### 注意事项 1. **用户体验**:限制输入框的内容时,需注意用户体验,例如提供明确的错误提示信息。 2. **兼容性**:不同浏览器对 `type="number"` 的支持可能存在差异,因此建议测试多浏览器兼容性。 3. **边界值处理**:需要考虑特殊情况,例如连续的小数点或负号输入。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值