• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > vue教程,AngularJS教程 >  VUE限制只能输入数字正文

VUE限制只能输入数字和去除空格,亲测可行

作者:网页模板
类型:图文教程
点击次数:
发布时间:2019-02-19 14:40
分享到:
我爱模板网在做app时,客户要求比较严格,注册的时候,手机号只能输入数字。input的type为tel还是能够输入数字,百度了下,发现下面的方法可以:

限制只能输入数字:
1、使用@input方法和type=tel
<input type="tel" @input="handleInput($event)" v-model="phoneVal" />
2、利用正则替换
handleInput:function(e){
    this.phone = e.target.value.replace(/[^\d]/g,'');
},
去除空格:
1、使用keyup方法
<input type="text" @keyup="trim()" v-model="price" />
2、利用正则替换空格
trim(){
    this.price=this.price.replace(/[^\w]/g,'');
}
另外,下面的代码可能也有用处

1.可以输入汉字,空格自动回退
onkeyup="this.value=this.value.replace(/(^\s+)|(\s+$)/g,'');"
2.不可点击空格,汉字都不能打
onkeyup="this.value=this.value.replace(/[^\w]/g,'');"

(责任编辑:网页模板)
  • 本文标签:
  • vue教程
如何在直接引入vant的html文件中使用vant组件
vue-cli(vue脚手架)超详细教程