微信小程序电话号码input框的正则校验

最新推荐文章于 2024-03-20 16:40:34 发布

原创最新推荐文章于 2024-03-20 16:40:34 发布 · 4.6k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

前端专栏收录该内容

40 篇文章

订阅专栏

本文介绍了如何在微信小程序中使用正则表达式对电话号码input框进行校验，包括wxml和js的实现细节。

微信小程序电话号码input框的正则校验

1、wxml

 <!-- start 联系电话 -->
    <view class="mobile">
      <sapn class="title">联系电话</sapn><input value="{{registration.mobile}}" class="mobile-weui-input" type="number"
        bindblur="mobileInput" maxlength="11" placeholder="请输入电话号码！" />
    </view>
    <!-- end 联系电话 -->

2、js

  // 电话输入
  //mobileFormat表示输入是都符号电话号码规则
  mobileInput(e) {
    let value = e.detail.value.replace(/\D/g, '')
    this.setData({
      mobile: value,
    })
    var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
    if (this.data.mobile.length == 0) {
      wx.showToast({
        title: '输入的手机号为空，，请重新输入！',
        icon: 'success',
        duration: 1500
      })
      this.setData({
        mobileFormat: false,
      })

    } else if (this.data.mobile.length < 11) {
      wx.showToast({
        title: '手机号长度有误，请重新输入！',
        icon: 'none',
        duration: 1500
      })
      this.setData({
        mobileFormat: false,
      })

    } else if (!myreg.test(this.data.mobile)) {
      wx.showToast({
        title: '手机号有误，请重新输入！',
        icon: 'none',
        duration: 1500
      })
      this.setData({
        mobileFormat: false,
      })

    } else {
      this.setData({
        mobileFormat: true,
      })
    }
  },