vue+element el-input组件oninput校验与表单校验rules冲突问题

需求限制el-input只能输入小时（0-23），使用oninput正则进行数据校验。

<el-input 
  v-model="form.hour" 
  :maxlength="2"
  οninput="value=/^(2[0-3]|[0-1]?\d)$/.test(value) ? value : value.slice(0, -1)"
  placeholder="请输入内容">
</el-input>

问题： 当输入了不合法的字符，再输入正确的字符的时候会触发必填的校验。

原因： 修改el-input的值并没有修改v-model双向绑定的变量，造成校验信息一直存在。

解决： 加入失去焦点事件@blur。

<el-input 
  v-model="form.hour" 
  :maxlength="2"
  οninput="value=/^(2[0-3]|[0-1]?\d)$/.test(value) ? value : value.slice(0, -1)"
  @blur="(e) => (form.hour = e.target.value)"
  placeholder="请输入内容">
</el-input>

这样失去焦点的时候会将值赋值给v-model双向绑定的变量。