vue表單驗證之禁止input輸入框輸入空格
更新時間：2020年12月03日 14:37:46 作者：鵬仔先生
這篇文章主要介紹了vue表單驗證之禁止input輸入框輸入空格，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
測試小姐姐讓輸入框不允許輸入空格，安排。
剛開始用的下面這個方法，因為我是電腦端f12的情況下調(diào)試移動端，所以下面這個方法可以實現(xiàn)禁止輸入空格，于是就打包測試上線了，上線后才發(fā)現(xiàn)真機中不支持，應該是pc端和移動端事件不一樣，所以如果你是pc端，可以使用下面這個方法。
input上添加下方代碼（我用的vant也一樣,包括elemenui等）
@keydown.native="keydown($event)"
methods中寫入下方代碼
methods:{
// 禁止輸入空格
keydown(e){
if(e.keyCode == 32){
e.returnValue = false
}
}
}
最終使用的下面這個方法，移動端和pc端都可以禁止輸入空格
input上添加下方代碼（我用的vant也一樣）
:onkeyup="visitUserName = visitUserName.replace(/\s+/g,'')"
最后分享一個小知識
使用 v-model.trim 可以實現(xiàn)去除輸入框的前后空格，中間內(nèi)容多個空格會保留一個
v-model.trim="visitUserName"
到此這篇關(guān)于vue表單驗證之禁止input輸入框輸入空格的文章就介紹到這了,更多相關(guān)vue禁止input輸入框輸入空格內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
Vue中使用vue-plugin-hiprint插件進行打印的功能實現(xiàn)
hiprint 是一個web 打印的js組件,無需安裝軟件,支持windows,macOS,linux 系統(tǒng),支持移動端,PC端瀏覽器,angular,vue,react 等 分頁預覽,打印,操作簡單,運行快速,本文介紹了Vue中使用vue-plugin-hiprint插件進行打印,需要的朋友可以參考下2025-04-04
CryptoJS是一個強大的JavaScript庫,它提供了多種加密解密功能,尤其是AES加密方法,使用CryptoJS,我們可以有效地保護數(shù)據(jù)安全,防止信息泄露,通過簡單的安裝和函數(shù)編寫,本文給大家介紹Vue3 如何使用CryptoJS加密,感興趣的朋友一起看看吧2024-10-10
這篇文章主要介紹了Vue的事件響應式進度條組件的實例代碼，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-02-02
這篇文章主要為大家詳細介紹了vue的路由，路由的本質(zhì)就是一種對應關(guān)系，比如說我們在url地址中輸入我們要訪問的url地址之后，瀏覽器要去請求這個url地址對應的資源，本文具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
vue使用pdf-dist實現(xiàn)pdf預覽以及水印添加
這篇文章主要為大家詳細介紹了vue如何使用pdf-dist實現(xiàn)pdf預覽以及水印添加的功能，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下2023-10-10
這篇文章主要介紹了Vue+Spring Boot簡單用戶登錄，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
這篇文章主要為大家介紹了tdesign vue初始化組件源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
今天小編就為大家分享一篇vue給組件傳遞不同的值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue 按鍵修飾符的相關(guān)資料，vue中新增按鍵修飾符和系統(tǒng)修飾符來處理類似的事件，具體內(nèi)容詳情大家參考下本文2018-05-05
這篇文章主要介紹了vue.config.js使用代理配置真實請求url方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10