el-input 只能输入整数(包括正数、负数、0)或者只能输入整数(包括正数、负数、0)和小数

本文介绍了如何使用正则表达式限制`el-input`组件只接受特定格式的输入,如正整数、负整数、整数与小数等,并探讨了与其他属性如`type=number`或`v-model.number`的配合使用。作者分享了自己的学习与工作经验,提供了一些正则表达式学习资源。

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

el-input标签即使使用type=number或者v-model.number属性,可能也没有完全符合我们想要的结果,所以下面手动写正则表达式

<el-input v-model="height" placeholder="请输入" @input="handleEdit" />

el-input 只能输入正整数(包括0)

// 在 Input 值改变时触发
handleEdit(e) {
      let value = e.replace(/[^d]/g, ""); // 只能输入数字
      value = value.replace(/^0+(d)/, "$1"); // 第一位0开头,0后面为数字,则过滤掉,取后面的数字
      value = value.replace(/(d{15})d*/, '$1') // 最多保留15位整数
      this.height = value
}

el-input 只能输入正整数(不包括0)

// 在 Input 值改变时触发
handleEdit(e) {
      let value = e.replace(/^(0+)|[^d]+/g,''); // 以0开头或者输入非数字,会被替换成空
      value = value.replace(/(d{15})d*/, '$1') // 最多保留15位整数
      this.height = value
}

el-input 只能输入负整数(包括0)

// 在 Input 值改变时触发
handleEdit(e) {
      let value = e.replace(/[^-d]/g, ""); // 只能输入-和数字
      value = value.replace(/^[1-9]/g, ""); // 不能以1-9开头
      value = value.replace(/-{2,}/g, "-"); // -只能保留一个
      value = value.replace(/(d)-/g, "$1"); // 数字后面不能接-,不能出现类似-11-2,12-,11-23
      value = value.replace(/-(0+)/g, "0"); // 不能出现-0,-001,-0001类似
      value = value.replace(/^0+(d)/, "0"); // 第一位0开头,0后面为数字,则过滤掉,取0
      value = value.replace(/(-d{15})d*/, '$1') // 最多保留15位整数
      this.height = value
}

el-input 只能输入负整数(不包括0)

// 在 Input 值改变时触发
handleEdit(e) {
      let value = e.replace(/[^-d]/g, ""); // 只能输入-和数字
      value = value.replace(/^d/g, ""); // 不能以数字开头
      value = value.replace(/-{2,}/g, "-"); // -只能保留一个
      value = value.replace(/(d)-/g, "$1"); // 数字后面不能接-,不能出现类似-11-2,12-,11-23
      value = value.replace(/(-)0+/g, "$1"); // 不能出现-0,-001,-0001类似
      value = value.replace(/(-d{15})d*/, '$1') // 最多保留15位整数
      this.height = value
}

el-input 只能输入整数(包括正整数、负整数、0)

// 在 Input 值改变时触发
handleEdit(e) {
      let value = e.replace(/[^-d]/g, ""); // 只能输入-和数字
      value = value.replace(/-{2,}/g, "-"); // -只能保留一个
      value = value.replace(/(d)-/g, "$1"); // 数字后面不能接-,不能出现类似-11-2,12-,11-23
      value = value.replace(/-(0+)/g, "0"); // 不能出现-0,-001,-0001类似
      value = value.replace(/^0+(d)/, "$1"); // 第一位0开头,0后面为数字,则过滤掉,取后面的数字
      value = value.replace(/(-?d{15})d*/, '$1') // 最多保留15位整数
      this.height = value
}

el-input 只能输入正小数(包括0)

// 在 Input 值改变时触发
handleEdit(e) {
      let value = e.replace(/[^d.]/g, '') // 只能输入数字和.
      value = value.replace(/^./g, '')  //第一个字符不能是.
      value = value.replace(/.{2,}/g, '.') // 不能连续输入.
      value = value.replace(/(.d+)./g, '$1') // .后面不能再输入.
      value = value.replace(/^0+(d)/, '$1') // 第一位0开头,0后面为数字,则过滤掉,取后面的数字
      value = value.replace(/(d{15})d*/, '$1') // 最多保留15位整数
      value = value.replace(/(.d{2})d*/, '$1')// 最多保留2位小数
      this.height = value
}

