微信小程序input标签正则初体验

在开发过程当中常常遇到这样的需求：用户只能输入数字而且只保留小数点两位。虽然咱们能够在提交表单的时候进行验证，可是体验不是很好。下面我主要使用了小程序input标签的bindinput方法对输入的值进行监听，而后进行正则匹配。

1. 微信小程序input标签自带type=digit属性，能够调起带有小数点的数字键盘，maxlength属性能够控制咱们输入字符的个数，而后咱们给input标签绑定bindinput方法。

<input type="digit" bindinput="regInput" maxlength="15"/>

复制代码

2. bindinput方法能够监听到当前输入框的值，相似于onchange事件，但不太同样。经过e.detail.value能够获取到input的值，return返回的字符串能够替换掉输入的字符串。

3. 匹配正则经过则返回全部字符，不经过则去掉最后一个不匹配的字符返回。

/*正则匹配*/
regInput(e){
    if(/^(\d?)+(\.\d{0,2})?$/.test(e.detail.value)){
    	return e.detail.value;
    }else {
    	return e.detail.value.substring(0,e.detail.value.length-1);
    }
}
复制代码

4. 结束：这个正则表达式不是很完美，欢迎一块儿来优化。