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