由手机号正则引发的思考,正则属性 lastIndex

问题:

let reg = /^1[3456789]\d{9}$/g 正则是验证手机号的证,为何突然不能验证正确的手机号了呢?其中有何蹊跷?

解决方案:底部有3种解决方案,方案3解决最稳妥

先来看一段正则:
let reg = /^1[3456789]\d{9}$/g

这个正则我们平时用来验证手机号的,好像也看不出什么毛病,把正则放到浏览器控制台,简单代入,可以对手机号正确验证
在这里插入图片描述

接着我们把这个正则拿到实战中使用:
  <input type="text" placeholder="请输入">
  <script>
    let input = document.querySelector('input');
    let reg = /^1[3456789]\d{9}$/g
    input.oninput = function (e) {
      console.log(reg.test(e.target.value));
      if (reg.test(e.target.value)) {
        console.log('手机号完整');
      } else {
        console.log('手机号不完整');
      }
    }
  </script>
再来看看这段代码的结果:

在输入框输入11位手机号后结果怎么和预期的不一样
按预期的想法应该提示 手机号完整 才对,为什么我输入了11位手机号却提示 手机号不完整 呢?

在这里插入图片描述

我们在正则文档上看到有lastIndex这个属性,看描述:

在这里插入图片描述

根据文档我们在写个类似的demo看lastIndex表达的具体意思:

当正则后使用了g 会默认 以 lastIndex 属性所指的位置作为下次检索的起始点
第一次执行regs.test(num),结果为true ,regs.lastIndex 为 1 ,因为匹配到了1,所以从2开始,这里的2索引为1
第二次执行regs.test(num),结果为true ,regs.lastIndex 为 4 ,因为匹配到了1,所以从2开始,这里的2索引为4
第三次执行regs.test(num),结果为false,lastIndex被重置为0,regs.lastIndex为 0
在这里插入图片描述

解决细节bug:

方案1: 把提前打印的去处即可,但这种方法发生bug 的概率还是挺高的

在这里插入图片描述
在这里插入图片描述

方案2: 把正则后面的g去掉即可,此方法简单方便

在这里插入图片描述
在这里插入图片描述

方案3: 想要g ,又能正常验证,把 lastIndex 设置为 0即可

在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端酱紫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值