el-input 只能输入负小数(包括0)

// 在 Input 值改变时触发
handleEdit(e) {
      let value = e.replace(/[^-d.]/g, ""); // 只能输入-和数字和.
      value = value.replace(/^[^-0]/g, ""); // 只能-和0开头
      value = value.replace(/-{2,}/g, "-"); // 不能连续输入-
      value = value.replace(/(-)./g, "$1"); // -后面不能输入.
      value = value.replace(/.{2,}/g, "."); // 不能连续输入.
      value = value.replace(/(.d+)./g, "$1"); // .后面不能再输入.
      value = value.replace(/(d+|.)-/g, "$1"); // 数字和.后面不能接-,不能出现类似11-, 12.-
      value = value.replace(/(-)0+(d+)/g, '$1$2') // 不能出现-01,-02类似
      value = value.replace(/^0+(d|.)/, "0"); // 第一位0开头,0后面为数字或者.,则过滤掉,取0
      value = value.replace(/(d{15})d*/, '$1') // 最多保留15位整数
      value = value.replace(/(.d{2})d*/, '$1')// 最多保留2位小数
      this.height = value
}

el-input 只能输入负小数(不包括0)

// 在 Input 值改变时触发
handleEdit(e) {
      let value = e.replace(/[^-d.]/g, ""); // 只能输入-和数字和.
      value = value.replace(/^[^-]/g, ""); // 只能-开头
      value = value.replace(/-{2,}/g, "-"); // 不能连续输入-
      value = value.replace(/(-)./g, "$1"); // -后面不能输入.
      value = value.replace(/.{2,}/g, "."); // 不能连续输入.
      value = value.replace(/(.d+)./g, "$1"); // .后面不能再输入.
      value = value.replace(/(d+|.)-/g, "$1"); // 数字和.后面不能接-,不能出现类似11-, 12.-
      value = value.replace(/(-)0+(d+)/g, '$1$2') // 不能出现-01,-02类似
      value = value.replace(/(d{15})d*/, '$1') // 最多保留15位整数
      value = value.replace(/(.d{2})d*/, '$1')// 最多保留2位小数
      this.height = value
}

el-input 输入整数(包括正数、负数、0)和小数,保留15位整数和2位小数

// 在 Input 值改变时触发
handleEdit(e) {
      let value = e.replace(/[^-d.]/g, '') // 只能输入.和-和数字
      value = value.replace(/^./g, '')  //第一个字符不能是.
      value = value.replace(/.{2,}/g, '.') // 不能连续输入.
      value = value.replace(/(.d+)./g, '$1') // .后面不能再输入.
      value = value.replace(/(-)./g, '$1') // -后面不能输入.
      value = value.replace(/-{2,}/g, '-') // -只能保留一个
      value = value.replace(/(d+|.)-/g, '$1') // 数字和.后面不能接-,不能出现类似11-, 12.-
      value = value.replace(/-(0){2,}/g, "$1") // 不能出现-00,-001,-0001类似
      value = value.replace(/(-)0+(d+)/g, '$1$2') // 不能出现-01,-02类似
      value = value.replace(/^0+(d)/, '$1') // 第一位0开头,0后面为数字,则过滤掉,取后面的数字
      value = value.replace(/(d{15})d*/, '$1') // 最多保留15位整数
      value = value.replace(/(.d{2})d*/, '$1')// 最多保留2位小数
      this.height= value
}

$1表示匹配第一个括号里的内容,$2表示匹配第二个括号的内容,比如

value = value.replace(/(-)./g, '$1') // 输入框输入-.就会替换成-
value = value.replace(/(-)(0{2,})/g, '$1$2') // 输入-00,-000,就会替换成-0

