首页 > 编程语言 >微信小程序 input 不能输入特殊字符的方法

微信小程序 input 不能输入特殊字符的方法

时间:2024-04-19 16:57:58浏览次数:27  
标签:fieldName 微信 value field let 特殊字符 input 输入

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

下面是一个简单的示例:

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

js:

// 输入框发生改变事件
onField(e) {
    let value = e.detail.value;
    let field = e.currentTarget.dataset.name
    // 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]+$/; // 正则表达式,只匹配中文

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

标签:fieldName,微信,value,field,let,特殊字符,input,输入
From: https://www.cnblogs.com/joe235/p/18146359

相关文章

  • 企业微信hook 最新版 、企微输入验证码,二次扫码方案、发名片收消息功能,企业微信hook源
    ​产品说明在PC端企业微信客户端上发送自定义名片、封装企业微信功能为DLL,可与其他语言调用实现功能。DLL可以监听企业微信的所有消息接收和群消息,根据需求实现机器人、群发、自动消息推送、聊天机器人、监管数据收集等功能企业微信hook,企业微信功能api,自定义开发功能清......
  • 根据微信code获取换取用户登录态信息
    1.根据微信code获取换取用户登录态信息点击查看代码/***根据code获取小程序用户openpid*/@OverridepublicR<Map<String,String>>getUnitCheckPersonOpenId(Stringcode){R<Map<String,String>>resMap=newR<>();//获取......
  • 实验一-原型设计 微信卡包页面
    微信卡包页面-原型设计分享一、实验题目:原型设计二、实验目的:掌握产品原型设计方法和相应工具使用。三、实验要求 对比分析墨刀、Axure、Mockplus等原型设计工具的各自的适用领域及优缺点(至少3条)。1.墨刀:  ~适用领域:墨刀适用于快速原型设计和协作,特别是在移动应用和网页......
  • 【Python微信机器人】写一个监控采集公众号文章的插件
    原文链接:https://mp.weixin.qq.com/s/f8zbM6wMld3koqjaFbCuxw前言弄了个视频号下载后,同一个问题每天都会被问,回答的有点烦了。想了想根本原因还是缺少一个交流平台,微信群的话,刚进群的看不到之前的聊天记录。想整个知识星球,发现只能弄个收费的,免费的需要激活码才能创建。而有......
  • 微信小程序中生命周期钩子函数
    微信小程序App的生命周期钩子函数有以下7个:   onLaunch(options):当小程序初始化完成时,会触发onLaunch(全局只触发一次)。   onShow(options):当小程序启动或从后台进入前台显示时,会触发onShow。   onHide():当小程序从前台进入后台时,会触发onHide。   onError(......
  • 微信小程序 版本更新 强制更新新版本
    在点击小程序发布的时候选择,版本升级选项 之前用户使用过的再打开小程序页面就会弹出升级弹窗modal在utils.js中声明版本更新方法 //static/utils/index.jsexportfunctioncheckUpdateVersion(){//创建UpdateManager实例constupdateManager=uni.getUp......
  • 处理特殊字符
     某文档操作后得到的字符,由于Oracle11g的字符集原因,当前数据库的字符集为 ZHS16GBK.部分数据内容存储到数据库之后会丢失. SELECTvalueFROMNLS_DATABASE_PARAMETERSWHEREparameter='NLS_CHARACTERSET'; 根据网上的资料,一部分常用的字符 比如数字,......
  • java使用Workbook workbook = new XSSFWorkbook(inputStream);导出数据频繁GC
    由于xlsx底层使用xml存储,占用内存会比较大,官方也意识到这个问题,在3.8版本之后,提供了SXSSFWorkbook来优化写性能原来代码Workbookworkbook= newXSSFWorkbook(inputStream);优化后代码Workbookworkbook= newSXSSFWorkbook(newXSSFWorkbook(inputStream));此处有坑,请往......
  • java多渠道消息推送-(微信公众号、钉钉、邮箱、系统内部、短信等)
    1.消息对象定义1.1 通用消息对象定义packagecom.yj.notice.message;importcom.yj.commons.tools.utils.DateUtils;importcom.yj.commons.tools.utils.StringUtil;importcom.yj.notice.costant.NoticeMethodEnum;importlombok.AllArgsConstructor;importlombok.Bu......
  • 简单用VBS调用企业微信机器人发定时消息的方法
    <p>去年在企业微信群当中突然看到多了一个叫多群机器人的东西:</p>企业微信群机器人以为是升级了什么黑科技,看了下说明,原来目前功能是一个接收自定义消息的Webhook接口,可以通过调用接口把自定义消息推送到机器人所在的群当中。虽然看上去很简单,想想还......