增加input输入校验,v-model失效问题
项目使用vue+element开发,业务场景就是一个el-input输入框只能输入正整数// 最开始想的比较简单(如下写法)<el-form:rules="rules":model="form"><el-form-item label="账号" prop="account"><el-input v-model.number="form.account" />&l
·
项目使用vue+element开发,业务场景就是一个el-input输入框只能输入正整数
// 最开始想的比较简单(如下写法)
<el-form
:rules="rules"
:model="form"
>
<el-form-item label="账号" prop="account">
<el-input v-model.number="form.account" />
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
form: {
account: ''
},
// 校验
rules: {
account: [{
required: true,
message: '请输入账号'
},
{
type: 'number',
message: '账号必须为数字值'
}]
}
}
}
}
</script>
后面是测试发现这个输入框的问题,当你输入的数字输到17位的时候,他会往前进一,输到17-22位中间一直显示0,输到22位直接显示(科学计数法)1.2345678901234568e+21 再继续输入就显示Infinity【此时account为null】,但是我们业务场景是有输入32位的,这种写法就不行了
// 改进了一下去掉了v-model.number上边的.number,改用oninput事件,用正则控制输入内容,发现v-model没有实时跟新,最后又加上了@blur="form.account=$event.target.value"
<el-input
v-model="form.account"
oninput="value=value.replace(/[^\d]/g,'')" @blur="form.account=$event.target.value"
/>
rules: {
account: [{
required: true,
message: '请输入账号'
}]
}
更多推荐
已为社区贡献3条内容
所有评论(0)