如何解決elment ui必填驗證輸入空格通過校驗?

很久之前有個客戶定制了一個ERP系統,里面有個單位的必填項,是沒有任何規律的字符串,也就是只需要做必填即可,結果前段時間維護該信息的換了一個人,必填的單位居然是空白,因為數據缺失的原因導致后面一系列的工作流一個都提交不了,該員工意識到自己闖禍后直接跑路,聯系不上,后經過我們排查發現是輸入了空格,因為當時客戶趕時間只做了前端校驗,后端接口就直接通過操作了,所以這里還是強烈建議前端+后端數據校驗才是安全的,當然如果是客戶這邊給到的費用不夠或者趕時間那就把后端校驗的功能閹割掉,然后必填項這里使用如下方法就不會輸入空格就能通過校驗了

首先我們需要知道的是其實空格也同樣算是一個字符。同樣的空格那么肯定是會通過校驗的,那么我們如何去實現不讓其首尾輸入空格呢?

方案一:

使用v-model.trim修飾符,這樣就會自動過濾掉首尾空白字符,如果采用trim修飾符的話,確實可以實現功能,但是這個時候首尾都不能輸入空格就會導致一個問題,當我們從左到右輸入文字的時候,如果需要輸入的字符串中間包含空格,就會無法實現,會遇到不能輸入的問題,我們只能輸入完成之后再去將鼠標光標放置在字符串中間部分輸入空格,這樣肯定是不利于我們輸入的。

方案二:

采用pattern,手寫正則的方式實現功能。我們只需要在我們對應的rules數組對象校驗中新增這樣一個正則寫法即可。

rules:{

        code: [{ required: true, pattern: '[^ \x20]+', trigger: 'change', message: '驗證碼不能為空' }],

}</

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/17733.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/17733.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/17733.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

SQL生成序列淺析

01.sqlserver版本 使用sqlserver將數據復制n條 selectt.indx,t.name,tmp.vlue from (values(1,蘋果) ) as t(indx, name) ,(select[number] as vluefrom master.dbo.spt_valueswhere [type] pand [number] between 1 and 10 ) as tmpspt_values是什么 spt_values是SQL Se…

oracle 12c GI卸載流程

