代码片段
<el-form-item label="手机号码:" prop="mobile">
<el-input clearable maxlength="11" placeholder="请输入手机号码" v-model.trim="dialogForm.mobile"
oninput="value=value.replace(/\D/g,'')" @blur="handleBlur"
/>
</el-form-item>
输入框输入数值时自动触发校验,除开数字之外的都不显示到输入框中οninput=“value=value.replace(/\D/g,‘’)”
缺点: ( 其实就是bug )
如果首次输入不是数字,会造成 v-model 绑定的数值为空,就算你清空输入框/关闭弹窗/去除校验后再次输入数字,一样为空。
解决方法:
为 input 添加一个失焦方法,@blur=“handleBlur” 失去焦点后重新赋值给绑定元素,@blur 方法会有一个参数,可通过 e.target.value 获取。
// 失去焦点后,重新赋值
handleBlur(e) {
this.dialogForm.mobile= e.target.value;
}