elementUI el-input 只能输入正整数验证的操作方法
更新时间:2022年11月15日 09:45:37 作者:夜已如歌_ok
这篇文章主要介绍了elementUI el-input 只能输入正整数验证,本文给大家详细讲解对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
字母e在js中属于数字,但是正则匹配 \d 是拦不住字母e 的
正确写法为:
onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"
<el-input type="number" placeholder="请输入" min="1" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8" v-model.number="count"></el-input>
其他写法:
// 只允许输入数字
<el-input type="number" placeholder="请输入" min="1" oninput ="value=value.replace(/[^\d]/g,'')" v-model.number="count"></el-input>
同理,只允许输入数字和小数
oninput ="value=value.replace(/[^0-9.]/g,'')"
允许输入小数点后几位:
// 保留一位小数 oninput="if(isNaN(value)) { value = parseFloat(value) } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+2)}" // 若需要保留N位小数,则把2 改为 1 + n即可
设置范围,最大值,最小值,监听input 及 change事件
<el-input min="0" max="100" type="number" @input="numberChange($event, 100)" @change="numberChange($event, 100)" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8" v-model.number="count"></el-input>
numberChange (val, max) { this.$nextTick(() => { this.count = Math.min(parseInt(val), max) }) }
<el-input >正数校验 小数校验
1.正数,不能输入小数和小数点,只能输入 正整数,大于0的
<el-form-item label="安全库存:" prop="safeQty" class="meter_one" style="margin-top: 10px"> <el-input v-model="form.safeQty" type="number" min="0" @input="form.safeQty=form.safeQty.replace(/^(0+)|[^\d]+/g,'')" placeholder="请输入安全库存"/> </el-form-item>
2.小数点保留4位
<el-form-item label="净重KG:" prop="netWeight" class="meter_one" style="margin-top: 10px"> <el-input v-model="form.netWeight" type="number" placeholder="请输入净重KG" oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+5)}" /> </el-form-item>
到此这篇关于elementUI el-input 只能输入正整数验证的文章就介绍到这了,更多相关elementUI el-input输入验证内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
VUE使用echarts 5.0以上版本渲染器未导入错误问题
这篇文章主要介绍了VUE使用echarts 5.0以上版本渲染器未导入错误问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
最新评论