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
},

猜你喜欢

转载自blog.csdn.net/lovexiuwei/article/details/117563836