欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2020年12月03日 14:37:46   作者：鵬仔先生  
這篇文章主要介紹了vue表單驗(yàn)證之禁止input輸入框輸入空格，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

剛開始用的下面這個方法，因?yàn)槲沂请娔X端f12的情況下調(diào)試移動端，所以下面這個方法可以實(shí)現(xiàn)禁止輸入空格，于是就打包測試上線了，上線后才發(fā)現(xiàn)真機(jī)中不支持，應(yīng)該是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 可以實(shí)現(xiàn)去除輸入框的前后空格，中間內(nèi)容多個空格會保留一個

v-model.trim="visitUserName"

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

相關(guān)文章

  • 帶你一步步從零搭建一個Vue項(xiàng)目

    帶你一步步從零搭建一個Vue項(xiàng)目

    Vue.js是現(xiàn)在比較優(yōu)秀的Web前端框架,非常推薦大家入門學(xué)習(xí),這篇文章主要給大家介紹了關(guān)于如何一步步從零搭建一個Vue項(xiàng)目的相關(guān)資料,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-05-05
  • vue父子組件傳值以及單向數(shù)據(jù)流問題詳解

    vue父子組件傳值以及單向數(shù)據(jù)流問題詳解

    大家應(yīng)該都知道父組件可以向子組件通過屬性形式傳遞參數(shù),傳遞的參數(shù)也可以隨時隨意修改;但子組件不能修改父組件傳遞過來的參數(shù),所以下面這篇文章主要給大家介紹了關(guān)于vue父子組件傳值以及單向數(shù)據(jù)流問題的相關(guān)資料,需要的朋友可以參考下
    2021-09-09
  • 基于Vue3自定義實(shí)現(xiàn)圖片翻轉(zhuǎn)預(yù)覽功能

    基于Vue3自定義實(shí)現(xiàn)圖片翻轉(zhuǎn)預(yù)覽功能

    這篇文章主要為大家詳細(xì)介紹了如何基于Vue3自定義實(shí)現(xiàn)簡單的圖片翻轉(zhuǎn)預(yù)覽功能,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價值,有需要的小伙伴可以參考一下
    2023-10-10
  • vue在路由中驗(yàn)證token是否存在的簡單實(shí)現(xiàn)

    vue在路由中驗(yàn)證token是否存在的簡單實(shí)現(xiàn)

    今天小編就為大家分享一篇vue在路由中驗(yàn)證token是否存在的簡單實(shí)現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • Vue中使用webpack別名的方法實(shí)例詳解

    Vue中使用webpack別名的方法實(shí)例詳解

    本文通過實(shí)例給大家介紹了Vue中使用webpack別名的方法,非常不錯，具體一定的參考借鑒價值，需要的朋友可以參考下
    2018-06-06
  • Vue 事件處理操作實(shí)例詳解

    Vue 事件處理操作實(shí)例詳解

    這篇文章主要介紹了Vue 事件處理操作,結(jié)合實(shí)例形式較為詳細(xì)的分析了vue.js事件處理相關(guān)的事件監(jiān)聽、處理、修飾符等相關(guān)概念、用法及操作注意事項(xiàng),需要的朋友可以參考下
    2019-03-03
  • vue使用vite配置跨域以及環(huán)境配置詳解

    vue使用vite配置跨域以及環(huán)境配置詳解

    跨域是指當(dāng)一個資源去訪問另一個不同域名或者同域名不同端口的資源時,就會發(fā)出跨域請求,下面這篇文章主要給大家介紹了關(guān)于vue使用vite配置跨域以及環(huán)境配置的相關(guān)資料,需要的朋友可以參考下
    2022-07-07
  • 利用vue3+threejs仿iView官網(wǎng)大波浪特效實(shí)例

    利用vue3+threejs仿iView官網(wǎng)大波浪特效實(shí)例

    最近好幾個vue項(xiàng)目都是用ivew作為UI框架,所以下面這篇文章主要給大家介紹了關(guān)于如何利用vue3?+?threejs仿iView官網(wǎng)大波浪特效的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2021-12-12
  • 詳解Vue實(shí)戰(zhàn)指南之依賴注入(provide/inject)

    詳解Vue實(shí)戰(zhàn)指南之依賴注入(provide/inject)

    這篇文章主要介紹了詳解Vue實(shí)戰(zhàn)指南之依賴注入(provide/inject)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • elementUI給el-tabs/el-tab-pane添加圖標(biāo)效果實(shí)例

    elementUI給el-tabs/el-tab-pane添加圖標(biāo)效果實(shí)例

    這篇文章主要給大家介紹了關(guān)于elementUI給el-tabs/el-tab-pane添加圖標(biāo)效果實(shí)例的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用elementUI具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2023-07-07

最新評論