首页 > 建站教程 > 前端框架 >  VUE限制只能输入数字和去除空格,亲测可行正文

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

我爱模板网在做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,'');"