VUE項(xiàng)目去除input 框值所有空格的操作方法

更新時(shí)間：2022年10月26日 10:05:25 作者：行動(dòng)很重要沖沖沖

這篇文章主要介紹了VUE項(xiàng)目去除input 框值所有空格的操作方法，主要包括去除空格的方法、正則和element ui寫法，本文給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

去除空格的方法

str.trim(); //去掉首尾空格
str.replace(" ",""); //去除所有空格，包括首尾、中間
str.replaceAll(" ", ""); //去掉所有空格，包括首尾、中間
str.replaceAll(" +","");  //去掉所有空格，包括首尾、中間
str.replaceAll("\\s*", ""); //可以替換大部分空白字符， 不限于空格

正則：

str.replace(/\s*/g,"")

str.replace(/\ +/g, "");    // 去除 空格
str.replace(/[\r\n]/g, "");    // 去除 換行符
str.trim(); // 去除 前后空格

element ui 寫法

username: [
      { required: true, message: '請(qǐng)輸入用戶名', transform: value => value ? value.trim() : '', trigger: 'blur' },
      { required: true, max: 10, message: '請(qǐng)輸入10位以內(nèi)字符', trigger: 'blur' }
    ],

一般如果是輸入框的話，直接禁用空格即可，我們已知的可能是直接調(diào)用trim方法即可，但是在使用element ui 時(shí)，可以直接在輸入框上設(shè)置trim，會(huì)比提交后再調(diào)用trim方法實(shí)用的多

<el-input v-model.trim="value"></el-input>

如上圖所示，直接在v-model上加trim輸入框就無法輸入空格了

當(dāng)然如果非要用正則方式去去除空格也是可以的

clearBlank(value){
    if(value){
        value = value.replace(/\s/g,"")
    }
    return value
}

VUE 項(xiàng)目去除 input 框值所有空格、vue 組件去除空格、input 去除空格

1.以下所有方法我都試過：不行。

str.trim(); //去掉首尾空格
str.replace(" ",""); //去除所有空格，包括首尾、中間
str.replaceAll(" ", ""); //去掉所有空格，包括首尾、中間
str.replaceAll(" +",""); ?//去掉所有空格，包括首尾、中間
str.replaceAll("\\s*", ""); //可以替換大部分空白字符， 不限于空格 ；

2. 改用正則：

str.replace(/\s*/g,"")

運(yùn)行成功，特別記錄下下。

--------------------------------- 我是傻傻的分隔線 -----------------------------------------

2019.5.9 補(bǔ)充：

str.replace(/\ +/g, ""); ? ?// 去除 空格
str.replace(/[\r\n]/g, ""); ? ?// 去除 換行符
str.trim(); // 去除 前后空格

到此這篇關(guān)于VUE 項(xiàng)目去除 input 框值所有空格的文章就介紹到這了,更多相關(guān)vue去除空格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

詳解如何更好的使用module vuex
這篇文章主要介紹了詳解如何更好的使用module vuex，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-03-03
使用jenkins一鍵打包發(fā)布vue項(xiàng)目的實(shí)現(xiàn)
這篇文章主要介紹了使用jenkins一鍵打包發(fā)布vue項(xiàng)目的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05
vue對(duì)象拷貝,解決由于引用賦值修改原對(duì)象的方式
這篇文章主要介紹了vue對(duì)象拷貝,解決由于引用賦值修改原對(duì)象的方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue項(xiàng)目首屏加載時(shí)間優(yōu)化實(shí)戰(zhàn)
單頁面應(yīng)用的一個(gè)問題就是首頁加載東西過多，加載時(shí)間過長(zhǎng)。特別在移動(dòng)端，單頁面應(yīng)用的首屏加載優(yōu)化更是繞不開的話題，這篇文章主要介紹了vue項(xiàng)目首屏加載時(shí)間優(yōu)化實(shí)戰(zhàn)，感興趣的小伙伴們可以參考一下
2019-04-04
vue-cli3打包時(shí)圖片壓縮處理方式
這篇文章主要介紹了vue-cli3打包時(shí)圖片壓縮處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
vue elementui el-table 表格里邊展示四分位圖效果(功能實(shí)現(xiàn))
這篇文章主要介紹了vue elementui el-table 表格里邊展示四分位圖效果(功能實(shí)現(xiàn)),本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-04-04
淺談vue中的data與_data的關(guān)系是什么
在Vue實(shí)例中,data屬性是用戶定義的用于存儲(chǔ)數(shù)據(jù)的對(duì)象,而_data是Vue內(nèi)部用于存儲(chǔ)數(shù)據(jù)的對(duì)象,本文主要介紹了淺談vue中的data與_data的關(guān)系是什么,感興趣的可以了解一下
2023-12-12
vue使用echarts如何實(shí)現(xiàn)雙柱狀圖和雙y軸的柱狀圖
這篇文章主要介紹了vue使用echarts如何實(shí)現(xiàn)雙柱狀圖和雙y軸的柱狀圖問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue虛擬滾動(dòng)/虛擬列表簡(jiǎn)單實(shí)現(xiàn)示例
本文主要介紹了vue虛擬滾動(dòng)/虛擬列表簡(jiǎn)單實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2025-01-01
M1 pro芯片啟動(dòng)Vue項(xiàng)目的方法步驟
本文主要介紹了M1 pro芯片啟動(dòng)Vue項(xiàng)目的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11