如何解决elment ui必填验证输入空格通过校验？

于 2024-05-27 01:02:09 发布
阅读量516 收藏
点赞数 17
分类专栏： 前端疑难杂症 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BenChiZhuBaDaoWang/article/details/139223947
版权
本文介绍了如何防止用户在前端使用Element UI时输入空格通过必填验证。提供了三种解决方案：v-model.trim修饰符、自定义正则表达式校验和请求拦截器过滤首尾空格。强调了前端+后端数据校验的重要性，并推荐使用正则表达式以减少工作量。
摘要由CSDN通过智能技术生成

很久之前有个客户定制了一个ERP系统，里面有个单位的必填项，是没有任何规律的字符串，也就是只需要做必填即可，结果前段时间维护该信息的换了一个人，必填的单位居然是空白，因为数据缺失的原因导致后面一系列的工作流一个都提交不了，该员工意识到自己闯祸后直接跑路，联系不上，后经过我们排查发现是输入了空格，因为当时客户赶时间只做了前端校验，后端接口就直接通过操作了，所以这里还是强烈建议前端+后端数据校验才是安全的，当然如果是客户这边给到的费用不够或者赶时间那就把后端校验的功能阉割掉，然后必填项这里使用如下方法就不会输入空格就能通过校验了

首先我们需要知道的是其实空格也同样算是一个字符。同样的空格那么肯定是会通过校验的，那么我们如何去实现不让其首尾输入空格呢？

方案一：

使用v-model.trim修饰符，这样就会自动过滤掉首尾空白字符，如果采用trim修饰符的话，确实可以实现功能，但是这个时候首尾都不能输入空格就会导致一个问题，当我们从左到右输入文字的时候，如果需要输入的字符串中间包含空格，就会无法实现，会遇到不能输入的问题，我们只能输入完成之后再去将鼠标光标放置在字符串中间部分输入空格，这样肯定是不利于我们输入的。

方案二：

采用pattern，手写正则的方式实现功能。我们只需要在我们对应的r

