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

最新推荐文章于 2025-02-28 18:10:54 发布

小涵涵是程序媛

最新推荐文章于 2025-02-28 18:10:54 发布

阅读量1.4k

点赞数

文章标签： typescript vue.js 前端

本文链接：https://blog.csdn.net/m0_52263688/article/details/124477658

版权

在Vue项目中使用Element UI时，遇到el-input组件限制输入为数字与表单验证rules出现冲突的问题。当用户输入非法字符后再输入数字，虽然输入框看起来正常，但v-model绑定的变量并未更新，导致表单验证错误信息无法消除。解决方法是在el-input上添加@blur事件，当输入框失去焦点时，手动更新v-model值，确保二者同步，从而消除验证冲突。示例代码展示了如何实现这一解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

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

解决方法
加入事件: @blur=“salaryChange”

<el-form :model="feedForm" ref="auditForm" :rules="rules">
   <el-form-item label="押金金额：" :label-width="formLabelWidth" prop="deposit_price">
       <el-input
              v-model.trim="auditForm.deposit_price"
              autocomplete="off"
              placeholder="请输入押金金额"
              onkeyup="this.value=this.value.replace(/[^\d.]/g,'')"
              @blur="salaryChange"
            >
   </el-form-item>     
</el-form>

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

  salaryChange(e: any) {
    this.auditForm.deposit_price = e.target.value;
  }