vue 之手机号验证、正则验证手机号是否正确、手机号验证码信息弹窗

最新推荐文章于 2025-05-26 10:31:21 发布
原创 最新推荐文章于 2025-05-26 10:31:21 发布 · 1.5w 阅读 · 18 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了在Vue项目中如何进行手机号验证，利用正则表达式确保手机号的正确性。在用户评论前，需要先通过手机号验证，包括弹窗显示手机号和验证码输入，只有当用户正确输入验证码后，才能提交评论。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vue 之手机号验证、正则验证手机号是否正确

项目介绍：
首先 项目是为了获取用户手机号码，其次 验证手机号后才可评论也是为了不让用户乱评论；

在这里插入图片描述
2.在这里插入图片描述
填写评论后，弹出提交手机号、验证码弹窗；填写手机号后获取验证码，输入验证码正确后，才可提交评论；

// 1.判断评论内容不为空，出验证手机号弹窗；
posttijiao () {
      if (this.plcontent == "") {
        Message({
          message: "评论不能为空",
          type: "warning",
          duration: 5 * 1000
        });
      } else if (this.lpdptel == "") {
        this.islpdp = true;
        //this.tiptan(4);
      }
    },
   
 //1.验证手机号 正则判断为正确的手机号才发送验证请求；
    codetap () {
      if (!/^1[34578]\d{9}$/.test(this.lpdptel)) {
        Message({
          message: "请填写正确的手机号",
          type: "warning",
          duration: 5 * 1000
        });
      } else {
        const params = {
          mobile: this.lpdptel
        };
        sendCode(params).then(res => {
          console.log(res);
          if (res.msg == "发送成功!") {
            Message({
              message: "发送成功!",
              type: "warning",
              duration: 5 * 1000
            });
          }
        });
      }
    },

//3.最后提交评论 判断手机号正确 验证码不为空 提交评论；
    getloupanpinglun () {
      if (this.ison) {
        if (!/^1[34578]\d{9}$/.test(this.lpdptel)) {
          Message({
            message: "请填写正确的手机号",
            type: "warning",
            duration: 5 * 1000
          });
        } else if (this.code == "") {
          Message({
            message: "请填写验证码",
            type: "warning",
            duration: 5 * 1000
          });
        } else {
          const params = {
            type: 2,
            a_id: this.lid,
            content: this.plcontent,
            mobile: this.lpdptel,
            code: this.code
          };
          addComment(params).then(res => {
            console.log(res);
            if (res.msg == "输入验证码不正确!") {
              Message({
                message: res.msg,
                type: "warning",
                duration: 5 * 1000
              });
            } else {
              Message({
                message: res.msg,
                type: "warning",
                duration: 5 * 1000
              });
              this.getloupanInfo();
              this.plcontent = "";
              this.lpdptel = "";
              this.code = "";
              this.islpdp = false;
            }
          });
          // console.log(this.commentlist);
        }
      } else {
        Message({
          message: "请阅读并同意 喜欢房用户服务协议",
          type: "warning",
          duration: 2 * 1000
        });
      }
    },

html:

<div class="infoboxtan"
         v-if="islpdp">
      <div class="infoboxtanbd">
        <i class="close"
           @click="closeinfo"></i>
        <div class="tanmain">
          <h2 class="titlebox">
            楼盘点评
            <span>我们将为您保密个人信息</span>
          </h2>
          <form class="formbox">
            <input placeholder="您的电话"
                   name="mobile"
                   class="txt"
                   type="number"
                   maxlength="11"
                   v-model="lpdptel" />
            <div class="codebox">
              <input placeholder="验证码"
                     name="code"
                     class="txt"
                     type="number"
                     v-model="code" />
              <p class="codetap"
                 @click="codetap()">获取验证码</p>
            </div>

            <p class="agree clearfix">
              <i :class="[{ duiico: true }, ison ? 'on' : '']"
                 @click="isoncli"></i>
              <span @click="isoncli">阅读并同意</span>
              <router-link :to="{ name: 'fwxy' }">喜欢房用户服务协议</router-link>
            </p>
            <input type="button"
                   class="yuyuetab"
                   value="立即评论"
                   @click="getloupanpinglun" />
          </form>
        </div>
      </div>
    </div>

其他js:

data () {
    return {
	  ison: false,
      islpdp: false,
      lpdptel: "",
      code: ""
	}
},
methods: {
	isoncli () {
      this.ison = !this.ison;
    },
 	closeinfo () {
      this.islpdp = false;
      this.ison = false;
      this.lpdptel = "";
      this.code = "";
    }
}

样式：(less)

