需求:需要把输入框的整数长度限制为10位小数 并且可以输入两位小数 也就是13位的长度 于是我给el-input做了个maxlength=13 并且写了个正则
<el-col :span="11">
<el-form-item label="降价策略(元/分钟):" prop="failTactics">
<el-input
class="input-width"
v-model="ruleForm.failTactics"
:maxlength="13"
autocomplete="off"
placeholder="请输入降价策略"
size="mini"
@input.native="keyup($event,'failTactics')"
@blur="blurmethod($event,'failTactics')"
></el-input>
</el-form-item>
</el-col>
keyup(e,val){
//限制10位整数 与两位小数的正则规则
if (e.target.value[0] === '.') {
e.target.value = e.target.value.replace(/^(\.)/, '0$1');
} else if (e.target.value[0] === '0' && /\d/.test(e.target.value[1])) {
e.target.value = e.target.value.substring(1)
} else if (e.target.value.includes('.')) {
const arr = e.target.value.split('.')
if (arr[0].length > 13) {
e.target.value = e.target.value.substring(0, 12)
this.ruleForm[val] = e.target.value
}
e.target.value = e.target.value.replace(/[^(\d\.)]/g, '')
e.target.value = e.target.value.replace(/^(\d{1,12}\.?\d{0,2}).*/, '$1');
this.ruleForm[val] = e.target.value
} else {
e.target.value = e.target.value.replace(/[^\d]/g, '')
e.target.value = e.target.value.replace(/^(\d{0,10}).*/, '$1');
this.ruleForm[val] = e.target.value
}
},
blurmethod(e,val){
if (e.target.value[e.target.value.length - 1] === '.'){
e.target.value = e.target.value.substring(0, [e.target.value.length - 1])
this.ruleForm[val] = e.target.value
}
结果出现了 bug 就是我输入了10位整数并且输入了小数后 我再回到前面整数位置 再输入 会吧小数清除了 并且变成了11位整数 再次输入又变成了10位正整数 我觉得可能是输入框绑定的问题 目前没有找到解决的办法 当时写的时候做限制10位整数的时候发现可以继续键入11位 但是输入框没有显示 绑定的值内是11位 属于我就加了一句 this.ruleForm[val] = e.target.value 来解决 但是现在出现这个bug不知道怎么解决
你把input类型限制为数字,然后rule里限定最大值,最小值就行了