集群節點停止服務 [crsctl stop crs -f grid運行deinstall [rootprimary1 bin]# su - grid [gridprimary1 ~]$ cd $ORACLE_HOME/deinstall [gridprimary1 deinstall]$ ls bootstrap_files.lst bootstrap.pl deinstall deinstall.pl deinstall.xml jlib readme.txt …

多張圖片上傳、圖片回顯、url路徑轉成File文件

1. 實現 背景&#xff1a;在表單中使用element-plus實現多張圖片上傳(限制最多10張)&#xff0c;因為還要與其他參數一起上傳&#xff0c;所以使用formData格式。 編輯表單回顯時得到的是圖片路徑數組&#xff0c;上傳的格式是File&#xff0c;所以要進行一次轉換。 <tem…

超頻是什么意思?超頻的好處和壞處

你是否曾經聽說過超頻&#xff1f;在電腦愛好者的圈子里&#xff0c;這個詞似乎非常熟悉&#xff0c;但對很多普通用戶來說&#xff0c;它可能還是一個神秘而陌生的存在。 電腦超頻是什么意思 電腦超頻&#xff08;Overclocking&#xff09;&#xff0c;顧名思義&#xff0c;是…

PCIe (1)

計算PCIe的吞吐 PCIe吞吐依賴以下因素 >protocol overhead >payload size >completion latency >flow control update latency >characteristics of the devices that form the link Protocol Overhead 如果是8B/10B的編碼,那么需要25%的開銷。 對于Gen…

前端面試題大合集7----模塊化/工程化/ES6+標準

一、簡述webpack的核心原理 &#xff08;1&#xff09;一切皆模塊 正如JS文件可以是一個“模塊”一樣&#xff0c;其它的文件也可視作模塊。因此可以執行require(myJsFile.js)&#xff0c;亦可執行require(myCssFile.css)&#xff0c;這意味著我們可以將事物分割成更小的、易…

堆排序和Topk問題

堆排序 堆排序即利用堆的思想來進行排序&#xff0c; 總共分為兩個步驟&#xff1a; 1. 建堆 升序&#xff1a;建大堆&#xff1b; 降序&#xff1a;建小堆 2 .利用堆刪除思想來進行排序 利用堆刪除思想來進行排序 建堆和堆刪除中都用到了向下調整&#xff0c;因此掌握了…

外賣系統關于redis使用解決高并發情況

1、如何配置redis 在java中操作redis 操作步驟&#xff1a; 1、導入Spring Data Redis的maven坐標 2、配置Redis數據源 3、編寫配置類&#xff0c;創建RedisTemplate對象 4、通過RedisTemplate對象操作Redis 2、Redis結合Lua腳本 減少網絡開銷&#xff1a;使用Lua腳本&#xf…

FolkMQ v1.5.1 發布(“新式”國產消息中間件)

FolkMQ 是個“新式”的消息中間件。強調&#xff1a;“小而巧”、“簡而強”。 功能簡表 角色功能生產者&#xff08;客戶端&#xff09;發布普通消息、Qos0消息、定時消息、順序消息、可過期消息、事務消息、廣播消息消費者&#xff08;客戶端&#xff09;訂閱、取消訂閱。消…

前端面試題日常練-day27 【面試題】

題目 希望這些選擇題能夠幫助您進行前端面試的準備&#xff0c;答案在文末。 1. 在Vue中&#xff0c;以下哪個選項可以用于監聽數據的變化并執行相應的操作&#xff1f; a) computed b) methods c) data d) watch 2. 在Vue中&#xff0c;以下哪種方式可以實現組件之間的通信…

中醫理療元宇宙 科技賦能中醫藥產業走向國際市場

基于380億參數量&#xff0c;對中醫藥海量文本進行數據訓練&#xff0c;實現方劑優化、機制闡釋和新適應癥的精準發現……日前在天津召開的數智賦能大健康產業新質生產力暨第四屆中醫藥國際發展大會上&#xff0c;由天士力醫藥集團與華為云共同開發的“數智本草”中醫藥大模型正…

37. 解數獨 - 力扣(LeetCode)

基礎知識要求&#xff1a; Java&#xff1a; 方法、for循環、if else語句、數組 Python&#xff1a; 方法、for循環、if else語句、列表 題目&#xff1a; 編寫一個程序&#xff0c;通過填充空格來解決數獨問題。 數獨的解法需 遵循如下規則&#xff1a; 數字 1-9 在每一行…

Windows搭建Nginx代理本地盤的文件(共享路徑或本地路徑)

文章目錄 Windows搭建Nginx代理本地盤的文件 - 前言需求背景掛載網絡共享路徑檢查連接狀態下載Nginx編輯 Nginx 配置文件啟動 Nginx檢測Nginx是否成功啟動使用方法遠程共享路徑示例本地文件示例 測試 Windows搭建Nginx代理本地盤的文件 - 前言 在開發過程中&#xff0c;確保文…

ChatGPT Mac客戶端 下載安裝教程(免費 不限次數使用 還支持語音聊天)

ChatGPT Mac客戶端 下載安裝教程&#xff08;免費 不限次數使用 還支持語音聊天&#xff09; 原文鏈接&#xff1a;https://blog.csdn.net/weixin_48311847/article/details/139248625 免費 不限次數使用 還支持語音聊天

mysql 排序、查詢執行流程、幻讀

文章目錄 MySQL的 ORDER BY 執行流程示例表和查詢語句執行流程全字段排序Rowid 排序全字段排序 VS rowid排序聯合索引優化覆蓋索引優化 小結思考題問題執行過程中是否需要排序&#xff1f;如何在數據庫端實現不排序&#xff1f;實現分頁需求 使用ORDER BY RAND()內存臨時表與磁…

ANDROID OLLVM 混淆配置

安裝環境 MacOSGITCMAKENDK - 21.1.6352462 步驟 1. 編譯項目 此項目版本較低 https://github.com/obfuscator-llvm/obfuscator &#xff0c;我們使用 https://github.com/heroims/obfuscator 進行編譯 git clone https://github.com/heroims/obfuscator.gitcd obfuscator…

曼城四連冠,劍南春與萬千球迷共同見證“榮耀時刻”

執筆 | 洪大大 編輯 | 揚 靈 5月19日&#xff0c;英超2023-2024賽季第38輪比賽全面開打&#xff0c;憑借隊員的出色發揮&#xff0c;曼城最終以3-1戰勝西漢姆聯&#xff0c;成功捧起了英超聯賽的獎杯&#xff0c;成為英格蘭足球頂級聯賽100多年歷史上第一支成就四連冠的豪門…

事務報錯沒有顯示回滾導致DDL阻塞引發的問題

在業務開發過程中&#xff0c;顯示的開啟事務并且在事務處理過程中對不同的情況進行顯示的COMMIT或ROLLBACK&#xff0c;這是一個完整數據庫事務處理的閉環過程。 這種在應用開發邏輯層面去handle的事務執行的結果&#xff0c;既確保了事務操作的數據完整性&#xff0c;又遵循了…

簡單句語法

簡單句是指包含一個主語和一個謂語的句子&#xff0c;它表達一個完整的思想。簡單句是構成更復雜句子的基礎。 簡單句的兩種基本結構 簡單句可以分為兩種基本結構&#xff1a; 主謂結構: 描述主語所做的動作或行為&#xff0c;也就是 “做什么”。 主系結構: 描述主語的狀態…

Python2和Python3對utf8的實現方式有什么區別?

# -*- coding: utf8 -*- 是一個特殊的文件頭部注釋&#xff0c;通常出現在Python 2的源代碼文件的開頭。這個注釋告訴Python解釋器&#xff0c;該源文件使用的是UTF-8編碼。這對于包含非ASCII字符&#xff08;例如中文字符、特殊符號等&#xff09;的Python源代碼文件來說非常重…