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{
  width: 100%;
  height: 100%;
  line-height: 114rpx;
}
.get-code input{
  width: 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;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
}
.sub-btn{
  width: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;
}