vue表單驗(yàn)證之禁止input輸入框輸入空格

更新時(shí)間：2020年12月03日 14:37:46 作者：鵬仔先生

這篇文章主要介紹了vue表單驗(yàn)證之禁止input輸入框輸入空格，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

測試小姐姐讓輸入框不允許輸入空格，安排。

剛開始用的下面這個(gè)方法，因?yàn)槲沂请娔X端f12的情況下調(diào)試移動(dòng)端，所以下面這個(gè)方法可以實(shí)現(xiàn)禁止輸入空格，于是就打包測試上線了，上線后才發(fā)現(xiàn)真機(jī)中不支持，應(yīng)該是pc端和移動(dòng)端事件不一樣，所以如果你是pc端，可以使用下面這個(gè)方法。

input上添加下方代碼（我用的vant也一樣,包括elemenui等）

@keydown.native="keydown($event)"

methods中寫入下方代碼

methods:{
  // 禁止輸入空格
  keydown(e){
		if(e.keyCode == 32){
			e.returnValue = false
		}
  }
}

最終使用的下面這個(gè)方法，移動(dòng)端和pc端都可以禁止輸入空格

input上添加下方代碼（我用的vant也一樣）

:onkeyup="visitUserName = visitUserName.replace(/\s+/g,'')"

最后分享一個(gè)小知識(shí)

使用 v-model.trim 可以實(shí)現(xiàn)去除輸入框的前后空格，中間內(nèi)容多個(gè)空格會(huì)保留一個(gè)

v-model.trim="visitUserName"

到此這篇關(guān)于vue表單驗(yàn)證之禁止input輸入框輸入空格的文章就介紹到這了,更多相關(guān)vue禁止input輸入框輸入空格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue中使用vue-plugin-hiprint插件進(jìn)行打印的功能實(shí)現(xiàn)
hiprint 是一個(gè)web 打印的js組件,無需安裝軟件,支持windows,macOS,linux 系統(tǒng),支持移動(dòng)端,PC端瀏覽器,angular,vue,react 等分頁預(yù)覽,打印,操作簡單,運(yùn)行快速,本文介紹了Vue中使用vue-plugin-hiprint插件進(jìn)行打印,需要的朋友可以參考下
2025-04-04
Vue3 如何使用CryptoJS加密
CryptoJS是一個(gè)強(qiáng)大的JavaScript庫,它提供了多種加密解密功能,尤其是AES加密方法,使用CryptoJS,我們可以有效地保護(hù)數(shù)據(jù)安全,防止信息泄露,通過簡單的安裝和函數(shù)編寫,本文給大家介紹Vue3 如何使用CryptoJS加密,感興趣的朋友一起看看吧
2024-10-10
Vue的事件響應(yīng)式進(jìn)度條組件實(shí)例詳解
這篇文章主要介紹了Vue的事件響應(yīng)式進(jìn)度條組件的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2018-02-02
一篇文章帶你了解vue路由
這篇文章主要為大家詳細(xì)介紹了vue的路由，路由的本質(zhì)就是一種對(duì)應(yīng)關(guān)系，比如說我們?cè)趗rl地址中輸入我們要訪問的url地址之后，瀏覽器要去請(qǐng)求這個(gè)url地址對(duì)應(yīng)的資源，本文具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
vue使用pdf-dist實(shí)現(xiàn)pdf預(yù)覽以及水印添加
這篇文章主要為大家詳細(xì)介紹了vue如何使用pdf-dist實(shí)現(xiàn)pdf預(yù)覽以及水印添加的功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-10-10
Vue+Spring Boot簡單用戶登錄(附Demo)
這篇文章主要介紹了Vue+Spring Boot簡單用戶登錄，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
tdesign vue初始化組件源碼解析
這篇文章主要為大家介紹了tdesign vue初始化組件源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
vue給組件傳遞不同的值方法
今天小編就為大家分享一篇vue給組件傳遞不同的值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue 按鍵修飾符處理事件的方法
這篇文章主要介紹了Vue 按鍵修飾符的相關(guān)資料，vue中新增按鍵修飾符和系統(tǒng)修飾符來處理類似的事件，具體內(nèi)容詳情大家參考下本文
2018-05-05
vue.config.js使用代理配置真實(shí)請(qǐng)求url方式
這篇文章主要介紹了vue.config.js使用代理配置真實(shí)請(qǐng)求url方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10