[JavaScript知识库]增加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" />
	</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: '请输入账号'
                 }]
                }