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"
到此這篇關于vue表單驗證之禁止input輸入框輸入空格的文章就介紹到這了,更多相關vue禁止input輸入框輸入空格內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue.js是現(xiàn)在比較優(yōu)秀的Web前端框架,非常推薦大家入門學習,這篇文章主要給大家介紹了關于如何一步步從零搭建一個Vue項目的相關資料,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
大家應該都知道父組件可以向子組件通過屬性形式傳遞參數(shù),傳遞的參數(shù)也可以隨時隨意修改;但子組件不能修改父組件傳遞過來的參數(shù),所以下面這篇文章主要給大家介紹了關于vue父子組件傳值以及單向數(shù)據(jù)流問題的相關資料,需要的朋友可以參考下2021-09-09
基于Vue3自定義實現(xiàn)圖片翻轉(zhuǎn)預覽功能
這篇文章主要為大家詳細介紹了如何基于Vue3自定義實現(xiàn)簡單的圖片翻轉(zhuǎn)預覽功能,文中的示例代碼講解詳細,具有一定的學習價值,有需要的小伙伴可以參考一下2023-10-10
今天小編就為大家分享一篇vue在路由中驗證token是否存在的簡單實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
本文通過實例給大家介紹了Vue中使用webpack別名的方法,非常不錯，具體一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了Vue 事件處理操作,結合實例形式較為詳細的分析了vue.js事件處理相關的事件監(jiān)聽、處理、修飾符等相關概念、用法及操作注意事項,需要的朋友可以參考下2019-03-03
跨域是指當一個資源去訪問另一個不同域名或者同域名不同端口的資源時,就會發(fā)出跨域請求,下面這篇文章主要給大家介紹了關于vue使用vite配置跨域以及環(huán)境配置的相關資料,需要的朋友可以參考下2022-07-07
利用vue3+threejs仿iView官網(wǎng)大波浪特效實例
最近好幾個vue項目都是用ivew作為UI框架,所以下面這篇文章主要給大家介紹了關于如何利用vue3?+?threejs仿iView官網(wǎng)大波浪特效的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2021-12-12
詳解Vue實戰(zhàn)指南之依賴注入(provide/inject)
這篇文章主要介紹了詳解Vue實戰(zhàn)指南之依賴注入(provide/inject)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
elementUI給el-tabs/el-tab-pane添加圖標效果實例
這篇文章主要給大家介紹了關于elementUI給el-tabs/el-tab-pane添加圖標效果實例的相關資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用elementUI具有一定的參考學習價值,需要的朋友可以參考下2023-07-07