vue elemenUi el-input 限制只能输入数字时与表单验证rules冲突问题

 

1.el-input 限制只能输入数字时

οninput="value=value.replace(/^\.+|[^\d.]/g,'')

问题: 当输入其他字符再输入数字的时候，输入框中显示有值，就会与表单验证 rules冲突.

但实际去打印 v-model绑定的变量时获取不到新输入值。表单验证信息会一直存在.

2. 解决方法

加入事件:  @blur="salaryChange"

<el-form :model="feedForm" ref="feedForm" :rules="rules">
   <el-form-item label="饲料重量(g)/转：" :label-width="formLabelWidth" prop="perWeight">
       <el-input v-model="feedForm.perWeight" autocomplete="off" maxlength="10"
          oninput="value=value.replace(/^\.+|[^\d.]/g,'')" @blur="salaryChange"></el-input>
   </el-form-item>     
</el-form>

3. 事件

输入框失去焦点时，会把value值赋值给v-model绑定变量，使两者保持一致

salaryChange(e){
     this.feedForm.perWeight = e.target.value
},