写得有点复杂,没办法,刚上手的正则表达式。如果配合el-input标签的type=number或者v-model.number属性,正则表达式部分也许不用写这么多而且复杂。有更简洁的方法请评论区留言
附上:
正则表达式 学习网址1
正则表达式 学习网址2
正则表达式在线测试网址

先自我介绍一下,小编13年上师交大毕业,曾经在小公司待过,去过华为OPPO等大厂,18年进入阿里,直到现在。深知大多数初中级java工程师,想要升技能,往往是需要自己摸索成长或是报班学习,但对于培训机构动则近万元的学费,着实压力不小。自己不成体系的自学效率很低又漫长,而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家,初衷也很简单,就是希望帮助到想自学又不知道该从何学起的朋友,同时减轻大家的负担。添加下方名片,即可获取全套学习资料哦

<think>好的,用户想限制el-input组件只能输入正数,并且在失焦时保留两位小数。首先,我需要回顾一下之前提供的引用内容,看看有哪些方法可以借鉴。 根据引用[1],他们使用了正则表达式来限制输入,比如替换非数字字符,或者在首位是0的时候处理。引用[2]提到在onkeyup事件中使用正则替换,去除非数字小数点的内容。引用[3]则更详细,处理了首位是否为0、多个小数点的限制,以及小数点后的位数。但用户的需求是失焦时保留两位小数,所以需要在blur事件中进行处理。 首先,输入时的限制应该允许数字小数点,但不能有多个小数点。然后,在输入过程中,可能需要实时替换非法字符,比如使用正则表达式。接着,在失焦时,需要将当前的值格式化为两位小数,例如如果用户输入的是整数,自动补上.00或者如果是小数但不足两位,补零,超过两位则四舍五入或截断。 可能的步骤是: 1. 使用v-model绑定输入的值。 2. 在@input事件中处理输入,确保只能输入数字一个小数点,并且首位不能是0小数点。 3. 在@blur事件中对值进行格式化,保留两位小数。 4. 处理边界情况,比如用户输入类似“.”的情况,在失焦时补0,比如变成“0.00或者0.00”。 例如,输入时用正则替换掉非数字多余的字符,然后在blur时检查是否有小数点,没有的话补上两位小数,有的话截断到两位。 需要注意的问题包括:如何正确处理用户输入小数点位置,比如不允许连续的小数点,或者在首位输入小数点的情况。此外,在失焦时,如果用户输入的是空字符串,可能需要设置默认值或保持为空,但根据用户需求,可能需要强制保留两位小数,这时候可能需要处理为空的情况,比如设置为0.00。 参考引用中的方法,可以结合@input@blur两个事件。在输入时限制输入内容,失焦时格式化。比如,在输入时使用正则表达式过滤非数字小数点,并且防止多个小数点。在失焦时,使用toFixed(2)方法,但要注意如果值为空或者不符合数字的情况,需要处理异常。 另外,要考虑用户可能输入类似“123.4”的情况,失焦后应变成“123.40”。或者如果用户输入“123.456”,则截断为“123.46”或者“123.45”,需要明确是四舍五入还是直接截断。根据常见需求,可能采用四舍五入的方式。 总结步骤: 1. 输入时通过正则表达式限制只能输入数字一个小数点,首位不能为0小数点。 2. 在blur事件中,将输入的值转换为浮点数,然后使用toFixed(2)来保留两位小数。如果转换失败(例如空值),则设置为0.00。 3. 处理特殊情况,例如用户输入“.”,在失焦时转换为0.00。 现在需要将这些步骤转化为Vue组件中的代码,结合el-input的使用。可能需要用到@input事件处理实时输入,@blur处理失焦格式化。同时,在data中维护一个number变量来绑定输入的值。 可能的代码结构: 在模板中: <el-input v-model="number" @input="handleInput" @blur="handleBlur"></el-input> 在方法中: handleInput(value) { // 处理输入,过滤非数字多余的小数点 let filtered = value.replace(/[^\d.]/g, ''); // 处理多个小数点 if ((filtered.match(/\./g) || []).length > 1) { filtered = filtered.slice(0, -1); } // 首位不能是小数点 if (filtered.startsWith('.')) { filtered = ''; } // 如果第一位是0,后面不能直接跟数字,除非有小数点 // 例如,不允许012,但允许0.12 if (filtered.length > 1 && filtered[0] === '0' && filtered[1] !== '.') { filtered = filtered.substr(1); } this.number = filtered; }, handleBlur() { if (this.number === '') { this.number = '0.00'; return; } // 转换数值 let num = parseFloat(this.number); if (isNaN(num)) { this.number = '0.00'; } else { // 保留两位小数,四舍五入 this.number = num.toFixed(2); } } 不过,这样可能会有问题,比如用户输入“12.3”,在blur时变成“12.30”。但需要考虑如果用户输入“12.”,即小数点后没有数字,此时blur时应补0,比如变成“12.00”。 此外,输入时的处理可能需要更细致的正则表达式,例如引用[3]中的处理方式,检查小数点后的位数是否超过两位,或者不允许在首位输入0后面没有小数点的情况。 需要结合引用中的例子,综合处理。例如,引用[3]中的方法,在输入时处理多余的小数点,并限制小数点后两位,但在blur时强制保留两位。 可能的优化点是在输入时就限制小数点后最多两位,而不是在blur时才处理。但用户的需求是在失焦时保留两位,所以可能在输入时允许输入更多,但失焦时自动修正。 另外,关于正数的限制,需要确保输入的值不能是负数,即不允许输入号。引用中的例子都没有处理号,所以正则表达式应该排除“-”符号。 所以,在handleInput的正则中,替换掉非数字小数点的字符,包括号。 现在,整合这些思路,写出最终的代码示例,并确保在失焦时处理正确。</think>### 解决方案 #### 步骤说明 1. **输入限制**:使用正则表达式限制输入内容为数字小数点,并确保首位不为小数点 2. **格式过滤**:通过`@input`事件实时过滤非法字符,阻止多个小数点 3. **失焦格式化**:通过`@blur`事件强制保留两位小数,自动补零或截断 4. **边界处理**:处理空值、纯小数输入等特殊情况 #### 代码实现 ```html <template> <el-input v-model="inputValue" @input="handleInput" @blur="handleBlur" placeholder="请输入正数" ></el-input> </template> <script> export default { data() { return { inputValue: "" }; }, methods: { // 输入时过滤非法字符 handleInput(value) { // 过滤非数字小数点 let filtered = value.replace(/[^\d.]/g, ""); // 阻止多个小数点 if (filtered.split(".").length > 2) { filtered = filtered.slice(0, -1); } // 首位不能是小数点 if (filtered.startsWith(".")) { filtered = ""; } // 禁止整数部分前导零(例如 012 -> 12) if (filtered.length > 1 && filtered[0] === "0" && filtered[1] !== ".") { filtered = filtered.slice(1); } this.inputValue = filtered; }, // 失焦时格式化两位小数 handleBlur() { if (!this.inputValue) { this.inputValue = "0.00"; return; } // 处理纯小数点情况(例如 "." -> "0.00") if (this.inputValue === ".") { this.inputValue = "0.00"; return; } // 转换为数字并保留两位小数 const num = parseFloat(this.inputValue); if (!isNaN(num)) { this.inputValue = num.toFixed(2); } else { this.inputValue = "0.00"; } } } }; </script> ``` #### 功能说明 1. **输入过滤** - 正则表达式`/[^\d.]/g`移除所有非数字小数点字符 - 通过`split(".")`检测多个小数点并阻止输入 - 前导零处理逻辑确保整数部分不以无效零开头[^3] 2. **失焦格式化** - 空值或非法输入默认设为`0.00` - `parseFloat`转换失败时回退到`0.00` - `toFixed(2)`强制保留两位小数,自动补零或四舍五入[^2] 3. **边界情况** - 输入`.`会自动转为`0.00` - 输入`0.1`失焦后显示`0.10` - 输入`12.345`失焦后显示`12.35`(四舍五入) ---
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值