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

开篇废话

在开发过程中经常遇到这样的需求：用户只能输入数字并且只保留小数点两位。虽然我们可以在提交表单的时候进行验证，但是体验不是很好。下面我主要使用了小程序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);
  }
}

结束

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序 (十七)input 组件详细介绍

    微信小程序 (十七)input 组件详细介绍

    input输入框使用的频率也是比较高的...样式的话自己外面包裹个view自己定义.input属性也不是很多,有需要自己慢慢测,尝试 主要属性: wxml <!--style的优先级比class高会覆盖和class相同属性--> <view class="inputView" style="margin-top: 40% "> <input class="input" type="number"

  • 微信小程序 input输入及动态设置按钮的实现

    微信小程序 input输入及动态设置按钮的实现 [需求]实现当手机号已填写和协议已勾选时,"立即登录"按钮变亮,按钮可点击:若有一个不满足,按钮置灰,不可点击:实现获取短信验证码,倒计时提示操作:对不满足要求内容进行toast弹窗提示. <view class="container"> <!--手机号--> <view class="section"> <text class="txt"

  • 微信小程序input框中加入小图标的实现方法

    最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下: 然后按照,html页面中的做法,在input框中添加了background-image属性,出乎意料的事,小程序报了下边这样一个错误: emmmm 好像小程序的background-image属性并不给力啊,然后查阅相关资料后,放弃了background-image属性. 然后另辟蹊径,由于小程序中,好像只有image标签才能加载本地图片,所以考虑使用image标签来实现,大致思路就是在一个view中,左边是image,右边是in

  • 微信小程序 input输入框控件详解及实例（多种示例）

    微信小程序 input输入框控件详解及实例（多种示例）

    微信小程序 input输入框控件 今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. 首先主页面中将登录的样式进行了简单展示和使用, 代码如下: <!--index.wxml--> <!--如果在同一个form表单中创建了多个input输入框,可以给给每个输入框,创建自己的 name="userName"属性,可以区别哪个输入框,并通过添

  • 微信小程序实现提交input信息到后台的方法示例

    本文实例讲述了微信小程序实现提交input信息到后台的方法.分享给大家供大家参考,具体如下: wxml文件: <!-- 用户名事件绑定 --> <view class="fl_form"> <text>您的姓名</text> <input type="text" placeholder='请输入您的姓名' value="{{userName}}" bindblur='userNameInput

  • 微信小程序 input表单与redio及下拉列表的使用实例

    微信小程序 input表单与redio及下拉列表的使用实例

    微信小程序 input表单与redio及下拉列表的使用实例 一个简单的预约类型的表单,效果 主要代码: <form bindsubmit="bindSave"> <view class="form-box"> <view class="row-wrap"> <view class="label">联系人</view> <view class="labe

  • 微信小程序 input输入框详解及简单实例

    微信小程序 input输入框详解及简单实例

    微信小程序输入框input 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 微信小程序输入框input 属性名 类型 默认值 说明 value String   输入框的内容 type String text input的类型,

  • 微信小程序自定义组件之可清除的input组件

    最近正在做的一个小程序项目中需要用到一个可清除的输入框控件,为了在项目中使用方便以及方便其他项目直接使用,便封装了一个可清除的input自定义组件. 组件需要达到的需求是:输入框内没有内容时,删除按钮隐藏:当输入框内有内容时,删除按钮显示,点击删除按钮则清空输入框内所有内容.并且还可以设置输入框整体样式以及输入框左侧图标. 明确了需求之后,就可以开始着手实现了. 首先,在目标目录下新建一个自定义组件 建好之后,我们需要来设计布局.根据需求来看,我们只需要三个组件:两个image和一个input.

  • 微信小程序使用input组件实现密码框功能【附源码下载】

    微信小程序使用input组件实现密码框功能【附源码下载】

    本文实例讲述了微信小程序使用input组件实现密码框功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml <view style="width:80%; display:flex;"> <view>用户名:</view> <input style="border: 1px solid;border-color: lightblue;width:60%;" placeholder="

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

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

  • 详解微信小程序审核不通过的解决方法

    详解微信小程序审核不通过的解决方法

    前言 近来,微信小程序一直活跃在开发者的眼球中.很多开发者都投身微信小程序的开发中,而这些开发者,总是需要面对最后一道难题:如何以一种优雅的姿势来通过微信官方的审核.本文基于几天前提交审核的一次总结,写得有不当的地方,请各位大佬指正. 问题描述 先上一下微信小程序平台常见拒绝情形的说明文件.由于我提交的小程序中包含了"分享群"的按钮,所以审核未通过,未通过的原因如下: 3.2.1 小程序的页面内容中,存在诱导类行为,包括但不限于诱导分享.诱导添加.诱导关注公众号.诱导下载等,要求用户分

  • 详解微信小程序 通过控制CSS实现view隐藏与显示

    详解微信小程序 通过控制CSS实现view隐藏与显示

    详解微信小程序 通过控制CSS实现view隐藏与显示 实现效果图: 视图代码,使用变量控制隐藏类名 <scroll-view scroll-y="true" > <view class="user_freeback"> <view class="txt"> <text> 为了更好地帮助您解决问题,请准确填写您的邮箱地址和电话号码,以便管理员给你答复.</text> </view&g

  • 详解微信小程序官方人脸核身认证

    小程序收集了下用户个人信息上传被打回来说: 你好,小程序页面功能涉及:采集用户生物特征(人脸照片或视频)及其他敏感信息,用于身份认识或识别, 为保障用户敏感隐私身份信息,平台暂不支持此功能.请去除相关功能后重新提交. 然后就去找度娘搜了下需要申请 wx.startFacialRecognitionVerify({}) https://api.weixin.qq.com/cgi-bin/token?appid=appid&secret=secret&grant_type=client_cre

  • 详解微信小程序「渲染层网络层错误」的解决方法

    详解微信小程序「渲染层网络层错误」的解决方法

    问题描述: 情况是这样的,我需要在小程序中通过image标签显示三张我的图片,毫无疑问,其重点部分肯定在image的src属性上,请看思路分析: 我们可以新建一个专门放图片的文件夹,然后将我们项目所需要的图片文件全部放到这里.但是这会引发一个问题:微信官方对上线的小程序有大小的限制,所以如果你只是本地跑跑,那无可厚非,你开心就好:如果要做上线,这种方法的可行度不高: 使用外部链接.成功发布过小程序的小伙伴们都知道,外部链接必须使用https协议,且所使用域名必须设置在request合法域名列表中

  • 详解微信小程序 同步异步解决办法

    详解微信小程序 同步异步解决办法 小程序中函数体还没有完成,下一个函数就开始执行了,而且两个函数之间需要传参.那是因为微信小程序函数是异步执行的.但微信小程序增加了ES6的promise特性支持,微信小程序新版本中移除了promise的支持,需要自己使用第三方库来自行实现ES6的promise特性. WxService.js import Tools from 'Tools' import es6 from '../assets/plugins/es6-promise' class Servic

  • 详解微信小程序Radio选中样式切换

    详解微信小程序Radio选中样式切换

    详解微信小程序Radio选中样式切换 本篇文章主要讲解在微信小程序中如何根据Radio选中来切换样式.效果如下: 原理主要是通过判断一个radio-group中哪个被选中,就让它加上一个"active"的样式. 代码如下: <!--index.wxml--> <view class="container"> <radio-group bindchange="radioCheckedChange"> <vi

  • 详解微信小程序 登录获取unionid

    详解微信小程序 登录获取unionid

    详解微信小程序 登录获取unionid 首先公司开发了小程序, 公众号网页和app等, 之前都是用的openid来区分用户, 但openid只能标识用户在当前小程序或公众号里唯一, 我们希望用户可以在公司各个产品(比如公众号, 小程序, app里的微信登录)之间, 可以保持用户的唯一性, 还好微信给出了unionid. 下面分两步介绍一下 微信小程序 获取unionid的过程. 1. 首先 在微信公众平台注册小程序 , 然后在小程序上模拟登录流程. 注 : 这里只是简单登录流程, 实际中需要维护

  • 详解微信小程序 template添加绑定事件

    详解微信小程序 template添加绑定事件 对于模板的使用,我是想将模板的事件单独出来,其他引用模板的页面中不再掺杂模板事件,比较方便管理,如果还有其他好的解决办法, 请赐教. template.wxml <view bindtap="clickView" class="tempClass">temp模板</view> template.js var temp = { clickView: function () { console.log

  • 详解微信小程序设置底部导航栏目方法

    详解微信小程序设置底部导航栏目方法

    详解微信小程序设置底部导航栏目方法 小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家. 好了 小程序的头部标题 设置好了,我们来说说底部导航栏是如何实现的. 我们先来看个效果图 这里,我们添加了三个导航图标,因为我们有三个页面,小程序最多能加5个. 那他们是怎么出现怎么着色的呢?两步就搞定! 1. 图标准备 阿里图标库  http://www.iconfont.cn/collections/show/29 我们进入该网站,鼠标滑到一个喜欢的图标上面  点击下

随机推荐