VUE项目去除input 框值所有空格的操作方法

 更新时间:2022年10月26日 10:05:25   作者:行动很重要冲冲冲  
这篇文章主要介绍了VUE项目去除input 框值所有空格的操作方法,主要包括去除空格的方法、正则和element ui写法,本文给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

去除空格的方法

str.trim(); //去掉首尾空格
str.replace(" ",""); //去除所有空格,包括首尾、中间
str.replaceAll(" ", ""); //去掉所有空格,包括首尾、中间
str.replaceAll(" +","");  //去掉所有空格,包括首尾、中间
str.replaceAll("\\s*", ""); //可以替换大部分空白字符, 不限于空格 

正则:

str.replace(/\s*/g,"")
str.replace(/\ +/g, "");    // 去除 空格
str.replace(/[\r\n]/g, "");    // 去除 换行符
str.trim(); // 去除 前后空格

element ui 写法

username: [
      { required: true, message: '请输入用户名', transform: value => value ? value.trim() : '', trigger: 'blur' },
      { required: true, max: 10, message: '请输入10位以内字符', trigger: 'blur' }
    ],

一般如果是输入框的话,直接禁用空格即可,我们已知的可能是直接调用trim方法即可,但是在使用element ui 时,可以直接在输入框上设置trim,会比提交后再调用trim方法实用的多

<el-input v-model.trim="value"></el-input>

如上图所示,直接在v-model上加trim输入框就无法输入空格了

当然如果非要用正则方式去去除空格也是可以的

clearBlank(value){
    if(value){
        value = value.replace(/\s/g,"")
    }
    return value
}

VUE 项目 去除 input 框值 所有空格、vue 组件去除空格、input 去除空格

1.以下所有方法 我都试过:不行。

str.trim(); //去掉首尾空格
str.replace(" ",""); //去除所有空格,包括首尾、中间
str.replaceAll(" ", ""); //去掉所有空格,包括首尾、中间
str.replaceAll(" +","");  //去掉所有空格,包括首尾、中间
str.replaceAll("\\s*", ""); //可以替换大部分空白字符, 不限于空格 ;

2. 改用正则: 

str.replace(/\s*/g,"")

运行成功,特别记录下下。 

--------------------------------- 我是傻傻的分隔线 -----------------------------------------

2019.5.9 补充:

str.replace(/\ +/g, "");    // 去除 空格
str.replace(/[\r\n]/g, "");    // 去除 换行符
str.trim(); // 去除 前后空格

到此这篇关于VUE 项目去除 input 框值所有空格的文章就介绍到这了,更多相关vue去除空格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解如何更好的使用module vuex

    详解如何更好的使用module vuex

    这篇文章主要介绍了详解如何更好的使用module vuex,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • 使用jenkins一键打包发布vue项目的实现

    使用jenkins一键打包发布vue项目的实现

    这篇文章主要介绍了使用jenkins一键打包发布vue项目的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • vue对象拷贝,解决由于引用赋值修改原对象的方式

    vue对象拷贝,解决由于引用赋值修改原对象的方式

    这篇文章主要介绍了vue对象拷贝,解决由于引用赋值修改原对象的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue项目首屏加载时间优化实战

    vue项目首屏加载时间优化实战

    单页面应用的一个问题就是首页加载东西过多,加载时间过长。特别在移动端,单页面应用的首屏加载优化更是绕不开的话题,这篇文章主要介绍了vue项目首屏加载时间优化实战,感兴趣的小伙伴们可以参考一下
    2019-04-04
  • vue-cli3打包时图片压缩处理方式

    vue-cli3打包时图片压缩处理方式

    这篇文章主要介绍了vue-cli3打包时图片压缩处理方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • vue elementui el-table 表格里边展示四分位图效果(功能实现)

    vue elementui el-table 表格里边展示四分位图效果(功能实现)

    这篇文章主要介绍了vue elementui el-table 表格里边展示四分位图效果(功能实现),本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-04-04
  • 浅谈vue中的data与_data的关系是什么

    浅谈vue中的data与_data的关系是什么

    在Vue实例中,data属性是用户定义的用于存储数据的对象,而_data是Vue内部用于存储数据的对象,本文主要介绍了浅谈vue中的data与_data的关系是什么,感兴趣的可以了解一下
    2023-12-12
  • vue使用echarts如何实现双柱状图和双y轴的柱状图

    vue使用echarts如何实现双柱状图和双y轴的柱状图

    这篇文章主要介绍了vue使用echarts如何实现双柱状图和双y轴的柱状图问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue虚拟滚动/虚拟列表简单实现示例

    vue虚拟滚动/虚拟列表简单实现示例

    本文主要介绍了vue虚拟滚动/虚拟列表简单实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-01-01
  • M1 pro芯片启动Vue项目的方法步骤

    M1 pro芯片启动Vue项目的方法步骤

    本文主要介绍了M1 pro芯片启动Vue项目的方法步骤,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11

最新评论