惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

U
Unit 42
博客园 - 司徒正美
博客园 - 三生石上(FineUI控件)
博客园_首页
IT之家
IT之家
The Cloudflare Blog
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
酷 壳 – CoolShell
酷 壳 – CoolShell
爱范儿
爱范儿
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Y
Y Combinator Blog
A
About on SuperTechFans
Microsoft Azure Blog
Microsoft Azure Blog
美团技术团队
S
SegmentFault 最新的问题
T
Tailwind CSS Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
M
MIT News - Artificial intelligence
WordPress大学
WordPress大学
B
Blog RSS Feed
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
博客园 - 【当耐特】
小众软件
小众软件
有赞技术团队
有赞技术团队

博客园 - JoeYoung

nvm-windows 实现 Node 多版本管理 收官大吉,来年可期 本地部署 DeepSeek+VS Code,搭建本地大模型 电脑安装 Win10 提示无法在当前分区上安装Windows的解决办法 Ollama可以不装在C盘,安装时选择路径 Swiper 自动无缝匀速滚动 Swiper 实现奇葩需求案例 Vue+ElementUI 导出为PDF文件 table 中设置宽度被td或th里的内容撑开超出 在页面离开前提醒你的 beforeunload 事件 npm安装依赖包的多种镜像及方法 通栏中不定数量的图片/轮播自适应宽高的简单示例 微信小程序 input中输入内容后还提示请输入的解决办法 CSS的逻辑组合伪类 CSS结构伪类选择器之否定伪类:not() jQuery 指定区域的内容循环滚动 微信小程序 scroll-view 组件的 bindscroll 不触发不生效 scroll-view 组件里的 scroll-into-view 属性实例 微信小程序 授权登录时不得默认强制用户同意隐私政策协议
微信小程序 input 不能输入特殊字符的方法
JoeYoung · 2024-04-19 · via 博客园 - JoeYoung

微信小程序开发中经常遇到有表单提交的需求,一些特殊的字段要过滤掉特殊字符。比如姓名、籍贯、地址等,都要实现不能输入特殊字符的功能,可以创建一个统一的方法来处理输入事件,并在这个方法中检查输入的字符。

下面是一个简单的示例:

<view class='flex f30 ali-center'>
          <input type="text" name="realname" value='{{realname}}' placeholder="请填真实姓名" bindchange="onName" data-field="realname" />
</view>
<view class='flex f30 ali-center'>
          <input type="text" name="hometown" value='{{hometown}}' placeholder="请填写籍贯" bindchange="onName" data-field="hometown"  />
</view>
<view class='flex f30 ali-center'>
          <input type="text" name="address" value='{{address}}' placeholder="请填写地址" bindchange="onName" data-field="address" />
</view>

js:

// 输入框发生改变事件
onField(e) {
    let value = e.detail.value;
    let field = e.currentTarget.dataset.field
    // console.log('Input field:', field, 'Value:', value); 
    this.handleSpecialChars(value, field)
},

// 过滤特殊字符
handleSpecialChars(value, fieldName) {  
let reg
= /^[\u4e00-\u9fa5a-zA-Z0-9\s,.?!;:\'"]+$/; // 允许中文字符、英文字母、数字以及基本标点符号 if (!reg.test(value)) { wx.showToast({ title: '不能输入特殊字符', icon: 'none' }); this.setData({ [fieldName]: '' }); } else { this.setData({ [fieldName]: value }); return value; } },

如果姓名更严格点可以限制只允许输入中文:

let reg = /^[\u4e00-\u9fa5]+$/; // 正则表达式,只匹配中文

请注意,这个示例在输入非符合正则表达式时会清空输入框,这可能会影响到部分用户的体验感。