详解微信小程序input标签正则初体验
更新时间：2018年08月18日 17:02:39 作者：阿哲
这篇文章主要介绍了详解微信小程序input标签正则初体验，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
开篇废话
在开发过程中经常遇到这样的需求：用户只能输入数字并且只保留小数点两位。虽然我们可以在提交表单的时候进行验证，但是体验不是很好。下面我主要使用了小程序input标签的bindinput方法对输入的值进行监听，然后进行正则匹配。
1. input标签
微信小程序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);
}
}
结束
这个正则表达式不是很完美，欢迎一起来优化。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了axios实现简单文件上传功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这篇文章主要介绍了JS实现点击按钮获取页面高度的方法,涉及JavaScript针对页面元素高度的各种常见运算,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
本文汇总了Javascript中两个对象的比较、不同类型的比较以及对象跟原始值的比较，并进行了实例演示，希望能帮助到有需要的朋友们。2016-07-07
本篇文章给大家分享了关于JavaScript中操作符和表达式的相关知识点内容，有兴趣的朋友们参考下吧。2018-09-09
跳转到另一个页面的方法有很多，在本文将为大家详细介绍下js中如何实现5秒后跳转到另一个页面，感兴趣的朋友可不要错过2013-10-10
这篇文章主要介绍了JS实现简单路由器功能的方法,基于javascript模拟简单路由编码的相关技巧,需要的朋友可以参考下2015-05-05
前两天做 silverlight 的东西，主页面打开一个子页面，然后子页面中包含一个 silverlight 应用程序那难免会涉及到他们三者相互调用的问题2010-08-08
typescript中type和interface的区别有哪些
大家使用typescript总会使用到interface和type,所以下面这篇文章主要给大家介绍了关于typescript中type和interface区别的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-02-02
最丑的时钟效果，这篇文章主要为大家详细介绍了js canvas时钟制作方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置，这篇文章主要介绍了js indexOf 的正确用法,需要的朋友可以参考下2023-02-02
最新评论