input值输入数字

通过onkeypress事件是输不上任何非数字字符 



<input type="text" onkeypress="return event.keyCode>=48&&event.keyCode<=57"  /> 



通过onkeyup事件是输上后再去掉非数字字符 



<input type="text" onkeyup="value=value.replace(/[^\d]/g,'') ">



<input  type="text"   onkeyup="value=(parseInt((value=value.replace(/\D/g,''))==''||parseInt((value=value.replace(/\D/g,''))==0)?'1':value,10))" onafterpaste="value=(parseInt((value=value.replace(/\D/g,''))==''||parseInt((value=value.replace(/\D/g,''))==0)?'1':value,10))"> 

 

input输入框只能输入数字而且开头不能为零


<div class="input-choseNum">
<input type="number" id="inp-chooseNum" oninput='this.value=this.value.replace(/^[0]+[0-9]*$/gi,"")' maxlength="5" />
<span class="sureChoose">确定</span><span class="closeChoose">取消</span>
</div>



代码分析: 
1、onKeyUp 就是键盘松开后调用的事件。 
2、/\D/g 这个就是我这里用的正则表达式。头尾的/符号表示这里面包的是正则表达式;最后一个g表示全文搜索;\D是[^0-9]的简写,表示非数字的意思(因为我们要把非数字换成'')。 
3、value=value.replace(/\D/g,'')先用replace方法把非数字的字符替换成'',再赋值给当前text框的value属性。 
4、(parseInt((value=value.replace(/\D/g,''))==''||parseInt((value=value.replace(/\D/g,''))==0)?'1':value ,判断替换掉非数字字符后的文本是否为空或者为0,为空货位0则补1,不为空或0就是当前的值了。

 

5、最后调用parseInt(value,10)方法,把当前的value转成数字值,这么做是为了把类似012这样的字符前面的0去掉(测试经常挑这样的毛病,实在变态!)。这里特别要注意的是,使用parseInt方法的时候,一定要把value后的10这个参数传进去,否则像012这样的字符会被当作8进制的数字来处理的。 
6、最后再把这个转换后的数字赋值给value就是了。 

 


### 输入框限制只能输入数字的校验方法 在开发过程中,如果需要限制输入框只能输入数字,可以使用多种方法来实现这一功能。常见的方法包括使用 HTML 原生的 `oninput` 事件、正则表达式替换,以及结合 Vue.js 的 `@input` 指令进行数据绑定和校验。 #### 使用 `oninput` 事件限制输入 `oninput` 事件可以在用户输入时立即进行处理。通过正则表达式替换非数字字符,可以确保输入框中只保留数字。例如: ```html <input type="text" oninput="this.value = this.value.replace(/\D/g, '')" /> ``` 这段代码会移除所有非数字字符,确保输入框中只保留数字。然而,这种方法可能会导致表单校验失效,尤其是在使用像 Element UI 这样的 UI 框架时,因为 `oninput` 会直接修改 DOM 的,而不是 Vue 的响应式数据模型 [^2]。 #### 使用 Vue 的 `@input` 指令 为了更好地与 Vue 的响应式系统集成,可以使用 `@input` 指令来处理输入事件。通过 `v-model` 绑定输入框的,并在 `@input` 中进行数据处理,可以确保输入始终是数字。例如: ```html <el-input v-model="num1" @input="handleInput" /> ``` ```javascript methods: { handleInput(value) { // 使用正则表达式替换非数字字符 this.num1 = value.replace(/\D/g, ''); // 确保输入数字不以 0 开头 if (this.num1.startsWith('0')) { this.num1 = this.num1.replace(/^0+/, ''); } // 如果输入为空,则设置为 0 if (this.num1 === '') { this.num1 = '0'; } } } ``` 这种方法可以更好地与 Vue 的响应式系统集成,同时也可以在数据模型中保持正确的 。 #### 结合 Element UI 的表单校验规则 Element UI 提供了强大的表单校验功能,可以通过 `rules` 属性定义校验规则。为了确保输入数字,可以在 `rules` 中使用 `type: 'number'`,并在 `transform` 中将字符串转换为数字: ```javascript rules: { num1: [ { type: 'number', message: '请输入数字', trigger: 'blur', transform: (value) => Number(value) } ] } ``` 这样可以在表单提交时进行严格的校验,确保输入数字 [^1]。 #### 综合解决方案 为了确保输入框只能输入数字,并且在表单校验时也能通过,可以将 `@input` 和 `rules` 结合使用。这样可以在用户输入时实时处理数据,并在表单提交时进行严格的校验: ```html <el-input v-model="num1" @input="handleInput" /> ``` ```javascript data() { return { num1: '', rules: { num1: [ { type: 'number', message: '请输入数字', trigger: 'blur', transform: (value) => Number(value) } ] } }; }, methods: { handleInput(value) { // 使用正则表达式替换非数字字符 this.num1 = value.replace(/\D/g, ''); // 础输入为空,则设置为 0 if (this.num1 === '') { this.num1 = '0'; } } } ``` 通过这种方式,可以确保输入框中只保留数字,并且在表单校验时也能通过 。 --- ###
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值