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

element必填校驗(yàn)輸入空格問題修改正則表達(dá)式、請(qǐng)求攔截器實(shí)現(xiàn)所有輸入框去除首尾空格(推薦)

 更新時(shí)間:2024年02月22日 09:56:57   作者:歸來巨星  
這篇文章主要介紹了element必填校驗(yàn)輸入空格問題修改正則表達(dá)式、請(qǐng)求攔截器實(shí)現(xiàn)所有輸入框去除首尾空格,本文通過圖文實(shí)例代碼相結(jié)合給大家講解的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

一、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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論