element必填校验输入空格问题修改正则表达式、请求拦截器实现所有输入框去除首尾空格(推荐)

 更新时间:2024年02月22日 09:56:57   作者:归来巨星  
这篇文章主要介绍了element必填校验输入空格问题修改正则表达式、请求拦截器实现所有输入框去除首尾空格,本文通过图文实例代码相结合给大家讲解的非常详细,感兴趣的朋友跟随小编一起看看吧

一、element-ui,必填校验输入空格是可以通过校验的?

我们可以看一下elemen-ui的源码,

我们可以看到其实element-ui对应el-form-item关于必填校验的部分是采用了rules,rules.length去进行的校验 我们需要知道的是其实空格也同样算是一个字符。同样的空格那么肯定是会通过校验的,那么我们如何去实现不让其首尾输入空格呢?

二、解决方案?v-model.trim修饰符?

当然我们第一个想法想到的肯定是trim这个修饰符,首先我们可以看一下官网

我们可以试一试,当input新增了trim后会出现怎样的效果?

如果采用trim修饰符的话,确实可以实现功能,但是这个时候首尾都不能输入空格就会导致一个问题,当我们从左到右输入文字的时候
例如

1111 2222

我如果想写完1111立刻再输入几个空格再输入2222,这个时候如果我们采用的是trim便会遇到不能输入的问题,我们只能11112222输入完成之后再去讲鼠标光标放置在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必填校验 输入空格问题,修改正则表达式、请求拦截器,实现所有输入框去除首尾空格的文章就介绍到这了,更多相关element必填校验输入空格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • uni-app PC端宽屏适配方案图文详解

    uni-app PC端宽屏适配方案图文详解

    现在uni-app终于官方支持PC宽屏,下面这篇文章主要给大家介绍了关于uni-app PC端宽屏适配方案的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • jsPDF导出pdf示例

    jsPDF导出pdf示例

    这篇文章主要介绍了jsPDF如何导出pdf,不过其貌似不支持中文,需要的朋友可以参考下
    2014-05-05
  • 简体中文转换繁体中文(实现代码)

    简体中文转换繁体中文(实现代码)

    本篇文章主要是对简体中文转换繁体中文的实现代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • JS原型和原型链原理与用法实例详解

    JS原型和原型链原理与用法实例详解

    这篇文章主要介绍了JS原型和原型链原理与用法,结合实例形式详细分析了js原型和原型链概念、原理、使用方法及相关操作注意事项,需要的朋友可以参考下
    2020-02-02
  • JavaScript正则表达式校验与递归函数实际应用实例解析

    JavaScript正则表达式校验与递归函数实际应用实例解析

    这篇文章主要介绍了JavaScript正则表达式校验与递归函数实际应用,需要的朋友可以参考下
    2017-08-08
  • js实现搜索栏效果

    js实现搜索栏效果

    这篇文章主要为大家详细介绍了js实现搜索栏效果,以及焦点问题的解决,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • Jsonp post 跨域方案

    Jsonp post 跨域方案

    本文给大家讲述的是个人在一个项目中遇到的关于jsonp的post跨域问题的解决过程,这里记录下来,分项给大家。
    2015-07-07
  • JS实现鼠标点击展开或隐藏表格行的方法

    JS实现鼠标点击展开或隐藏表格行的方法

    这篇文章主要介绍了JS实现鼠标点击展开或隐藏表格行的方法,实例分析了javascript操作table表格与css样式的技巧,需要的朋友可以参考下
    2015-03-03
  • js正则表达式之前瞻后顾与非捕获分组

    js正则表达式之前瞻后顾与非捕获分组

    话说自从学前端以来听到过多次这样的"笑话",程序员分为会正则的和不会正则的,可见正则的重要性,这篇文章主要给大家介绍了关于js正则表达式之前瞻后顾与非捕获分组的相关资料,需要的朋友可以参考下
    2021-10-10
  • 微信JS接口大全

    微信JS接口大全

    这篇文章主要为大家分享了最全面详细的微信JS接口大全,希望对大家有帮助,感兴趣的小伙伴们可以参考一下
    2016-08-08

最新评论