@blue: #ff222c;
.codebox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .code {
    width: 3rem;
  }
  .codetap {
    height: 0.86rem;
    width: 3rem;
    border-radius: 0.1rem;
    background: @red;
    font-size: 0.3rem;
    color: #fff;
    line-height: 0.86rem;
    text-align: center;
    margin-left: 0.4rem;
  }
}
.infoboxtan {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  // margin: -2rem 0 0 -3.4rem;
  background: rgba(0,0,0,0.8);
  z-index: 999;
  .infoboxtanbd{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 6.8rem;
    height: 4.9rem;
    margin: -2rem 0 0 -3.4rem;
    background: #fff;
    // z-index: 999;
    border-radius: 0.1rem;
    // box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.1);
    .close {
      display: block;
      position: absolute;
      width: 0.3rem;
      height: 0.3rem;
      top: 0.2rem;
      right: 0.2rem;
      background: url(../assets/img/close-xx.png) no-repeat center;
      background-size: 100% 100%;
      cursor: pointer;
    }
    .tanmain {
      width: 6.2rem;
      margin: 0.2rem auto 0;
      .titlebox {
        font-weight: normal;
        line-height: 0.8rem;
        color: #333;
        font-size: 0.38rem;
        .line{
          display: block;
          float: left;
          width: 0;
          height: .28rem;
          border-left: 2px solid @blue;
          margin: .28rem .1rem 0 0;
        }
        span {
          font-size: 0.24rem;
          color: #999;
          margin-left: 0.1rem;
        }
      }
      .formbox {
        input {
          display: block;
          width: 100%;
          height: 0.86rem;
          border: 1px solid #bfbfbf;
          box-sizing: border-box;
          margin-bottom: 0.2rem;
          text-indent: 0.2rem;
          font-size: 0.3rem;
          color: #000;
          line-height: 0.6rem;
          border-radius: 0.1rem;
          background: none;
          outline: none;
        }
        .agree {
          width: 100%;
          margin-bottom: 0.16rem;
          color: #999;
          .duiico {
            display: block;
            float: left;
            width: 0.28rem;
            height: 0.28rem;
            border: 1px solid #aaa;
            margin-right: 0.1rem;
            margin-top: 1px;
            box-sizing: border-box;
          }
          .on {
            border: 0 none;
            background: url(../assets/img/duiico.png) no-repeat center;
          }
          a {
            color: #ff222c;
            margin-left: 0.1rem;
          }
        }
        .yuyuetab {
          height: .8rem;
          line-height: .8rem;
          background: @red;
          font-size: 0.3rem;
          color: #fff;
          text-indent: 0;
          border: 0 none;
        }
      }
    }
  }
}
前端vue正则表达式验证手机号
wjxhliu的博客
12-08 2486
通过在 <el-form :inline="true" :model="dataForm" :rules="dataFormRules" ref="dataForm" :size="size" > </el-form> 里有 <el-form-item label="联系电话:" prop="phone" v-model="dataForm.phone"> {{dataForm.cellphone}} </el-form-item> 可以在dataFor
VUE—移动端手机号正则验证，不正确显示‘请输入正确手机号’，若正确跳转到发送验证码（图文详情）
Poppy_LYT的博客
08-06 2600
VUE—移动端手机号正则验证，不正确显示‘请输入正确手机号’，若正确跳转到发送验证码 先看效果图 第一步：写布局 <input type="text" placeholder="请输入手机号" v-model="phonenumber"> // 实时获取input框输入的手机号 <p v-if="!isShow">请输入正确的手机号</p> // 如果是t...
vue中，通过正则校验 手机号码格式
Missbelover的博客
02-26 4651
【代码】vue中，通过正则校验 手机号码格式。
手机号校验正则规则详解（更新于2025年5月）
最新发布
deary
05-26 2976
本文介绍了前端开发中手机号格式校验的正则表达式应用。通过详细的11位手机号正则拆解，说明了对各运营商号段的匹配规则，包括中国电信、联通、移动、广电等号段分布。文章还列出了特殊号段和未分配号段，并建议开发者定期参考工信部最新信息更新校验规则。该正则表达式可应用于用户注册、登录等场景，确保手机号输入的有效性。
vue.js手机号正则表达式验证
魏知非的博客
09-08 1万+
getCode() { if (this.mobile === '') { this.$vux.toast.show({ type: 'text', text: '请输入手机号', time: 2000 }); this.selected = tru...
vue中判断电话号码的正则及验证
欢欢的博客
04-15 5122
<template> <div> <h1>{{msg}}</h1> <form action="" method="get" class="form"> <div class="input"> <input type="text" v-model="number" @input="isPhone()" maxlength="11" au
vue 手机号正则验证
m0_37683876的博客
08-26 9490
if(!(/^1[3456789]\d{9}$/.test(this.input.userPhone))){ this.$notify.error({ message: '手机号格式错误', }); }
vue中手机号,邮箱正则验证以及60s发送验证码的实例
12-29
input name=phone type=number placeholder=手机号 v-model=phone/> <button type=button :disabled=disabled @click=sendcode class=btns>{{btntxt}}</button> <p class=fl style=margin-...
vue实现手机号码的校验实例代码（防抖函数的应用场景）
10-16
`handle` 会检查 `val` 是否符合手机号码的正则表达式，如果符合，将状态 `statu` 设置为 `true`，并显示提示信息 "您输入的手机号码格式正确"。反之，如果不符合，会显示错误信息 "您输入的手机号码格式错误"。 ...
Vue手机号正则表达
weixin_44590591的博客
10-14 733
var validateTel = (rule, value, callback) => { var telStr = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/; if (value != "" && telStr.test(value)) { callbac
vue 使用 element-ui表单验证
m0_45043105的博客
11-06 266
手机号： var validateMobilePhone = (rule, value, callback) => { if (value === ‘’) { callback(new Error(‘负责人手机号不可为空’)); } else { if (value !== ‘’) { var reg=/^1[3456789]\d{9}$/; if(!reg.test(value)){ ca...
vue、正则校验手机号
qq_42230041的博客
10-16 4555
if (this.organization.login.length !== 11) { this.errors = {fieldErrors: [{field: 'login', message: '请输入正确手机号'}]}; return; } var reg = /^[0-9]+.?[0-9]*$/; if (!reg.test(this.organization.login)) { thi...
Vue判断手机号正则
热门推荐
姚辉乾
09-10 2万+
&lt;template&gt;   &lt;div class="addAddress"&gt;     &lt;template v-if="loading"&gt;       &lt;div class="loading"&gt;         &lt;van-loading color="black"/&gt;       &lt
Vue正则验证:邮箱，手机号，身份证，IP，MAC，微信号等
xybhua的博客
12-31 3547
【代码】Vue正则验证:邮箱，手机号，身份证，IP，MAC，微信号等。
el vue 手机号_vue实现手机号码的校验实例代码（防抖函数的应用场景），
weixin_39993989的博客
12-20 209
vue实现手机号码的校验实例代码(防抖函数的应用场景)，前言上一篇博文我们讲到了节流函数的应用场景，我们知道了节流函数可以用在模糊查询、scroller、onresize等场景；今天这篇我们来讲防抖函数的应用场景：：通过上一篇博文的学习，我们知道了防抖函数的原理：只有在事件触发的时候才会延迟加载，如果在延迟加载之前再次触发，则会刷新延迟时间重新延迟，触发次数有且只有触发一次；如果对防抖函数原理有疑...
vue 校验手机号、网址（各种正则校验）
mylbest的博客
08-26 1万+
vue form表单校验
vue 正则判断手机号_vue响应式原理+简单实现（1）
weixin_32559133的博客
01-01 255
哇！看到这个标题不知道你会不会感到很刺激，会不会怀疑下面的内容都是瞎扯，一个小小的博主，在这里居然和大家来扯前端目前很火的vue框架，并且还要来实现一下其中的响应式原理。哈哈哈哈，不要怀疑，我也是看资料，看视频，而后写出来的，如果你觉得还是不相信，那么就看下面的视频，简单的体会一下，看看我是不是在吹牛！里面的例子就是vue官网中介绍的例子。我第一次打开官网，就看了vue的视频简介，看完后...
vue移动端手机号正则表达式
zzx262625的博客
04-28 2478
验证输入的手机号码是否合法。如果不是合法的手机号码，则从字符串的末尾删除最后一个字符。事件来实现在 input 框中加入手机号码的正则表达式验证。属性可以让输入框默认弹出数字键盘，更符合手机号码的输入需求。这样，每当用户在 input 框中输入一个字符时，都会触发。如果输入的字符不符合要求，就会自动被删除。方法中，我们首先通过正则表达式。接下来，在 Vue 实例的。指令，并绑定一个名为。可以使用 Vue 的。方法来验证手机号码。
注册：发送手机验证码(校验手机号有效性)
qq_41283814的博客
07-01 3591
html：&lt;input class="hui_kuang" onclick="setTime(this)" value='免费获取验证码'&gt;js:&lt;script&gt; //页面初始化获取倒计时数字 var $getCodeInput = $(".hui_kuang"); var sessionCountdown = sessionStorage.getI...
vue验证手机号正则
04-03
在Vue中，可以使用正则表达式来验证手机号码。以下是一个示例的手机号码验证正则表达式： ```javascript const phoneRegex = /^1[3456789]\d{9}$/; ``` 这个正则表达式可以验证以1开头的11位数字，其中第二位是3、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值