详解微信小程序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 相关文章推荐
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
js 表格隔行颜色
Dec 02 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
Javascript实现异步编程的过程
Jun 18 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 Javascript
javascript实现鼠标点击生成文字特效
Dec 24 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
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
如何搜索查找并解决Django相关的问题
2014/06/30 Python
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
python编写分类决策树的代码
2017/12/21 Python
python SVM 线性分类模型的实现
2019/07/19 Python
决策树剪枝算法的python实现方法详解
2019/09/18 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
python中的列表和元组区别分析
2020/12/30 Python
PHP两种查询函数array/row的区别
2013/06/03 面试题
个人应聘自我评价分享
2013/11/18 职场文书
工程质量月活动方案
2014/02/19 职场文书
作文评语集锦大全
2014/04/23 职场文书
运动会方队口号
2014/06/07 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL