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


Posted in Javascript onAugust 18, 2018

开篇废话

在开发过程中经常遇到这样的需求:用户只能输入数字并且只保留小数点两位。虽然我们可以在提交表单的时候进行验证,但是体验不是很好。下面我主要使用了小程序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);
  }
}

结束

这个正则表达式不是很完美,欢迎一起来优化。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
番茄的表单验证类代码修改版
Jul 18 Javascript
Javascript Math对象
Aug 13 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
jquery中:input和input的区别分析
Jul 13 Javascript
Javascript改变CSS样式(局部和全局)
Dec 18 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
Angular2.js实现表单验证详解
Jun 23 Javascript
Vue动态组件实例解析
Aug 20 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
electron demo项目npm install安装失败的解决方法
Feb 06 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
浅谈vue权限管理实现及流程
Apr 23 Javascript
vue实现键盘输入支付密码功能
Aug 18 #Javascript
记录一篇关于redux-saga的基本使用过程
Aug 18 #Javascript
Vue实现6位数密码效果
Aug 18 #Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 #Javascript
详解Angular6 热加载配置方案
Aug 18 #Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 #Javascript
vue下history模式刷新后404错误解决方法
Aug 18 #Javascript
You might like
Snoopy类使用小例子
2008/04/15 PHP
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
jquery和ajax的关系详细介绍
2013/11/29 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
Python字符串处理实例详解
2017/05/18 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
详解flask入门模板引擎
2018/07/18 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
如何验证python安装成功
2020/07/06 Python
python上selenium的弹框操作实现
2020/07/13 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
中学生爱国演讲稿
2014/09/05 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
Python实现列表拼接和去重的三种方式
2021/07/02 Python