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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/717.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

企业单位IPTV数字电视直播与点播系统-中国卫通怀来地球站IPTV数字电视直播与点播系统应用浅析

企业单位IPTV数字电视直播与点播系统-中国卫通怀来地球站IPTV数字电视直播与点播系统应用浅析 由北京海特伟业科技有限公司任洪卓发布于2024年4月19日 一、运营商光猫接入企业/单位IPTV数字电视直播与点播系统建设概述 中国卫通怀来地球站&#xff0c;位于怀来县土木镇&#xf…

小球反弹(蓝桥杯)

文章目录 小球反弹【问题描述】答案&#xff1a;1100325199.77解题思路模拟 小球反弹 【问题描述】 有一长方形&#xff0c;长为 343720 单位长度&#xff0c;宽为 233333 单位长度。在其内部左上角顶点有一小球&#xff08;无视其体积&#xff09;&#xff0c;其初速度如图所…

非洲秃鹫优化算法C++简化版/Matlab优化版

非洲秃鹫优化算法&#xff08;Vulture Optimization, VO&#xff09;是一种基于自然界中非洲秃鹫觅食行为的群体智能优化算法。这种算法由Seyedali Mirjalili教授在2016年提出&#xff0c;旨在模拟非洲秃鹫在寻找食物时的社会互动和觅食策略&#xff0c;以解决复杂的优化问题。…

swift代码集合

码云地址 swift-h5 1.实现了用h5开发iOS程序&#xff0c;封装了一个通用的h5加载类WebVC 2.封装了一个js和原生交互的通用js类common.js 简易HUD 1.自实现的一个文本展示和加载等待 网络请求 1.自实现的一个网络请求模块&#xff0c;实现get、post、上传下载等功能

CentOS 7静默安装Oracle 11g(记一次最小化CentOS 7安装Oracle 11g的经历)

# [pdf在线免费转word文档](https://orcc.online/pdf) https://orcc.online/pdf 1.最小化安装CentOS 7后首先设置一下固定IP 可以先查询一下自己的网卡设备的名称&#xff0c;是ens33&#xff0c;所以网卡配置文件名称就是ifcfg-ens33&#xff08;前面的ifcfg-不用管&#xf…

HCIP-Datacom-ARST必选题库_01_ACL【7道题】

一、单选 1.下面是一台路由器的部分配置,关于该配置描述正确的是&#xff1a; 源地址为1.1.1.1的数据包匹配第一条ACL语句rule 0,匹配规则为允许 源地址为1.1.1.3的数据包匹配第三条ACL语句rule 2,匹配规则为拒绝 源地址为1.1.1.4的数据包匹配第四条ACL语句rule 3,匹配规则为允…

rpc简介

RPC (Remote Procedure Call) RPC 是一种分布式计算技术&#xff0c;允许一个计算机程序&#xff08;客户端&#xff09;在本地调用另一个计算机程序&#xff08;服务器&#xff09;的方法或函数&#xff0c;就像调用本地代码一样&#xff0c;尽管这些程序可能运行在不同的网络…

【Python】函数(纯干货版)

目录 什么是函数 函数定义 函数的文档说明 局部变量和全局变量 综合案例&#xff1a;模拟实现ATM界面 什么是函数 函数是组织好的&#xff0c;可重复使用的&#xff0c;用于实现特定功能的代码段&#xff0c;将功能封装在函数内&#xff0c;可供随时随地重复利用&#xff…

加固平板电脑加速国产化!应用场景大科普

随着时代的发展&#xff0c;国产化平板电脑已经开始慢慢的实现了&#xff0c;国产芯片、国产操作系统、国产 GPU、国产 GNSS 等众多关键技术的集成与应用。全新的平台&#xff0c;全新的突破&#xff0c;全新的应用&#xff0c;让国产加固型移动计算机系列往前进了一步。那么加…

如何用 AI 工具做数据分析与可视化?

