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

server/2024/12/23 0:53:24/

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

下面是一个简单的示例:

<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]+$/; // 正则表达式,只匹配中文

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


http://www.ppmy.cn/server/3112.html

相关文章

【React Router】初识路由(上)

开始 使用 Vite 创建一个新的 React 应用程序&#xff1a; npm create vitelatest name-of-your-project -- --template react # follow prompts cd <your new project directory> npm install react-router-dom localforage match-sorter sort-by npm run dev添加 Rou…

【Jenkins PipeLine】Jenkins PipeLine 联动参数示例

目录 1. Pipeline script&#xff1a; 1.1.代码说明&#xff1a; 2. 实现效果&#xff1a; 3.联动说明&#xff1a; 4.Jenkins安装插件 1. Pipeline script&#xff1a; properties([parameters([[$class: "ChoiceParameter", choiceType: "PT_SINGLE_SELE…

论文笔记:(INTHE)WILDCHAT:570K CHATGPT INTERACTION LOGS IN THE WILD

iclr 2024 spotlight reviewer 评分 5668 1 intro 由大型语言模型驱动的对话代理&#xff08;ChatGPT&#xff0c;Claude 2&#xff0c;Bard&#xff0c;Bing Chat&#xff09; 他们的开发流程通常包括三个主要阶段 预训练语言模型在被称为“指令调优”数据集上进行微调&…

nodejs工具模块学习

util 是一个Node.js 核心模块&#xff0c;提供常用函数的集合&#xff1b; util.inspect(object,[showHidden],[depth],[colors]) 是一个将任意对象转换 为字符串的方法&#xff0c;通常用于调试和错误输出&#xff1b; 如果只有一个参数 object&#xff0c;是要转换的对象&…

密码学基础 -- 走进RSA(2)(放弃数学原理版)

目录 1.概述 2. RSA测试 2.1 加解密实验 2.2 签名验签测试 3. RSA原理简介 4.小结 1.概述 从上面密码学基础 -- 走进RSA(1)(放弃数学原理版)-CSDN博客我们知道了非对称算法的密钥对使用时机&#xff0c;那么接下里我们继续讲解RSA&#xff0c;我们分别从RSA加解密、签名验…

数字化社交的引擎:解析Facebook的影响力

Facebook&#xff0c;作为全球最大的社交媒体平台&#xff0c;已经深深地融入了我们的日常生活和文化中。它不仅仅是一个简单的社交工具&#xff0c;更是一个复杂的数字生态系统&#xff0c;影响着我们的社交模式、文化认同以及信息获取方式。在这篇文章中&#xff0c;我们将深…

线性代数 | 分开写 |第二章 矩阵及其运算 | 3. 逆矩阵_back

​​​​​​## .思维导图 3.1 定义 定义:设 A , B \mathbf{A},\mathbf{B} A,B 是n阶方阵, E \mathbf{E} E 是n阶单位阵,若 A B = B A = E \mathbf{AB}=\mathbf{BA}=\mathbf{E} AB=BA=E,则称 A 为 可逆矩阵,并称 B \mathbf{B} B 是 A 的 逆矩阵,并称 B \mathbf{B} B…

Pytorch实用教程:pytorch使用模型时并没有调用forward函数,那么前向运算是如何执行的呢?

在 PyTorch 中&#xff0c;尽管我们定义了 forward 方法来指定模型的前向传播逻辑&#xff0c;实际上我们通常不直接调用这个方法。相反&#xff0c;我们通过调用模型对象本身来触发前向传播&#xff0c;这背后的机制涉及到了 Python 的 __call__ 方法。 __call__ 方法的作用 …