详解微信小程序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实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
用JS在浏览器中创建下载文件
Mar 05 Javascript
javascript回到顶部特效
Jul 30 Javascript
jQuery3.0中的buildFragment私有函数详解
Aug 16 Javascript
React入门教程之Hello World以及环境搭建详解
Jul 11 Javascript
详解vue 实例方法和数据
Oct 23 Javascript
js实现坦克大战游戏
Feb 24 Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 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
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
Javascript将string类型转换int类型
2010/12/09 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
JavaScript数组排序的六种常见算法总结
2020/08/18 Javascript
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
python字典序问题实例
2014/09/26 Python
Python标准库之collections包的使用教程
2017/04/27 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
django框架ModelForm组件用法详解
2019/12/11 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
10个顶级Python实用库推荐
2021/03/04 Python
分享8款纯CSS3实现的搜索框功能
2017/09/14 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
党员的自我评价范文
2014/01/02 职场文书
超市采购员岗位职责
2014/02/01 职场文书
信息技术教学反思
2014/02/12 职场文书
学生期末评语大全
2014/04/30 职场文书
营销团队口号
2014/06/06 职场文书
金融与证券专业求职信
2014/06/22 职场文书
婚前保证书范文
2015/02/28 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js