vue判断input输入内容全是空格

最新推荐文章于 2023-09-07 09:46:54 发布
最新推荐文章于 2023-09-07 09:46:54 发布
阅读量1.1w 收藏 8
点赞数 2
文章标签： vue input 空格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011222221/article/details/78768409
版权

比如input中的数据和data中的msg双向绑定。

那么我们可以  判断先把msg以空格拆分成数组，然后拼接起来，判断字符串的长度，如果长度为0，证明输入的就全是空格了，如下：

 msg.split(" ").join("").length = 0


明浩君Style
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
element-ui form 表单验证--输入空格问题
代码青春
12-29 4645
<el-form :rules="rules"> <el-form-item label="名称" prop="name"> <el-input size="small" v-model.trim="form.name" placeholder="请输入名称"></el-input> </el-form-item> </el-form> v-model.lazy 只有在input输入框发生blur事件时才触发 v-.
vue判断input输入内容全是空格的方法
08-27
下面小编就为大家分享一篇vue判断input输入内容全是空格的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Elment Form 非空校验（包含空字符串）
南乡人的博客
11-03 1251
全内容不可输入空格 使用自带的修饰符trim，对model内容进行修改 <el-input v-model.trim="form.name"></el-input> 通过焦点事件修改 这种方式，影响回车提交，并且@blur的form.name不能直接写成value(原因未知，理论上可以，有空填坑) <el-input v-model="form.name" @blur="form.name=$event.target.value.trim()"></el-inp
element-ui《input》输入框效验
weixin_73510682的博客
09-07 1452
element-ui《input》输入框效验
Input输入框过滤空格方法
热门推荐
lyclyc_的博客
04-29 1万+
前端中判断input输入框是否输入是否有空格，实现过滤输入前和输入后的空格， v-model.trim用于去掉输入框内首尾空格 如下绑定的时候加上 .trim 那么如果直接在开头输入空格，或者是在末尾输入空格，是不会显示有输入内容的， <el-input type="text" v-model.trim="test00" ></el-input> 如果判断Input输入框是否为空，不为空时再提交，可以用 If(this.inputData.trim().length !==0){
el-input输入校验不能为空格，不能输入全部为空的内容
鹤渺的星球
01-06 6797
输入框的校验太常见了，基本上常见的为：不能为空，不能输入空格，和不能输入全部为空的内容。这里对这个进行记录。
element UI表单验证中检验空格问题
m0_60067558的博客
12-23 1939
在项目中，校验el-input输入，可以自定义校验规则，但是不能校验校验空格，当输入空格回车后，不能校验有空格的情况 此时直接在输入框绑定的数加去.trim(去掉字符串首尾空格)好了，输入框会禁止输入空格。 vue+element ui+表单验证空格问题_阁楼下的宝宝的博客-CSDN博客_vue表单验证空格 以上为自定义的校验规则 ...
vue空格校验和特殊字符校验
qq_43610925的博客
08-13 6611
这个方法只可以校正输入框全是空格的情况，无法校正文字前中后的空格。这种方法可以校验输入框所有空格。
vue+elementUI 不验证input中输入空格问题
wjw_de_java的博客
02-26 1487
element中自带的表单必填项校验不能去除空格，此时若输入空格，required: true验证还是可以通过。若想正确校验需要去除字符两边的空格。在v-model加上.trim就可以解决。但v-model.trim只适应字符中间没有空格的情况，若字符中间需要空格就有问题 一、未加.trim（） <el-form :rules="rules"> <el-form-item label="姓名" prop="name"> <el-input size=
input输入框怎么判断是否输入或输入的是空格
小多的博客
12-31 4031
方法：把空格通过正则匹配替换为空字符串 // this.inputValue——input输入值 //----判断是否为空或者空格--- if (this.inputValue.replace(/(^\s*)|(\s*$)/g, "") == "") { console.log('未输入或者输入为空格') } else { console.log('输入：', this.inputValue) }; ...
vue表单验证之禁止input输入框输入空格
01-18
测试小姐姐让输入框不允许输入空格，安排。  刚开始用的下面这个方法，因为我是电脑端f12的情况下调试移动端，所以下面这个方法可以实现禁止输入空格，于是就打包测试上线了，上线后才发现真机中不支持，应该是pc端...
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
12-29
那么，在vue，element-ui 组件中，如何实现呢？ 二、效果图： 三、实现代码： 银行账号> <el-input type=text maxlength=23 v-model=scope.row.account placeholder=请输入银行账号 @change=validateNum...
vue中如何去掉空格的方法实现
11-30
vue中当用户提交表单时，有的数据需要去掉前后空格然后再向后端发送。 二、解决方法 首先可以使用v-model.trim这个v-model修饰符去解决它，但是当用户输入\u200B时，这个方法就不奏效了，这时我们可以去一下v-model...
计算机毕业设计-校园教务处管理系统.zip
04-23
计算机毕业设计中的校园教务处管理系统是一个旨在提高校园教务管理效率和质量的综合性信息平台。该系统采用SSM（Spring、SpringMVC、MyBatis）技术栈进行构建，利用Spring框架进行业务逻辑处理和依赖注入，通过SpringMVC实现模型-视图-控制器的设计模式，以及使用MyBatis作为ORM工具进行数据库持久化操作。系统功能涵盖了学生信息管理、课程安排、成绩录入与查询、教室资源分配、考试管理、教师工作量统计等关键模块，通过提供一个用户友好的界面和强大的后台管理功能，校园教务处管理系统不仅优化了教务工作流程，还提升了学生和教师的互动体验，是计算机专业学生展示其系统分析、设计和开发能力的理想项目。
一些关于创新创意类的电赛竞赛文档.zip
04-23
一些关于创新创意类的电赛竞赛文档
项目计划管理任务app应用界面xd源文件(1)AdobeXD源码下载设计素材UI设计.xd
最新发布
04-23
项目计划管理任务app应用界面xd源文件(1)AdobeXD源码下载设计素材UI设计
电子商务公共服务平台大数据中心HTML模板源码 大数据大屏展示源码 VUE.zip
04-23
电子商务公共服务平台大数据中心HTML模板源码 大数据大屏展示源码 VUE
suno AI专业教程：深入探索与实践
04-23
本资源是一份专为AI技术追求者量身定制的深度学习与suno AI实战教程，以精炼的内容和实战案例为核心，旨在帮助专业人士和学习者快速掌握suno AI的关键技术和应用。它适用于希望深化AI知识的研究学者、工程师、数据科学家以及充满热情的学生和独立研究者。通过本教程，学习者将能够作为教学辅助材料系统学习AI理论与实践，或在职业发展中通过持续学习提升专业技能。此外，本资源通过案例分析激发创新思维，指导学习者将suno AI技术应用于解决现实问题，同时提供额外的学习材料和工具，如在线模拟和代码示例，以支持深入学习和实践探索。内容丰富而不冗长，每个知识点都配有实例分析，确保学习者能够快速吸收和应用，定期更新以紧跟技术发展，是提升AI技术能力的理想选择。
中科创达部门技术大赛.zip
04-23
中科创达部门技术大赛
vue input 正则验证不能输入空格
09-04
在Vue中，我们可以通过给`<input>`标签的`v-model`绑定的属性使用正则表达式来限制用户输入的内容。如果我们希望输入框不能输入空格，我们可以在`<input>`标签上通过`@input`事件监听用户的输入，并且在该事件的处理函数中对输入的值进行正则验证。 首先，在Vue的模板中，我们需要一个`<input>`标签，并将它的值绑定到一个data中的属性上，以便在后续的处理函数中使用。 ```html <template> <input v-model="inputValue" @input="handleInput"> </template> ``` 接下来，在Vue的script部分，我们需要定义一个data属性`inputValue`，并且在`handleInput`方法中进行正则验证。判断用户输入的值是否包含了空格，如果包含空格，则将输入值修改为去掉空格的值。 ```javascript <script> export default { data() { return { inputValue: '', // 绑定的输入框的值 }; }, methods: { handleInput() { this.inputValue = this.inputValue.replace(/\s/g, ''); // 去掉输入值中的空格 }, }, }; </script> ``` 这样，当用户在输入框中输入或粘贴含有空格的内容时，空格会被自动去掉，达到了不能输入空格的效果。 注意，在上述示例代码中，我们使用了正则表达式`/\s/g`来匹配空格，其中`\s`表示匹配任意空白字符，`g`表示全局匹配。这样，当用户输入多个空格时，所有的空格都会被去除。 以上就是使用Vue实现输入框不能输入空格的方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值