快捷導(dǎo)航

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

更新時間：2024年02月22日 09:56:57 作者：歸來巨星

這篇文章主要介紹了element必填校驗輸入空格問題修改正則表達(dá)式、請求攔截器實現(xiàn)所有輸入框去除首尾空格,本文通過圖文實例代碼相結(jié)合給大家講解的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

一、element-ui,必填校驗輸入空格是可以通過校驗的？

我們可以看一下elemen-ui的源碼，

我們可以看到其實element-ui對應(yīng)el-form-item關(guān)于必填校驗的部分是采用了rules,rules.length去進(jìn)行的校驗我們需要知道的是其實空格也同樣算是一個字符。同樣的空格那么肯定是會通過校驗的，那么我們?nèi)绾稳崿F(xiàn)不讓其首尾輸入空格呢？

二、解決方案?v-model.trim修飾符?

當(dāng)然我們第一個想法想到的肯定是trim這個修飾符，首先我們可以看一下官網(wǎng)

我們可以試一試，當(dāng)input新增了trim后會出現(xiàn)怎樣的效果?

如果采用trim修飾符的話，確實可以實現(xiàn)功能，但是這個時候首尾都不能輸入空格就會導(dǎo)致一個問題，當(dāng)我們從左到右輸入文字的時候
例如

1111 2222

我如果想寫完1111立刻再輸入幾個空格再輸入2222，這個時候如果我們采用的是trim便會遇到不能輸入的問題，我們只能11112222輸入完成之后再去講鼠標(biāo)光標(biāo)放置在11112222中間部分輸入空格，這樣肯定是不利于我們輸入的。

三、采用pattern，手寫正則的方式實現(xiàn)功能功能。

我們只需要在我們對應(yīng)的rules數(shù)組對象校驗中新增這樣一個正則寫法即可。

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: '驗證碼不能為空' }],
      },

四、請求攔截器過濾所有的請求參數(shù)，對應(yīng)的參數(shù)首尾空格全部去掉。

當(dāng)然上方的功能保證的其實也只是校驗項在開頭部分輸入空格會觸發(fā)校驗，但是我們在末尾輸入空格的時候，對應(yīng)的校驗則不會再觸發(fā)，這個時候我們則需要在進(jìn)行搭配，寫一個請求遞歸，實現(xiàn)所有請求參數(shù)的首尾去空格。

編寫遞歸函數(shù)放置到我們請求攔截器當(dāng)中

/**
 * @description: 2021-05-14 請求參數(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] 注意  如果采用這種方式的話對應(yīng)trim改變的值和data[key]將不再會是一個同一個內(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) {
          // 如果對象里面套對象的話
          data[key] = isTrim(data[key])
        } else if (data[key] && Object.prototype.toString.call(data[key]) == '[object String]') {
          // 如果對象里面的數(shù)據(jù)是String的話那么就直接trim只對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)成對象之后在拋出去
    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來實現(xiàn)ajax請求，找到我們的請求攔截器處：

遞歸完成后得到的便是字符串去除首尾空格的效果。

到此這篇關(guān)于element必填校驗輸入空格問題，修改正則表達(dá)式、請求攔截器，實現(xiàn)所有輸入框去除首尾空格的文章就介紹到這了,更多相關(guān)element必填校驗輸入空格內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: