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

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

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

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

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

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

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

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

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

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

1111 2222

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

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

我們只需要在我們對應的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ù)，對應的參數(shù)首尾空格全部去掉。

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

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

/**
 * @description: 2021-05-14 請求參數(shù)首尾去空格
 * @param {*} data
 * @return {*}
 */
function isTrim(data) {
  // 首先需要判斷當前的config中是否存在data值
  if (data && data instanceof Object) {
    for (const key in data) {
      if (Object.hasOwnProperty.call(data, key)) {
        // 此處我們不要使用   let element = data[key] 注意  如果采用這種方式的話對應trim改變的值和data[key]將不再會是一個同一個內(nèi)存地址
        // 在需要判斷一下當前數(shù)據(jù)是否是數(shù)組
        if (Array.isArray(data[key])) {
          // 就將數(shù)組放進去
          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進行操作
          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請求，找到我們的請求攔截器處：