了解本专栏 订阅专栏 解锁全文 超级会员免费看
博客
chrome如何实现安装网站的网页版应用程序？
08-12 333
如果你的网站满足PWA的所有标准，Chrome会在这个菜单中显示“Install App”的选项，用户点击即可将你的网站添加到他们的移动设备的主屏幕上，就像任何其他安装的应用程序一样。没错，最后安装完成是出现在桌面上的，和其他的软件并没有什么区别，如果你使用的是圆角图，那还真的很难区分，因为这里你打开的时候，他是独立窗口打开的，而不是跳到chrome打开，直接看图吧。打码的地方显示的是你mainfest里设置的图标和名字，名字下面是你网站的网址，隐私原因打码了。好了，我们看看最终安装完成后的效果吧。
博客
如何解决ThinkPHP 日志信息泄露漏洞？
08-12 274
由此可见，国外还是挺脏的。都2024年了，买源码别再买thinkPHP3.x和thinkPHP5.x框架的源码了，最近几个月已经碰到两三个这5.x的了，找我修复，有个冤大头买个源码花了一两万结果还是5.x框架的，新项目现在都用thinkPHP8.x了，再怎么不行，用thinkPHP6.x也可以的。我看了一下他们的网站后，好家伙，发现是thinkPHP而且是5.0.24，其实他这个就是thinkPHP的日志信息泄露漏洞，我们修复一下就好了，完全不需要用到mysql触发器。
博客
如何设置cloudflare防御规则？
08-12 265
表达式：(cf.threat_score ge 5 and not cf.client.bot) or (not http.request.version in {"HTTP/2" "HTTP/3" "HTTP/1.1"}) or (not ip.geoip.country in {"AU" "CA" "FR" "DE" "HK" "IR" "JP" "KR" "MY" "SG" "TW" "GB" "US" "CN"})这些大写字母是国家或地区的简称，在其中的都是放行的国家。这一波设置基本就ok了。
博客
JS如何实现禁止截屏、打印、另存为操作？
08-04 402
setInterval("window.clipboardData.setData('Text','请关闭分行网站')",100)给一般会在浏览器找到开发者选项的用户制造个js文件bug（专业人士基本都可以跳过，对不懂和半懂的人有效）定时清理粘贴板，可用于防止复制（这种太恶心，打开这个网页时什么都别想复制粘贴）console.log("禁用：ctrl+s");console.log("禁用：开发工具");屏蔽选中、粘贴、复制、剪切、右键菜单、禁止新窗口打开。禁止打印保存,禁止打印（打印出来是空白）
博客
如何实现element UI循环表单？
08-04 217
有时候我们需要写一些表单，但是项目里如果表单太多，写起来真的挺烦的，这个时候我们就不得不去想一些办法实现一劳永逸了，循环表单应运而生，只需要将这些表单结构存储在数据库中，使用v-for循环将表单结构循环出来就可以了。
博客
如何实现ElementUI表单项label的文字提示？
08-04 593
是一种特殊的标签，用于在父组件中插入子组件的内容。它允许父组件将额外的内容传递到子组件中，使得子组件变得更加灵活和可重用。中实现多行内容，我们可以使用Vue的模板语法和HTML标签来构建更复杂的结构。有时候，可能希望在子组件中定义多个插槽，以便更精细地控制传递进来的内容。通过这样的实现，用户在操作表单时可以方便地获取关于表单项的额外信息，提高了整体用户体验。，可以在子组件中定义一些占位符，然后在父组件中填充这些占位符的内容。标签，我们可以在其中插入自定义的内容，并使用。在之前的代码中，我们已经成功地在。
博客
v-model修饰符详解
08-04 82
例如，可以同时使用 .lazy 和 .trim 修饰符来实现延迟同步并去除首尾空格：作用：默认情况下，v-model 会在输入事件（如 input）中同步输入框的数据。在 Vue.js 中，v-model 是用于创建双向数据绑定的指令，这意味着你可以将数据绑定到输入元素上，并且当输入元素的值改变时，绑定的数据也会自动更新。适用场景：当需要减少数据更新频率，以避免频繁的计算和渲染时，可以使用 .lazy 修饰符。
博客
Laravel如何清除缓存？
08-04 363
在 Laravel 中，可以使用 Artisan 命令清除缓存。请注意，这些命令只是清除缓存，而不是重新生成缓存。因此，在执行这些命令之后，你需要重新生成相应的缓存。这个命令将清除所有类型的缓存，并且在完成之后，你的应用程序将重新生成相应的缓存。清除优化类加载器缓存。
博客
如何卸载Mac自带软件？
08-04 732
我们都知道，Mac电脑里有一部分自带的预装软件用平常的方法是不能直接进行卸载掉的，是需要一些特殊的手法才能卸载掉，这就有点烦人了，好在我们可以使用终端进行卸载。在Mac最新版本中对自带程序进行了保护，为了彻底卸载受保护的程序，需要进入恢复模式（按住Command + R启动），然后在终端中执行相关命令解除保护限制后删除应用。输入cd applications后 继续输入ls查看文件列表 即可看到你需要卸载的app，不过都是英文的，所以需要确定你要卸载的软件的英文名。选项，这次正常重启什么都不用按，打开。
博客
如何实现element-ui 后台中点击按钮，将文本内容复制到剪贴板
08-04 665
比如现在我们的需求是，页面上有个按钮，点击后弹窗显示需要复制的文本内容，点弹窗的复制文本按钮，然后提示复制成功。//window.clipboardData的作用是在页面上将需要的东西复制到剪贴板上，//execCommand方法是执行一个对当前文档/当前选择/给出范围的命令。好了，这样就实现了我们的需求了，只需要把复制文本到剪切板的这两个函数直接copy到你自己的项目就可以使用了。//提供了对于预定义的剪贴板格式的访问，以便在编辑操作中使用。//'Copy':将当前选中区复制到剪贴板。
博客
如何解决yarn install报错：Expected version “＞=16“. Got “14.17.0“
07-22 147
这个命令是用于设置Yarn配置，以忽略包的引擎要求。Yarn是一个流行的JavaScript包管理工具，而引擎要求是指每个npm包可能在其。这个时候不要慌，不要急着换版本，毕竟换版本也是让人心烦，虽然n模块方便操作，但就是懒，😂，毕竟没有必要单独为了一个项目去换版本。文件中指定了仅在特定版本的Node.js或Yarn引擎下运行时才能运行的要求。好了，这样就解决问题了。
博客
如何实现宝塔面板免手机号登录？
07-21 357
天下苦宝塔面板强制手机号登录久矣，特别是给客户安装面板的时候，客户啥都不懂，还要给他注册宝塔账号，然后登录。虽然流程不复杂，也不花什么时间，但是客户可不是每个人都能配合你的，我之前就有一个客户，就注册这个账号，整整花了一周时间才不情不愿的配合完成，这就很烦人了，宝塔面板7开始就强制手机号登录了，那么现在我们应该如何实现免手机号登录呢？如果你用的并非Debian、ubuntu系统，那么就访问以下网站，使用对应系统的指令即可，更多特性网站均有介绍，自行探索。如果你应该安装了宝塔，就登录ssh使用以下命令。
博客
如何实现SSH端口敲门让你的SSH固若金汤？
07-13 190
端口敲门（Port Knocking）是一种安全措施，它通过在防火墙上动态打开端口来允许合法用户访问受保护的服务。具体来说，端口敲门技术要求用户在尝试连接到SSH服务之前，按照预定义的顺序访问一系列隐藏端口。这种技术通过在网络层添加额外的验证步骤，有效地隐藏了实际的服务端口，并减少了被暴力破解的风险。
博客
如何安装MTG代理脚本最新版，实现高效代理服务？
07-12 261
MTProxy-Go 是一个高效的代理服务器，它基于 Telegram 的 MTProto 协议，允许用户通过安全的方式传输数据。此外，该项目集成了自动化的编译流程，确保你可以获得带有最新功能和安全优化的二进制文件。基于 Go 语言的 MTProxy-Go 提供了一键编译和安装的脚本，让你能够轻松获取支持 TLS 伪装的最新版本。总的来说，MTProxy-Go 结合了现代网络协议的优势和便捷的自动化工具，是建立安全代理服务的理想选择。要开始使用，只需从项目仓库下载并执行提供的脚本，系统将自动处理其余事项。
博客
如何在element中table的 v-for中 使用slot-scope？
07-12 478
span v-else-if="scope.row[scope.column.property]=='按钮'">"description": "权限01","description": "权限02","description": "权限03","description": "权限04","description": "权限05","name": "姓名01","name": "姓名02","name": "姓名03","name": "姓名04","name": "姓名05",label="序号"
博客
element如何实现自定义表头？
07-12 510
需注意：button方法里面返回的按钮元素，给它添加点击方法不能用@click或v-on:click，无法识别，会报错。有时候我们需要实现自定义表头，例如表头里加按钮啥的，这时候就需要用到自定义表头，但是官方对自定义表头的使用写的还是比较简单，今天就来详细说说。isShow: true // 控制按钮的变量，点击按钮。// 如果点击了按钮，就给按钮切换背景色。
博客
html的meta标签详解
07-08 181
meta是html语言head区的一个辅助性标签。几乎所有的网页里，我们都可以看到也许你认为这些代码可有可无。其实如果你能够用好meta标签，会给你带来意想不到的效果，例如加入关键字会自动被大型搜索网站自动搜集；可以设定页面格式及刷新等等。meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
博客
Vue如何 使用socket.io实现聊天室功能？
07-08 231
好了，现在你已经掌握了socket.io的基本用法，接下来就让我们一起来看看在 Vue.js 组件中是如何使用 Socket.io 事件来实现聊天功能。使用socket.io可以实现聊天室的实时通信功能，完整的聊天室功能还需要处理用户登录、发送图片、语音等功能，这里只是简单介绍了如何使用socket.io实现实时通信。在实际的项目中，聊天室的实现需要考虑用户登录、消息的存储、消息的推送等问题。消息的推送：需要实现消息的推送功能，在用户发送消息时，将消息推送给其他用户。// 客户端监听服务器端的消息事件。
博客
如何在uniapp中使用websocket？
07-08 694
websocket是我们经常使用到的接口，通常用于即时通讯以及K线图这种需要实时更新数据的业务需求上，传统的restful接口虽然可以满足，但是你需要轮询，这就要额外写一堆代码，不是很方便，用websocket就简单很多，我们来看代码。console.log("未监听到消息：原因：", JSON.stringify(res));// console.log("发送成功");console.log("监听到开启连接成功");console.log("监听到关闭连接成功");//这里写你的业务代码。
博客
如何实现CloudFlare免费内网穿透？
06-24 493
有时候我们可能需要用到内网穿透技术，将本机的资源开放到网络上供人访问！但是有时候我们只需要将一个项目开放的时候，使用frp就有点不划算了，特别是近几年服务器的价格水涨船高，要知道使用frp需要一台服务器和一个域名才可以的，这不今天就告诉大家一个用cloudflare实现的免费内网穿透方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值