详解微信小程序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 相关文章推荐
AJAX分页的代码(后台asp.net)
Feb 14 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
jQuery实现布局高宽自适应的简单实例
May 28 Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
javascript使用链接跨域下载图片
Nov 01 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 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
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
php实现的一个简单json rpc框架实例
2015/03/30 PHP
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
vue实现模态框的通用写法推荐
2018/02/26 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
Python抓取框架 Scrapy的架构
2016/08/12 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
python中int与str互转方法
2018/07/02 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
python 魔法函数实例及解析
2019/09/25 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
Sql面试题
2013/03/20 面试题
行政部工作岗位职责范本
2014/03/05 职场文书
项目施工员岗位职责
2014/03/09 职场文书
租房协议书范本
2014/04/09 职场文书
反对邪教标语
2014/06/30 职场文书