vue表单验证之禁止input输入框输入空格
更新时间：2020年12月03日 14:37:46 作者：鹏仔先生
这篇文章主要介绍了vue表单验证之禁止input输入框输入空格，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
测试小姐姐让输入框不允许输入空格，安排。
刚开始用的下面这个方法，因为我是电脑端f12的情况下调试移动端，所以下面这个方法可以实现禁止输入空格，于是就打包测试上线了，上线后才发现真机中不支持，应该是pc端和移动端事件不一样，所以如果你是pc端，可以使用下面这个方法。
input上添加下方代码（我用的vant也一样,包括elemenui等）
@keydown.native="keydown($event)"
methods中写入下方代码
methods:{
// 禁止输入空格
keydown(e){
if(e.keyCode == 32){
e.returnValue = false
}
}
}
最终使用的下面这个方法，移动端和pc端都可以禁止输入空格
input上添加下方代码（我用的vant也一样）
:onkeyup="visitUserName = visitUserName.replace(/\s+/g,'')"
最后分享一个小知识
使用 v-model.trim 可以实现去除输入框的前后空格，中间内容多个空格会保留一个
v-model.trim="visitUserName"
到此这篇关于vue表单验证之禁止input输入框输入空格的文章就介绍到这了,更多相关vue禁止input输入框输入空格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue.js是现在比较优秀的Web前端框架,非常推荐大家入门学习,这篇文章主要给大家介绍了关于如何一步步从零搭建一个Vue项目的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
大家应该都知道父组件可以向子组件通过属性形式传递参数,传递的参数也可以随时随意修改;但子组件不能修改父组件传递过来的参数,所以下面这篇文章主要给大家介绍了关于vue父子组件传值以及单向数据流问题的相关资料,需要的朋友可以参考下2021-09-09
这篇文章主要为大家详细介绍了如何基于Vue3自定义实现简单的图片翻转预览功能,文中的示例代码讲解详细,具有一定的学习价值,有需要的小伙伴可以参考一下2023-10-10
今天小编就为大家分享一篇vue在路由中验证token是否存在的简单实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
本文通过实例给大家介绍了Vue中使用webpack别名的方法,非常不错，具体一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
这篇文章主要介绍了Vue 事件处理操作,结合实例形式较为详细的分析了vue.js事件处理相关的事件监听、处理、修饰符等相关概念、用法及操作注意事项,需要的朋友可以参考下2019-03-03
跨域是指当一个资源去访问另一个不同域名或者同域名不同端口的资源时,就会发出跨域请求,下面这篇文章主要给大家介绍了关于vue使用vite配置跨域以及环境配置的相关资料,需要的朋友可以参考下2022-07-07
最近好几个vue项目都是用ivew作为UI框架,所以下面这篇文章主要给大家介绍了关于如何利用vue3 + threejs仿iView官网大波浪特效的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2021-12-12
详解Vue实战指南之依赖注入(provide/inject)
这篇文章主要介绍了详解Vue实战指南之依赖注入(provide/inject)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
elementUI给el-tabs/el-tab-pane添加图标效果实例
这篇文章主要给大家介绍了关于elementUI给el-tabs/el-tab-pane添加图标效果实例的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用elementUI具有一定的参考学习价值,需要的朋友可以参考下2023-07-07
最新评论