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去除空格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue脚手架的简单使用实例
这篇文章主要介绍了Vue脚手架的简单使用实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
vue中的Router基本配置命令实例详解
Vue的Router是一个用于实现页面跳转和路由管理的插件,它可以帮助我们根据不同的URL请求加载不同的组件,以及实现前端路由功能,本文给大家介绍vue中的Router基本配置命令,感兴趣的朋友跟随小编一起看看吧
2024-02-02
如何使用Vue+Element做个个人中心
我们在做了用户登录后,就会让用户跳转到个人中心,下面这篇文章主要给大家介绍了关于如何使用Vue+Element做个个人中心的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-06-06
Vue之beforeEach非登录不能访问的实现（代码亲测）
这篇文章主要介绍了Vue之beforeEach非登录不能访问的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07
策略模式实现 Vue 动态表单验证的方法
策略模式（Strategy Pattern）又称政策模式，其定义一系列的算法，把它们一个个封装起来，并且使它们可以互相替换。封装的策略算法一般是独立的，策略模式根据输入来调整采用哪个算法。这篇文章主要介绍了策略模式实现 Vue 动态表单验证,需要的朋友可以参考下
2019-09-09
ResizeObserver loop limit exceeded报错原因及解决方案
这篇文章主要给大家介绍了关于ResizeObserver loop limit exceeded报错原因及解决的相关资料,公司项目监听系统中发现一个高频错误ResizeObserver loop limit exceeded,而浏览器的console中却没有提示,需要的朋友可以参考下
2023-09-09
如何运行单个.vue文件问题
本文介绍了Vue的全局安装过程、查看版本、安装扩展等步骤,并提供了解决在.vue文件目录下运行报错的方法,涉及到的错误解决包括使用命令安装@vue/compiler-sfc和执行npm install命令安装依赖
2024-10-10
浅谈Vue数据响应
这篇文章主要介绍了浅谈Vue数据响应，Vue的数据响应主要是依赖了Object.defineProperty()，下面就具体来介绍一下如何实现数据响应
2018-11-11
Vue3中Element-Plus分页(Pagination)组件的使用
Element-Plus分页(Pagination)组件在开发过程中数据展示会经常使用到,同时分页功能也会添加到页面中,下面我们就来学习一下它的具体使用,需要的可以参考一下
2023-11-11
关于axios如何全局注册浅析
这篇文章主要给大家介绍了关于axios如何全局注册的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用axios具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2018-01-01