详解微信小程序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 相关文章推荐
js中split函数的使用方法说明
Dec 26 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
js 日期比较相关天数代码
Apr 02 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
Apr 29 Javascript
JavaScript 随机验证码的生成实例代码
Sep 22 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
小程序登录/注册页面设计的实现代码
May 24 Javascript
javascript实现拼图游戏
Jan 29 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
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
smarty模板中拼接字符串的方法
2014/02/14 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
js 图片等比例缩放代码
2010/05/13 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
Python中的多重装饰器
2015/04/11 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
安装Python的教程-Windows
2017/07/22 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
关于django 1.10 CSRF验证失败的解决方法
2019/08/31 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
大学生农村教师实习自我鉴定
2013/09/21 职场文书
保护环境的建议书
2014/03/12 职场文书
卖车协议书
2014/04/21 职场文书
媒体宣传策划方案
2014/05/25 职场文书
公司外出活动方案
2014/08/14 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
新郎结婚保证书
2015/02/26 职场文书
单位工资证明范本
2015/06/12 职场文书
python tkinter实现定时关机
2021/04/21 Python
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript