vue中input按照一定的规则输入,不符合规则输入不进(vue输入框input只允许输入数字,并保留一位或两位小数)

自己写了一个自定义,只允许输入数字的input,把不符合规则的输入过滤掉:

onInput(e) {
				let cval = e.target.value;
				cval = cval.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
				cval = cval.replace(/^\./g, ""); //验证第一个字符是数字而不是
				cval = cval.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
				cval = cval.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
				// cval = cval.replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3'); //只能输入一个小数
				cval = cval.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
				console.log('cval',cval)
				//setTimeout 目的为了更新显示的input框里的值
				this.$emit('input', '');
				setTimeout(()=>{
					this.$emit('input', cval);
				},0)

			}

直接设置 this.emit(′input′,cval);的时候,获取到的值是已经过滤了,但是在input输入框里还保留着不符合规则的值,所以在这之前要先 this.emit(‘input’, ‘’) 将原来的值设为空值,再进行复制。
我理解的是:因为直接复制,组件没有检测到数据有变化,所以不会去更新input里显示的值。

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值