vue表單驗(yàn)證之禁止input輸入框輸入空格
測(cè)試小姐姐讓輸入框不允許輸入空格，安排。
剛開(kāi)始用的下面這個(gè)方法，因?yàn)槲沂请娔X端f12的情況下調(diào)試移動(dòng)端，所以下面這個(gè)方法可以實(shí)現(xiàn)禁止輸入空格，于是就打包測(cè)試上線了，上線后才發(fā)現(xiàn)真機(jī)中不支持，應(yīng)該是pc端和移動(dòng)端事件不一樣，所以如果你是pc端，可以使用下面這個(gè)方法。
input上添加下方代碼（我用的vant也一樣,包括elemenui等）
@keydown.native="keydown($event)"
methods中寫(xiě)入下方代碼
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)文章希望大家以后多多支持腳本之家！
- Vue IP地址輸入框?qū)嵗a
- vue項(xiàng)目移動(dòng)端實(shí)現(xiàn)ip輸入框問(wèn)題
- Vue使用antd中input組件去驗(yàn)證輸入框輸入內(nèi)容(rules?案例)
- vue實(shí)現(xiàn)一個(gè)6個(gè)輸入框的驗(yàn)證碼輸入組件功能的實(shí)例代碼
- vue實(shí)現(xiàn)短信驗(yàn)證碼輸入框
- element vue validate驗(yàn)證名稱(chēng)重復(fù) 輸入框與后臺(tái)重復(fù)驗(yàn)證 特殊字符 字符長(zhǎng)度 及注意事項(xiàng)小結(jié)【實(shí)例代碼】
- vue中使用iview自定義驗(yàn)證關(guān)鍵詞輸入框問(wèn)題及解決方法
- vue實(shí)現(xiàn)驗(yàn)證碼輸入框組件
- Vue輸入框?qū)崟r(shí)驗(yàn)證IP地址合法性并在下方進(jìn)行提示功能實(shí)現(xiàn)
相關(guān)文章
Vue.js是現(xiàn)在比較優(yōu)秀的Web前端框架,非常推薦大家入門(mén)學(xué)習(xí),這篇文章主要給大家介紹了關(guān)于如何一步步從零搭建一個(gè)Vue項(xiàng)目的相關(guān)資料,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
vue父子組件傳值以及單向數(shù)據(jù)流問(wèn)題詳解
大家應(yīng)該都知道父組件可以向子組件通過(guò)屬性形式傳遞參數(shù),傳遞的參數(shù)也可以隨時(shí)隨意修改;但子組件不能修改父組件傳遞過(guò)來(lái)的參數(shù),所以下面這篇文章主要給大家介紹了關(guān)于vue父子組件傳值以及單向數(shù)據(jù)流問(wèn)題的相關(guān)資料,需要的朋友可以參考下2021-09-09
基于Vue3自定義實(shí)現(xiàn)圖片翻轉(zhuǎn)預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了如何基于Vue3自定義實(shí)現(xiàn)簡(jiǎn)單的圖片翻轉(zhuǎn)預(yù)覽功能,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,有需要的小伙伴可以參考一下2023-10-10
vue在路由中驗(yàn)證token是否存在的簡(jiǎn)單實(shí)現(xiàn)
今天小編就為大家分享一篇vue在路由中驗(yàn)證token是否存在的簡(jiǎn)單實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
本文通過(guò)實(shí)例給大家介紹了Vue中使用webpack別名的方法,非常不錯(cuò)，具體一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了Vue 事件處理操作,結(jié)合實(shí)例形式較為詳細(xì)的分析了vue.js事件處理相關(guān)的事件監(jiān)聽(tīng)、處理、修飾符等相關(guān)概念、用法及操作注意事項(xiàng),需要的朋友可以參考下2019-03-03
跨域是指當(dāng)一個(gè)資源去訪問(wèn)另一個(gè)不同域名或者同域名不同端口的資源時(shí),就會(huì)發(fā)出跨域請(qǐng)求,下面這篇文章主要給大家介紹了關(guān)于vue使用vite配置跨域以及環(huán)境配置的相關(guān)資料,需要的朋友可以參考下2022-07-07
利用vue3+threejs仿iView官網(wǎng)大波浪特效實(shí)例
最近好幾個(gè)vue項(xiàng)目都是用ivew作為UI框架,所以下面這篇文章主要給大家介紹了關(guān)于如何利用vue3?+?threejs仿iView官網(wǎng)大波浪特效的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-12-12
詳解Vue實(shí)戰(zhàn)指南之依賴(lài)注入(provide/inject)
這篇文章主要介紹了詳解Vue實(shí)戰(zhàn)指南之依賴(lài)注入(provide/inject)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
elementUI給el-tabs/el-tab-pane添加圖標(biāo)效果實(shí)例
這篇文章主要給大家介紹了關(guān)于elementUI給el-tabs/el-tab-pane添加圖標(biāo)效果實(shí)例的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用elementUI具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07