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

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

  1. el-input 限制只能输入数字时
οninput="value=value.replace(/^\.+|[^\d.]/g,'')

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

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

  1. 解决方法
    加入事件: @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>
  1. 事件
    输入框失去焦点时,会把value值赋值给v-model绑定变量,使两者保持一致
  salaryChange(e: any) {
    this.auditForm.deposit_price = e.target.value;
  }
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值