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

shixinzhang 发布于2019-08-26 12:14 / 2134人阅读

摘要：下面我主要使用了小程序标签的方法对输入的值进行监听，然后进行正则匹配。标签微信小程序标签自带属性，可以调起带有小数点的数字键盘，属性可以控制我们输入字符的个数，然后我们给标签绑定方法。

开篇废话

在开发过程中经常遇到这样的需求：用户只能输入数字并且只保留小数点两位。虽然我们可以在提交表单的时候进行验证，但是体验不是很好。下面我主要使用了小程序input标签的bindinput方法对输入的值进行监听，然后进行正则匹配。

1. input标签

微信小程序input标签自带type=digit属性，可以调起带有小数点的数字键盘，maxlength属性可以控制我们输入字符的个数，然后我们给input标签绑定bindinput方法。

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);
    }
}

结束

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

云服务器 GPU云服务器微信小程序微信小程序支付微信小程序部署微信小程序搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108298.html

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

摘要：下面我主要使用了小程序标签的方法对输入的值进行监听，然后进行正则匹配。标签微信小程序标签自带属性，可以调起带有小数点的数字键盘，属性可以控制我们输入字符的个数，然后我们给标签绑定方法。开篇废话在开发过程中经常遇到这样的需求：用户只能输入数字并且只保留小数点两位。虽然我们可以在提交表单的时候进行验证，但是体验不是很好。下面我主要使用了小程序input标签的bindinput方法对输入...

garfileo 2019-08-29 16:25 评论0 收藏0
微信小程序input标签正则初体验

摘要：下面我主要使用了小程序标签的方法对输入的值进行监听，然后进行正则匹配。标签微信小程序标签自带属性，可以调起带有小数点的数字键盘，属性可以控制我们输入字符的个数，然后我们给标签绑定方法。开篇废话在开发过程中经常遇到这样的需求：用户只能输入数字并且只保留小数点两位。虽然我们可以在提交表单的时候进行验证，但是体验不是很好。下面我主要使用了小程序input标签的bindinput方法对输入...

_Suqin 2019-08-02 11:17 评论0 收藏0
微信小程序初体验，入门练手项目--通讯录，后台是阿里云服务器

摘要：最近微信小程序异常火爆，很多人在学习，下面带着大家搭建下微信小程序的调试环境，并调试入门练手项目通讯录和基础即可微信推荐使用的语言，去菜鸟教程简单学习下，，，即可，方便大家学习。一、前言（坑爹的玩意）项目源码：https://github.com/saucxs/wx_... 微信小程序自从2017年，被各种看好，不过一段时间过去了还是反响平平，下半年随着各项功能的开放，很多企业...

kel 2019-08-23 12:41 评论0 收藏0
【个人】微信小程序初体验

摘要：准备工作开发工具下载地址竟然隐藏在一个超链接里，真的很不醒目啊文档地址初次体验新建项目的时候，可以选择是小程序小游戏，这次我体验的是小程序的开发。可以配置小程序边界的，如顶部的导航栏的一些样式。很早前就想体验一把小程序的开发了，如果熟悉三大框架的话，小程序的开发还是很容易上手的，所以只要跟着做一个小应用，加上官方的文档就十分好学了。加上官方提供的开发工具也比较简洁好用，初次体验的我觉...

894974231 2019-08-23 12:48 评论0 收藏0