手机号输入框过滤非数字

最新推荐文章于 2021-09-01 14:31:42 发布

原创最新推荐文章于 2021-09-01 14:31:42 发布 · 471 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

63 篇文章

订阅专栏

本文介绍如何在前端页面中添加手机号输入框，并通过Vue.js实现输入与失焦事件的绑定，进行手机号的实时验证和非法字符过滤。

添加手机号输入框，绑定事件

<input type="number" placeholder="请输入手机号" v-model="mobile" @keyup="filterTel" @blur="blurTel"/>

添加输入、失焦事件，过滤非法字符

methods中添加以下方法

//输入事件
filterTel: function () {
   this.mobile = this.mobile.replace(/[^\d]/g, '')
}
//失焦事件
blurTel: function () {
   this.filterTel();
   let regPhone = new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/)
   if(!regPhone.test(this.mobile)){
      console.log('请正确输入手机号')
   }
}