Element UI必填项校验空格处理与请求参数去空方案

作者:云间搭桥时间:2026-10-31 11:54:45浏览:469

针对Element UI中必填项校验允许首尾空格的问题,本文提供两种解决方案。首先通过修改rules中的pattern正则表达式限制输入;其次,在axios请求拦截器中编写递归函数,自动去除所有提交参数首尾的空格,确保数据纯净。

一、Element UI必填校验输入空格通过的问题

一、Element UI必填校验输入空格通过的问题

我们先来查看Element UI的源码实现。

一、Element UI必填校验输入空格通过的问题

从源码可以看出,Element UI中el-form-item的必填校验逻辑是基于rules数组及其长度进行的。这里需要明确一个概念:空格本身也被视为一个有效字符。因此,如果用户仅在输入框中输入空格,校验依然会通过。那么,如何禁止用户在首尾输入空格呢?

二、解决方案:使用v-model.trim修饰符

面对这个问题,最直观的想法可能是使用Vue提供的trim修饰符。我们可以参考官方文档的说明。

一、Element UI必填校验输入空格通过的问题

让我们尝试在input元素上添加trim修饰符,观察其实际效果。

一、Element UI必填校验输入空格通过的问题

如果采用trim修饰符,虽然能实现基本功能,但会引发一个交互问题:首尾均无法输入空格。这会导致用户在从左向右输入文字时,例如输入

1111 2222

如果我想在输入完1111后,立即输入几个空格,接着再输入2222,此时若使用了trim修饰符,中间的空格将被自动去除,导致无法直接输入。用户只能先输入11112222,然后将鼠标光标移动到中间位置才能输入空格,这种体验显然不利于用户操作。

三、采用pattern正则表达式实现功能

我们只需要在对应的rules数组对象校验规则中,新增一个正则表达式即可解决这个问题。

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: '验证码不能为空' }],
      },

四、请求拦截器过滤所有请求参数,去除首尾空格

上述方法仅保证了在校验阶段,开头输入空格会触发校验错误。然而,当用户在末尾输入空格时,校验可能不会再次触发,或者数据已提交。因此,我们需要配合编写一个递归函数,在请求拦截器中实现所有提交参数首尾空格的自动去除。

我们将这个递归函数放置在请求拦截器中。

/**
 * @description: 2021-05-14 请求参数首尾去空格
 * @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]将不再会是一个同一个内存地址
        // 在需要判断一下当前数据是否是数组
        if (Array.isArray(data[key])) {
          // 就将数组放进去
          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]') {
          // 如果对象里面的数据是String的话那么就直接trim只对String进行操作
          data[key] = data[key].trim()
        }
      }
    }
    return data
  } else if (data && Object.prototype.toString.call(data) == '[object String]') {
    // 如果是字符串说明是JSON.parse需要转换
    let dataObj = JSON.parse(data)
    // 转成对象之后在抛出去
    dataObj = isTrim(dataObj)
    return JSON.stringify(dataObj)
  } else if (data && data instanceof Array) {
    // 如果是数组  那就forin一下  判断里面的数据类型
    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来实现Ajax请求,找到请求拦截器的配置位置:

一、Element UI必填校验输入空格通过的问题

递归处理完成后,即可得到字符串去除首尾空格的效果。

一、Element UI必填校验输入空格通过的问题

到此,关于Element UI必填校验中处理输入空格的问题,通过修改正则表达式以及利用请求拦截器实现所有输入框首尾去空的文章就介绍到这了,更多相关Element UI必填校验输入空格内容请搜索本站以前的文章或继续浏览下面的相关文章,希望大家以后多多支持本站!

作者最新文章