2018最新版 手机号、验证码正则表达式 jq + 小程序

HTML：

<!-- 表单 -->
<input class="weui-input" id="tel" type="tel" placeholder="请输入手机号">
<input class="weui-input" type="number" id="number" placeholder="请输入验证码">

<!-- 错误提示 -->
<div class="mobile-err" id="mobile-err"  style="display: none;">
  <span></span>
</div>

JS :

$(function () {
        //手机号验证
        $("#tel").blur(function () {
            var mobile=$(this).val();
            var re=/^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+d{8})$/;
            if (!re.test(mobile)){
                $("#mobile-err span").html("请输入正确的手机号");
                $("#mobile-err").show();
            }
            setTimeout(function () {
                $("#mobile-err").fadeOut();
            },1500)
        });

        //验证码验证 5位数字
        $("#number").blur(function () {
            var mobile=$(this).val();
            var re=/^d{5}$/
            if (!re.test(mobile)){
                $("#mobile-err span").html("验证码错误");
                $("#mobile-err").show();
            }
            setTimeout(function () {
                $("#mobile-err").fadeOut();
            },1500)
        });

    })

小程序

<view class="section">
  <input   placeholder="手机号" placeholder-style='color:#999;' type="number" auto-focus bindblur='telNum' />
</view>
<view class="section get-code cl">
  <input  placeholder="验证码" placeholder-style='color:#999;'  type="number" maxlength="5"  bindblur='codeNum'/>
  <button bindtap='getCode' class='get-code-btn'  disabled="{{disabled}}">{{codeTxt}}</button>
</view>
<view class='btm-btn-ot'>
  <form bindsubmit="submitBtn" report-submit="true">
    <button class="form_button" form-type="submit">
      <button class='sub-btn'>登录</button>
    </button>
  </form>
</view>

  data: {
    mobile:0,     //输入是否正确
    code:0,
    mobileNum:'', //输入的手机号
    codeNum:'',
    codeTxt:'',    //获取验证码 文字
    disabled:'',
    currentTime:60
  },
  onLoad: function (options) {
    var that = this;
    that.setData({
      codeTxt: '获取验证码'
    })
  },
  // /**
  //  * 手机号
  //  */
  telNum: function (e) {
    var that = this;
    var mobile = e.detail.value;
    var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+d{8})$/;
    if (mobile.length == 0) {
      wx.showToast({
        title: '手机号为空',
        icon: 'loading',
        success:function(){
          that.setData({
            mobile: 0,
          })
        }
      })
      return false;
    } else if (!myreg.test(mobile)) {
      wx.showToast({
        title: '手机号有误',
        icon: 'loading',
        success: function () {
          that.setData({
            mobile: 0,
          })
        }
      })
      return false;
    } else {
      that.setData({
        mobile: 1,
        mobileNum: mobile,
      })
    }
  },

  // /**
  //  *  验证码
  //  */
  codeNum: function (e) {
    var that = this;
    var code = e.detail.value;

    var myreg = /^d{5}$/;
    if (code.length == 0) {
      wx.showToast({
        title: '验证码为空',
        icon: 'loading',
        success: function () {
          that.setData({
            code: 0,
          })
        }
      })
      return false;
    } else if (!myreg.test(code)) {
      wx.showToast({
        title: '验证码有误',
        icon: 'loading',
        success: function () {
          that.setData({
            code: 0,
          })
        }
      })
      return false;
    } else {
      that.setData({
        code: 1,
        codeNum: code
      })
    }
  },
  //验证码
  getCode:function(){
    let that = this;
    if (that.data.mobile==1){
      wx.request({
        url: _url + '/api/sendsms',
        method: 'POST',
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          phone: that.data.mobileNum,
        },
        success: function (e) {
          console.log(e.data)
          if (e.data.status == 1000) {
          //发成功后不可点击
            that.setData({
              disabled: true
            })
            //60秒倒计时
            var currentTime = that.data.currentTime;
            that.setData({
              codeTxt: '重新获取(' + currentTime + 's)'
            })
            var interval = setInterval(function () {
              that.setData({
                codeTxt: '重新获取(' + (currentTime - 1) + 's)'
              })
              currentTime--;
              if (currentTime <= 0) {
                clearInterval(interval)
                that.setData({
                  codeTxt: '重新获取',
                  currentTime: 60,
                  disabled: ''
                })
              }
            }, 1000)

            wx.showToast({
              title: '正确',
              icon: 'success',
              success: function () {
                wx.showToast({
                  title: '请注意查收',
                  icon: 'success',
                })
              }
            })
          } else if (e.data.status == 90061) {
            wx.showToast({
              title: '验证码错误',
              icon: 'loading',
            })
          } 
        }
      })
    }
  },
  //提交
  submitBtn:function(e){
    let that = this;
    var m = that.data.mobile;
    var c = that.data.code;

    //判断 手机号和验证码格式无误后返回后台
    if (m == 1 || c == 1) {

    }else{
      wx.showToast({
        title: '错误',
        icon: 'loading',
      })
    }
  }

page{
  padding: 0 56rpx;
  background: #fff;
  box-sizing: border-box;
}
.section{
  height: 114rpx;
  border-bottom: 1rpx solid #ebebeb ;
  margin-bottom: 20rpx;
}
.section input{
   100%;
  height: 100%;
  line-height: 114rpx;
}
.get-code input{
   350rpx;
  float: left;
  font-size: 32rpx;
}
.get-code button{
  /* display: inline-block; */
  float: right;
  color: #553a91;
  font-size: 30rpx;
  border: 1rpx solid #c8c0dc;
  background: transparent;
  border-radius: 32rpx;
  padding: 20rpx 26rpx;
  margin:22rpx 0 0;
  line-height: 1;
}
.btm-btn-ot{
  margin-top: 100rpx;
   100%;
  box-sizing: border-box;
  background: #fff;
}
.sub-btn{
  100%;
  text-align:center;
  background: rgba(85, 58, 145, .5);
  padding:30rpx 0;
  color:#fff;
  font-size:32rpx;
  border-radius:48rpx;
  font-weight:300;
  display:inline-block;
  border:0;
  line-height:1;
  margin-bottom: 40rpx;
}
.sub-btn::after{
  border:0;
}
.sub-btn.active {
  background:#553a91;
}