1.数字限制
<!-- 大于0的整数 -->
<input oninput="value=value.replace(/[\D]/g,'')"></input>
<!-- 大于0的小数 -->
<input type="number" oninput="value=value.replace(/[e-+]/g,'')"></input>
<!-- vue不可用,会导致数据不能双向绑定 -->
<!-- 小数点后两位 -->
<input type="number" oninput="value=value.replace(/[-+e]/g,'')" onblur="value=Number(value).toFixed(2)"></input>
<!-- Math.round()为四舍五入。Math.floor(),向下取整,但会遇到计算不精准问题,故+0.1。 onblur中的内容不可放入oninput内,会导致不能输入0.01-->
- 切勿在vue中使用以上方法,会导致无法数据双向绑定
vue 版本
// 输入域名限制
<el-input v-model="liveLinkSetting.liveLink" @change="isUrl"></el-input>
isUrl(val) {
var reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/;
if (!reg.test(val)) {
this.$message.error('输入连接格式错误!')
return false
}
return true
},
<el-input v-model.number="value.price" @keydown.native="channelInputLimit" min="0"></el-input>
Vue.prototype.channelInputLimit = function (e) { // 输入整数限制
e.target.value = e.target.value.replace(/[\D]/g,'')
return true
}
Vue.prototype.inputLimitPoint = function (e) { // 输入小数限制
// 通过正则过滤小数点后两位
e.target.value = (e.target.value.match(/^\d{1,7}(\.?\d{0,2})/g)) ? (e.target.value.match(/^\d{1,7}(\.?\d{0,2})/g)[0]) : null
}
以上所有方法都存在 vue model 不同步问题,不推荐使用