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

vue 2 年前 0 4

本文介绍: *原因：**修改 el–input的值并没有修改 v–model 双向绑定的变量，造成校验信息一直存在。**问题：**当输入了不合法的字符，再输入正确的字符的时候会触发必填的校验。这样失去焦点的时候会将值赋值给v–model双向绑定的变量。需求限制 el–input只能输入小时（0-23）**解决：**加入失去焦点事件。

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

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

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

原因： 修改 el–in put的值并没有修改 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) =&gt; (form.hour = e.target.value)"
  placeholder="请输入内容"&gt;
</el-input&gt;