VUE—移动端手机号正则验证，不正确显示‘请输入正确手机号’，若正确跳转到发送验证码（图文详情）

最新推荐文章于 2023-08-09 17:35:00 发布

原创

最新推荐文章于 2023-08-09 17:35:00 发布 · 2.6k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue #手机号验证

VUE—移动端手机号正则验证，不正确显示‘请输入正确手机号’，若正确跳转到发送验证码

先看效果图在这里插入图片描述

第一步：写布局

<input type="text" placeholder="请输入手机号" v-model="phonenumber">
// 实时获取input框输入的手机号
 <p  v-if="!isShow">请输入正确的手机号</p>
 // 如果是true则显示，反之则消失
 <button @click="testFn" >  获取验证码 </button>
 // 调用testFn方法，用来验证输入的手机号是否正确

第二步：data中定义phonenumber用来实时获取input框输入的电话号

data () {
      return {
        phonenumber: ''，
        isShow： true
        // 初始值是true，因为v-if时是！isShow，是false不显示
      }
    },

第三步：methods写testFn方法

methods: {
      testFn () {
        let re = /^1(3|4|5|6|7|8|9)\d{9}$/
        // 正则，验证手机号输入是否正确
        let show = re.test(this.phonenumber)
        // 若正确返回true，反之false
        this.isShow = show