&#xff08;注&#xff1a;本文为小报童精选文章。已订阅小报童或加入知识星球「玉树芝兰」用户请勿重复付费&#xff09; 万字长文&#xff0c;助力你用 AI 提升科研效率。 2024 年 4 月 14 日&#xff0c;应武汉大学信息管理学院的邀请&#xff0c;我和北京大学步一老师给几…

python 头文件怎么写

本文主要以python2为例。首先介绍一下Python头文件的编程风格&#xff0c;然后再给大家详细介绍import部分的基本用法。这两个部分就是Python中头文件的组成模块。 编程风格 #!/usr/bin/env python #在文件头部 ( 第一行 ) 加上 设置 Python 解释器 # -*- coding: utf…

【开源】使用Python+Flask+Mysql快速开发一个用户增删改查系统

项目演示 项目本身很简单&#xff0c;增删改查是几乎所有系统的骨架。正所谓万丈高楼平地起&#xff0c;学会了增删改查&#xff0c;航母就指日可待了&#xff1a;&#xff09;&#xff0c;光速入门&#xff0c;直接看演示图&#xff1a; 项目地址 https://github.com/mudf…

设计模式代码实战-责任链模式

1、问题描述 小明所在的公司请假需要在OA系统上发布申请&#xff0c;整个请求流程包括多个处理者&#xff0c;每个处理者负责处理不同范围的请假天数&#xff0c;如果一个处理者不能处理请求&#xff0c;就会将请求传递给下一个处理者&#xff0c;请你实现责任链模式&#xff…

大华相机C#学习之IDevice类

获取方式 Enumerator.GetDeviceByGigeIP() 通过IP地址获取设备对象。 private void test_Click(object sender, EventArgs e) {devicesEnumerator.EnumerateDevices();device Enumerator.GetDeviceByGigeIP("192.168.0.11"); } 常用属性 DeviceInfo 获取设备的信…

uniapp_微信小程序_预约时间组件的使用

一、官方文档 DatetimePicker 选择器 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架 (uviewui.com) 二、完成的效果 之前使用的是Calendar 日历 这个太耗性能了&#xff0c;直接页面卡顿&#xff0c;所以就换成以上选择器了 三、代码 <u-datetime-p…

短信登录session-redis

1.流程 1.1 发送验证码 模拟路径 http://127.0.0.1:8080/api/user/code?phone1335566 Request Method:POSTcontroller层 /*** 发送手机验证码*/PostMapping("code")public Result sendCode(RequestParam("phone") String phone, HttpSession session) {…

flink on k8s部署

在 Kubernetes 上部署一套 Flink 集群需要使用 Kubernetes 原生资源和工具,如 StatefulSet、Deployment、Service 等,或使用专门的 Flink Operator 来自动化和简化 Flink 集群的部署和管理。以下是一般的部署步骤: 使用 Flink Operator 部署 Flink 集群: 安装 Flink Opera…

C#自定义窗体更换皮肤的方法:创建特殊窗体

目录 1.窗体更换皮肤 2.实例 &#xff08;1&#xff09;图片资源管理器Resources.Designer.cs设计 &#xff08;2&#xff09;Form1.Designer.cs设计 &#xff08;3&#xff09;Form1.cs设计 &#xff08;4&#xff09; 生成效果 &#xff08;5&#xff09;一个遗憾 1.窗…

【银角大王——Django课程Day1】

Django框架第一课 安装Django框架方式一&#xff08;命令行的形式创建Django项目&#xff09;方式二&#xff08;适合企业版的pycharm&#xff09;默认文件介绍app文件介绍快速上手我的导包一直爆红是因为我没使用解释器&#xff0c;没导入包&#xff0c;去设置里面导入包即可—…

Java注解相关

Java注解相关 TableId注解 需要 import com.baomidou.mybatisplus.annotation.TableId; <!-- 各个依赖的版本号 --><properties><spring-boot.version>3.2.5</spring-boot.version><java.version>17</java.version><mybatis-plus.versi…