一、关于微信小程序input文本框格式的验证

微信小程序开发短信验证码输入框 如图所示的验证码输入框。 现在需要实现逻辑,任何位置输入后自动跳到下一个最近的空的输入框,任何位置删除后自动跳到上一个最近的有值的输入框,代码逻辑如下。 阅读详情

小程序组件 input 经常用到输入内容的验证,验证的正则表达式如下:

<view class="list">
  <view class="label">维保周期</view>
  <input class="flex-one" type="number" bindinput="inputDigit" placeholder="请输入保养周期(单位:天)" placeholder-class="place" name="ReminderTime"  />
</view>
1、只能输入数字
  inputDigit: function(e) {
    let pwd = e.detail.value  
    return pwd.replace(/[^\d]/g,'')
},

2、只能输入英文
inputDigit: function(e) {
    let pwd = e.detail.value
    return pwd.replace(/[^a-zA-Z]/g,'')
}
3、只能输入中文、英文、数字、@符号和.符号
inputDigit: function(e) {
    let pwd = e.detail.value
    return pwd.replace(/[^a-za-z0-9u4e00-u9fa5@.]/g,'')
}
4、只能输入字母和汉字
inputCode: function(e) {
    let pwd = e.detail.value
    return pwd.replace(/[d]/g,'') 
}
5、只能输入英文字母和数字,不能输入中文
inputCode: function(e) {
    let pwd = e.detail.value
    return pwd.replace(/[^\w\/]/ig,'')
}
6、只能输入英文字母和数字,不能输入中文
inputCode: function(e) {
    let pwd = e.detail.value
    return pwd.replace(/[^\w\.\/]/ig,'')
}
```csharp
只能输入数字
const inputType = /[^\d]/g		
只能输入字母
const inputType = /[^a-zA-Z]/g		
只能输入数字和字母
const inputType =/[\W]/g
只能输入小写字母
const inputType =/[^a-z]/g
只能输入大写字母
const inputType =/[^A-Z]/g
只能输入数字和字母和下划线
const inputType =/[^\w_]/g //下划线也可以改成%
只能输入中文
const inputType =/[^\u4E00-\u9FA5]/g
只能输入数字和小数点
const inputType =/[^\d.]/g

微信小程序:input用正则限制输入但是失效 加一个$nextTick()函数进行实时监听修改,就解决了,或者使用setTimeOut函数重复调用赋值应该也ok。问题:正则匹配修改,但是仍然失效,通过打印数值发现已经修改成功,所以问题出在没有实时修改上。效果:想要实现输入框只能输入数字,第一位不能是点,小数点后只有两位数字等等。最后贴上正则处理函数。 阅读详情

相关推荐

微信小程序中的表单验证机制

文章目录前言一、WxValidate类的构造函数1、参数rules2、参数messages3、创建WxValidate类的实例二、WxValidate的内置校验规则三、WxValidate的表单验证方法四、WxValidate类在小程序页面中的部署总结关于作者 前言 微信小程序中的表单要进行验证,可以使用第三方插件:WxValidate.js。该插件约有12.8KB左右,采用ES6中class类的方式进行编写,所定义的类名为WxValidate,并最终将该类导出。本文将详细讲解WxValidate.js插

小海前端 3204

微信小程序 - 设置input只能输入数字

需求 view如下: &lt;view class="ys-number-input {{error?'error':''}}"&gt; &lt;input type="number" auto-focus focus='{{focus}}' value="{{value}}" title="" bindinput="handleInput" bindblur="va

CSU_Zipple的博客 3万+

微信小程序:自定义验证码/密码输入框组件

前言 微信小程序中,要为用户提供安全密码,用于后续的操作。UI设计稿类似微信的安全密码设置,需要两次输入,验证密码一致。之前刚入坑的时候,就收藏了一些小程序相关的好案例,没有前人铺路,也不会有今天的这篇文章。在此特别鸣谢,NAMECZ的博文(https://blog.youkuaiyun.com/namecz/article/details/79892451),文章的思路很巧妙。 正文 项目中多次使用...

weixin_39015132的博客 2万+

input框配置只能输入数字

input限制数字输入

m0_71130954的博客 1573

微信小程序 input 输入校验

Demo: <view class="form-item"> 重量(kg) <input class="input" bindinput='bindinputWeight' type='number' maxlength='4' value="{{register.weight}}" placeholder-class="phcolor" placeho...

skysys的研究小屋 5625

高德地图 搜索和点击定位

高德地图vue

weixin_45474673的博客 1943

input框限制只能输入数字的两种方法

input框限制只能输入数字的两种方法

qq_43532275的博客 1575

【ESP32-S3量产指南】基于Flash下载工具实现Release模式Flash加密与安全配置

本文详细介绍了ESP32-S3量产阶段如何通过Flash下载工具实现Release模式下的Flash加密与安全配置。从加密模式选择、工具配置到分区表优化,提供了一套完整的量产安全解决方案,帮助开发者有效防止固件泄露和篡改,确保设备安全。

weixin_28730131的博客 230

微信小程序只能输入数字和字母

微信小程序的input组件中有个bindinput属性,用来实时检测输入的内容,只需要在返回的时候,使用正则表达式处理输入的内容,然后返回到输入框。 <input type='text' bindinput="inputCode" placeholder='请输入密码' password="true"></input> 1.只能输入英文 inputCode: function(e) { let pwd = e.detail.value return pw

feelinghappy的专栏 6847

STM32F407 FreeRTOS+LVGL移植实战:从驱动适配到性能优化

本文详细介绍了在STM32F407开发板上移植FreeRTOS和LVGL的实战经验,涵盖硬件准备、驱动适配、性能优化等关键步骤。通过TFTLCD屏幕驱动优化、DMA加速和任务优先级调整,显著提升界面流畅度,为嵌入式GUI开发提供实用解决方案。

weixin_29190651的博客 632

Python爬虫实战:5分钟搞定东方财富A股数据抓取(附完整代码)

本文提供了一套基于Python的A股数据自动化采集与分析系统构建方案。文章详细解析了如何通过稳健的爬虫框架从东方财富等公开数据源高效抓取A股数据,并设计数据库进行自动化存储与管理,特别适合量化研究和数据分析场景。

weixin_29062963的博客 4429

微信小程序文本输入<input/> 详解

在微信小程序开发中,input 用来实现文本输入,如输入用户名密码等等

代码小疯子 3万+

深入解析V4L2框架与高通KMD在Camera驱动中的协同设计

本文深入解析了V4L2框架与高通KMD在Camera驱动中的协同设计。V4L2作为Linux内核标准视频驱动框架,提供了统一的设备抽象与数据流管理;而高通KMD则在其基础上,通过引入CRM等核心模块,构建了一套针对移动平台复杂相机系统的高效内核态驱动架构,实现了硬件配置与执行的解耦与智能调度。

qq_27496129的博客 1147

微信小程序判断input是否为空

微信小程序中用到input值时候,判断其内容不为空,可以用if-else wxml代码 &amp;amp;lt;view class=&amp;quot;name&amp;quot;&amp;amp;gt; &amp;amp;lt;text&amp;amp;gt;姓名&amp;amp;lt;/text&amp;amp;gt; &amp;amp;lt;input type='text' placeholder='

weixin_44704285的博客 1万+

Python爬虫实战:用BeautifulSoup和Pandas轻松抓取去哪儿网景点数据(附完整代码)

本文详细介绍了如何使用Python的BeautifulSoup和Pandas库构建一个高效的旅游数据爬虫,从去哪儿网抓取景点数据。内容涵盖环境准备、网页结构分析、核心代码实现、反爬策略以及数据清洗与存储,提供完整代码示例,帮助开发者快速掌握数据采集技术。

river的博客 357

成功解决raise Py4JError py4j.protocol.Py4JError: py4j.protocol.Py4JError: Could not find py4j jar at 

成功解决raise Py4JError("Could not find py4j jar at {0}".format(jarpath)) py4j.protocol.Py4JError: Could not find py4j jar at 目录 解决问题 解决思路 解决方法 1、第一步安装jdk 2、第二步安装或升级py4j 解决问题 raise Py4JError("Could not find py4j jar at {0...

头部AI社区如有邀博主AI主题演讲请私信—心比天高,仗剑走天涯,保持热爱,奔赴向梦想!低调,专注,谦虚,自律,反思,成长,还算比较正能量的博主,公益免费传播…内心特别想在AI界做出一些可以推进历史进程影响力的技术(兴趣使然,有点小情怀,也有点使命感呀 4626

微信小程序input控件

首先主页面中将登录的样式进行了简单展示和使用,代码如下: <!--如果在同一个form表单中创建了多个input输入框,可以给给每个输入框, 创建自己的name=“userName”属性,可以区别哪个输入框,并通过添加 属性提交:bindsubmit="方法名" 重置:bindreset="方法名", 达到清除输入框内容的目的 js文件中的用法,e.detail.value.userName.length--> <view class="itemView">用户名: &lt.

Dax1_的博客 2533

SolidWorks速成教程P1——简介及基础操作

SolidWorks教程P1——简介及基础操作

嵌入式阿齐Archie 2万+

【微信小程序】表单验证提交

效果图: 说明:点击一键预约提交表单时我们需要验证一些必填项以及它们的格式。微信小程序表单验证跟vue的input双向绑定不同,微信小程序只能通过button按钮提交form表单,然后通过监听表单提交方法去获取提交的数据。 <!-- 表单 --> <view class="forms"> <view class="container"> <image class="bg" src="../../images/formBg.png" mode="aspe

得意小门生的博客 3136

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

微信小程序中的正则验证、手机号验证随笔

需求:小程序开发中的表单提交,涉及到手机号验证,必填项验证等问题 微信小程序中不通过操作DOM节点来实现验证,因此绝了我想要通过节点直接获取值进行验证的想法 $("body").on("blur", ".input", function () { console.log($(.input).val()) }) 思路: 在input onblur的时候进行存值,(注意多个input框的时候存值...

丑八怪的博客 839

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

微信小程序,验证码输入框

微信小程序,验证码输入微信小程序,验证码输入 微信小程序,验证码输入

weixin_42284905的博客 4748

微信小程序电话号码input框的正则校验

微信小程序电话号码input框的正则校验 1、wxml <!-- start 联系电话 --> <view class="mobile"> <sapn class="title">联系电话</sapn><input value="{{registration.mobile}}" class="mobile-weui-input" type="number" bindblur="mobileInput" maxleng

improvement 4734

微信小程序表单验证方式

因微信小程序上没有自带表单验证,为了实现和vue的组件库类似于的表单验证,这个时候我们就需要借鉴一个文件WxValidate表单验证的js插件,以下只是做个列子,需要更多验证请往官网文档查看 插件下载地址及官方文档:https://github.com/skyvow/wx-extend 具体的WxValidate.js文件的位置在wx-extend/src/assets/plugins/wx-validate/WxValidate.js 1.文件的复制 首先要把WxValidate.js复制到微信.

qq_45121945的博客 7875

基于微信小程序 + colorUI 做的form表单封装——input

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么? 二、使用步骤 1.引入库 2.读入数据 总结 前言 最近在做一个微信小程序,里面涉及了大量表单组件(如:input、picker、radio)的提交、预览,以及九宫格视频、图片的添加、回显,又看到colorUI这个ui库,感觉挺符合我审美,封装的也很好,最终决定在colorUI的基础上再封装一下,增加业务逻辑,使之更契合实际开发项目。 本着记录并回顾学...

m0_37890809的博客 4199

小程序制作节点一:input文本框(1)

关于input文本框内容的捕获和简单的判断,会用到detail.value

weixin_66193671的博客 1148
上一篇: 关于隐私保护通话 - 隐私号关系详解
下一篇: 【腾讯地图】实现汽车、人员沿轨迹运动js源代码
星海设计
博客等级 码龄19年 13粉丝 37原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

星海设计

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值