element必填校驗(yàn)輸入空格問題修改正則表達(dá)式、請(qǐng)求攔截器實(shí)現(xiàn)所有輸入框去除首尾空格(推薦)
一、element-ui,必填校驗(yàn)輸入空格是可以通過校驗(yàn)的?
我們可以看一下elemen-ui的源碼,
我們可以看到其實(shí)element-ui對(duì)應(yīng)el-form-item關(guān)于必填校驗(yàn)的部分是采用了rules,rules.length去進(jìn)行的校驗(yàn) 我們需要知道的是其實(shí)空格也同樣算是一個(gè)字符。同樣的空格那么肯定是會(huì)通過校驗(yàn)的,那么我們?nèi)绾稳?shí)現(xiàn)不讓其首尾輸入空格呢?
二、解決方案?v-model.trim修飾符?
當(dāng)然我們第一個(gè)想法想到的肯定是trim這個(gè)修飾符,首先我們可以看一下官網(wǎng)
我們可以試一試,當(dāng)input新增了trim后會(huì)出現(xiàn)怎樣的效果?
如果采用trim修飾符的話,確實(shí)可以實(shí)現(xiàn)功能,但是這個(gè)時(shí)候首尾都不能輸入空格就會(huì)導(dǎo)致一個(gè)問題,當(dāng)我們從左到右輸入文字的時(shí)候
例如
1111 2222
我如果想寫完1111立刻再輸入幾個(gè)空格再輸入2222,這個(gè)時(shí)候如果我們采用的是trim便會(huì)遇到不能輸入的問題,我們只能11112222輸入完成之后再去講鼠標(biāo)光標(biāo)放置在11112222中間部分輸入空格,這樣肯定是不利于我們輸入的。
三、采用pattern,手寫正則的方式實(shí)現(xiàn)功能功能。
我們只需要在我們對(duì)應(yīng)的rules數(shù)組對(duì)象校驗(yàn)中新增這樣一個(gè)正則寫法即可。
pattern: ‘[^ \x20]+’
完整寫法
loginRules: { username: [{ required: true, pattern: '[^ \x20]+', trigger: 'blur', message: '用戶名不能為空' }], password: [{ required: true, pattern: '[^ \x20]+', trigger: 'blur', message: '密碼不能為空' }], code: [{ required: true, pattern: '[^ \x20]+', trigger: 'change', message: '驗(yàn)證碼不能為空' }], },
四、請(qǐng)求攔截器過濾所有的請(qǐng)求參數(shù),對(duì)應(yīng)的參數(shù)首尾空格全部去掉。
當(dāng)然上方的功能保證的其實(shí)也只是校驗(yàn)項(xiàng) 在開頭部分輸入空格會(huì)觸發(fā)校驗(yàn),但是我們?cè)谀┪草斎肟崭竦臅r(shí)候,對(duì)應(yīng)的校驗(yàn)則不會(huì)再觸發(fā),這個(gè)時(shí)候我們則需要在進(jìn)行搭配,寫一個(gè)請(qǐng)求遞歸,實(shí)現(xiàn)所有請(qǐng)求參數(shù)的首尾去空格。
編寫遞歸函數(shù)放置到我們請(qǐng)求攔截器當(dāng)中
/** * @description: 2021-05-14 請(qǐng)求參數(shù)首尾去空格 * @param {*} data * @return {*} */ function isTrim(data) { // 首先需要判斷當(dāng)前的config中是否存在data值 if (data && data instanceof Object) { for (const key in data) { if (Object.hasOwnProperty.call(data, key)) { // 此處我們不要使用 let element = data[key] 注意 如果采用這種方式的話對(duì)應(yīng)trim改變的值和data[key]將不再會(huì)是一個(gè)同一個(gè)內(nèi)存地址 // 在需要判斷一下當(dāng)前數(shù)據(jù)是否是數(shù)組 if (Array.isArray(data[key])) { // 就將數(shù)組放進(jìn)去 data[key] = isTrim(data[key]) } else if (data[key] && data[key] instanceof Object) { // 如果對(duì)象里面套對(duì)象的話 data[key] = isTrim(data[key]) } else if (data[key] && Object.prototype.toString.call(data[key]) == '[object String]') { // 如果對(duì)象里面的數(shù)據(jù)是String的話那么就直接trim只對(duì)String進(jìn)行操作 data[key] = data[key].trim() } } } return data } else if (data && Object.prototype.toString.call(data) == '[object String]') { // 如果是字符串說明是JSON.parse需要轉(zhuǎn)換 let dataObj = JSON.parse(data) // 轉(zhuǎn)成對(duì)象之后在拋出去 dataObj = isTrim(dataObj) return JSON.stringify(dataObj) } else if (data && data instanceof Array) { // 如果是數(shù)組 那就forin一下 判斷里面的數(shù)據(jù)類型 for (const key in data) { if (Object.hasOwnProperty.call(data, key)) { if ((data && data instanceof Object) || (data && data instanceof Array)) { data[key] = isTrim(data[key]) } } } return data } }
在這邊我是用的是axios來實(shí)現(xiàn)ajax請(qǐng)求,找到我們的請(qǐng)求攔截器處:
遞歸完成后得到的便是字符串去除首尾空格的效果。
到此這篇關(guān)于element必填校驗(yàn) 輸入空格問題,修改正則表達(dá)式、請(qǐng)求攔截器,實(shí)現(xiàn)所有輸入框去除首尾空格的文章就介紹到這了,更多相關(guān)element必填校驗(yàn)輸入空格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue中Element-ui 輸入銀行賬號(hào)每四位加一個(gè)空格的實(shí)現(xiàn)代碼
- vue+element-ui中form輸入框無法輸入問題的解決方法
- 詳解Vue3.0中ElementPlus<input輸入框自動(dòng)獲取焦點(diǎn)>
- element input輸入框自動(dòng)獲取焦點(diǎn)的實(shí)現(xiàn)
- Vue ElementUI實(shí)現(xiàn):限制輸入框只能輸入正整數(shù)的問題
- Element Input輸入框的使用方法
- vue element-ui實(shí)現(xiàn)input輸入框金額數(shù)字添加千分位
- Vue?elementUI表單嵌套表格并對(duì)每行進(jìn)行校驗(yàn)詳解
- element表單驗(yàn)證如何清除校驗(yàn)提示語
- Vue Element校驗(yàn)validate的實(shí)例
相關(guān)文章
網(wǎng)頁中JS函數(shù)自動(dòng)執(zhí)行常用三種方法
這篇文章主要為大家詳細(xì)介紹了網(wǎng)頁中JS函數(shù)自動(dòng)執(zhí)行常用三種方法,感興趣的小伙伴們可以參考一下2016-03-03動(dòng)態(tài)加載dtree.js樹treeview(示例代碼)
本篇文章主要是對(duì)動(dòng)態(tài)加載dtree.js樹treeview的示例代碼進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12@ResponseBody 和 @RequestBody 注解的區(qū)別
這篇文章主要介紹了@ResponseBody 和 @RequestBody 注解的區(qū)別的相關(guān)資料,需要的朋友可以參考下2017-03-03Javascript單元測試框架QUnitjs詳細(xì)介紹
這篇文章主要介紹了Javascript單元測試框架QUnitjs詳細(xì)介紹,需要的朋友可以參考下2014-05-05Bootstrap警告(Alerts)的實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Bootstrap警告(Alerts)的實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03一文讓你徹底搞清楚javascript中的require、import與export
這篇文章主要給大家介紹了關(guān)于javascript中require、import與export的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)打擊大的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09優(yōu)化javascript的執(zhí)行效率一些方法總結(jié)
本文為大家介紹下優(yōu)化javascript的執(zhí)行效率一些方法,個(gè)人感覺還不錯(cuò),感興趣的朋友可以了解下2013-12-12深入理解JavaScript系列(46):代碼復(fù)用模式(推薦篇)詳解
這篇文章主要介紹了深入理解JavaScript系列(46):代碼復(fù)用模式(推薦篇)詳解,本文講解了原型繼承、復(fù)制所有屬性進(jìn)行繼承、混合(mix-in)、借用方法等模式,需要的朋友可以參考下2015-03-03