uni微信小程序input框过滤中文字节以及规定以外的符号

news/2024/7/14 18:47:34/文章来源:https://blog.csdn.net/T3165919332/article/details/139266539

问题描述

需求是输入账号只能为手机号、邮箱、字母和数字组成的字符串,那么就是所有大小写字母、数字、以及符号 -  _  @  . 四种。

条件限制

  • 微信小程序无法直接通过type属性实现,type属性中没有专门为只允许英文字母的输入类型。详情见input | uni-app官网
     
  • 微信小程序不支持直接操作dom,因为他没有传统意义上的DOM。

问题分析

使用正则过滤数据,但是如果是使用的动态绑定的话,直接把过滤后的值赋给input框动态绑定的值输入框还是可以出现中文。会出现我开始输入中文然后input框可以看见,然后输入英文,中文被删除了如下。

错误代码
HTML

<input class="item_left account" placeholder="官方账号" :value="accountValue" maxlength=20  @input="inputAccount">

JS

<script>export default {data() {return {accountValue: '', //账号输入框}},methods: {// 输入账号inputAccount(e) {this.accountValue = e.detail.value.replace(/[^a-zA-Z0-9\-@_.]/g, '');},}}
</script>

解决方法

使用 @input 事件处理函数并从该函数中返回一个值。在微信小程序中,input 组件的 input 事件处理函数可以返回一个值,这个返回值将直接影响输入框的当前值。如果你在事件处理函数中返回一个经过处理(如过滤操作)的字符串,那么输入框的显示将被更新为这个返回的字符串。

如果不返回值会怎么样?

如果你的事件处理函数不返回任何值,或者返回的是 undefined,那么输入框的内容将不会被强制更改为你在函数中设置的过滤后的值。这种情况下:

  • 用户输入的内容(包括中文或其他不被允许的字符)将显示在输入框中,因为没有返回值去覆盖用户的输入。
  • 尽管你可能在事件处理函数中已经将动态绑定的值设置为过滤后的值,但因为没有返回这个值,输入框的显示内容不会同步更新,仍然显示用户原始输入的内容。

正确代码

html

<input class="item_left account" placeholder="官方账号" :value="accountValue" maxlength=20  @input="inputAccount">

js

<script>export default {data() {return {accountValue: '', //账号输入框}},methods: {// 输入账号inputAccount(e) {// 过滤掉所有双字节字符(包括汉字)和非法符号this.accountValue = e.detail.value.replace(/[^a-zA-Z0-9\-@_.]/g, '');return this.accountValue},}}
</script>

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

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

相关文章

【windows】Total Uninstall:一款功能强大的完全卸载软件

软件介绍 Total Uninstall是一款专业的软件卸载工具&#xff0c;旨在帮助用户彻底地清除计算机上的应用程序&#xff0c;包括与应用程序相关的所有文件和注册表项。以下是Total Uninstall的一些主要功能和特点&#xff1a; 完全卸载&#xff1a;软件可以监视应用程序的安装过程…

使用Django实现WebSocket

文章目录 安装依赖编写Consumer配置路由在模板中使用WebSocket运行应用 WebSocket是一种在单个TCP连接上进行全双工通信的协议&#xff0c;在Web开发中被广泛应用于实时通信和数据推送。本文将介绍如何在Django中使用WebSocket来实现实时通信功能。 安装依赖 首先&#xff0…

基于Java实现震中附近风景区预警可视化分析实践

目录 前言 一、空间数据说明 1、表结构信息展示 2、空间范围查询 二、Java后台开发实现 1、模型层设计与实现 2、控制层设计与实现 三、Leaflet地图开发 1、地震震中位置展示 2、百公里风景区列表展示 3、风景区列表展示 4、附近风景区展示 四、总结 前言 地震这类…

prompt提示词:如何让AI帮你提一个好问题

我们看完一篇文章的时候&#xff0c;有时候发给AI后&#xff0c;不知道如何问AI&#xff0c;不知道问哪些问题&#xff0c;你使用这个提示词&#xff0c;就可以让AI帮你想一个好问题&#xff0c;然后你用AI想好的问题再去问AI 能提出一个好的问题是非常难的 提示词 结合文章…

免费插件集-illustrator插件-Ai插件-文本对象分行

文章目录 1.介绍2.安装3.通过窗口>扩展>知了插件4.功能解释5.总结 1.介绍 本文介绍一款免费插件&#xff0c;加强illustrator使用人员工作效率&#xff0c;进行文本对象分行。首先从下载网址下载这款插件 https://download.csdn.net/download/m0_67316550/87890501&…

【头歌】计算机网络DHCP服务器配置第二关access口配置答案

头歌计算机网络DHCP服务器配置第二关access口配置操作步骤 任务描述 本关任务&#xff1a;创建 vlan &#xff0c;并且将与 pc 机相连接口划分 vlan 。 操作要求 在第一关的拓扑图的基础上&#xff0c;配置交换机&#xff0c;具体要求如下&#xff1a; 1、在特权模式下进入 vla…

Day06-Mybatis

1. Mybatis介绍 2. Mybatis连接数据库并返回数据事例 连接oracle数据的设置方式 spring.application.namespringboot-mybatis spring.datasource.driver-class-nameoracle.jdbc.OracleDriver spring.datasource.urljdbc:oracle:thin:192.168.100.66:1521:orcl spring.datasour…

IDEA升级web项目为maven项目乱码

今天将一个java web项目改造为maven项目。 首先&#xff0c;创建一个新的maven项目&#xff0c;将文件拷贝到新项目中。 其次&#xff0c;将旧项目的jar包&#xff0c;在maven的pom.xml做成依赖 接着&#xff0c;把没有maven坐标的jar包在编译的时候也包含进来 <build>…

redis数据类型之string,list

华子目录 key操作说明SCAN cursor [MATCH pattern] [COUNT count]dump与restorekeys 通配符 示例演示 string说明setbit key offset valuegetbit key offsetsetrange key offset value List结构图相关命令lrem key count valueltrim key count value示例&#xff1a;使用 LTRIM…

从alpine构建预装vcpkg的docker image用于gitea actions CI

动机 想要构建一个基于vcpkg的交叉编译容器平台用于cpp项目的CI&#xff08;自动集成&#xff09;&#xff0c;此处仅提供最基础的image&#xff0c;amd64的机子上构建完成后大小为533兆&#xff08;着实不小&#x1f613;&#xff09;&#xff0c;各位看官可以在此基础上自行…

性能测试(一)—— 性能测试理论+jmeter的使用

1.性能测试介绍 定义&#xff1a;软件的性能是软件的一种非功能特性&#xff0c;它关注的不是软件是否能够完成特定的功能&#xff0c;而是在完成该功能时展示出来的及时性。 由定义可知性能关注的是软件的非功能特性&#xff0c;所以一般来说性能测试介入的时机是在功能测试完…

Jetson Orin Nano v6.0 + tensorflow2.15.0+nv24.05 GPU版本安装

Jetson Orin Nano v6.0 tensorflow2.15.0nv24.05 GPU版本安装 1. 源由2. 步骤2.1 Step1&#xff1a;系统安装2.2 Step2: nvidia-jetpack安装2.3 Step3&#xff1a;jtop安装2.4 Step4&#xff1a;h5py安装2.5 Step5&#xff1a;tensorflow安装2.6 Step6&#xff1a;jupyterlab安…

SpringBoot——数据访问

优质博文&#xff1a;IT-BLOG-CN 对于数据访问层&#xff0c;无论是 SQL 还是 NoSQL&#xff0c;SpringBoot 默认采用整合 Spring Data 的方式进行统一处理&#xff0c;添加大量自动配置&#xff0c;屏蔽了很多设置。引入各种 xxxTemplate&#xff0c;xxxRepository 来简化我…

2024年上半年软件系统架构师考试【回忆版】

文章目录 考试时间考试地点综合知识案例分析1、微服务架构的优点和缺点2、质量属性的6个要素3、分布式锁 Redis的缺点4、MongoDB 存储矢量图的优势 论文回忆版论文一、论单元测试的设计与应用论文二、论大数据模型的设计与应用论文三、论模型驱动的架构设计及应用论文四、论云自…

Spring Boot中如何查询PGSQL分表后的数据

数据库用的pgsql&#xff0c;在表数据超过100w条的时候执行定时任务进行了分表&#xff0c;分表后表名命名为原的表名后面拼接时间&#xff0c;如原表名是card_device_trajectory_info&#xff0c;分表后拼接时间后得到card_device_trajectory_info_20240503&#xff0c;然后分…

量子密钥分发系统基础器件(一):光纤干涉仪

干涉仪的基本原理是利用波的叠加来获得波的相位信息&#xff0c;从而获取实验中所关心的物理量。光纤干涉仪是由光学干涉仪发展而来的&#xff0c;利用光纤实现光的干涉&#xff0c;由于光纤取代透镜系统构成的光路具有柔软、形状可随意变化、传输距离远等特点&#xff0c;当前…

RT-DETR算法改进【NO.1】借鉴CVPR2024中的StarNet网络StarBlock改进算法

前 言 YOLO算法改进的路有点拥挤,尝试选择其他的baseline作为算法研究,可能会更加好发一些文章。后面将陆续介绍RT-DETR算法改进的方法思路。 很多朋友问改进如何选择是最佳的,下面我就根据个人多年的写作发文章以及指导发文章的经验来看,按照优先顺序进行排序讲解…

HTML静态网页成品作业(HTML+CSS)——动漫熊出没介绍网页(3个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有3个页面。 二、作品演示 三、代…

如何使用git上传linux下的项目!---附带每一步截图

在实际项目中&#xff0c;我们需要把自己的模块递给GitHub&#xff0c;需要别人的模块的时候拉下来&#xff0c;那么我们怎么把自己的项目递给GitHub呢&#xff1f;下面做一个总结&#xff1a; 登录GitHub 创建一个仓库 填写相关信息 项目名称是必填的&#xff0c;项目描述可以…

09Django项目--用户管理系统--删

对应视频链接点击直达 09Django项目--用户管理系统--删 对应视频链接点击直达删a&#xff0c;本质b&#xff0c;删除 页面相关a&#xff0c;index页面新增操作按钮b&#xff0c;ajax删除和提示c&#xff0c;完整版本 OVER&#xff0c;不会有人不会吧不会的加Q1394006513结语 一…