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

HTML：

//手机号正则
var re=/^1[3456789]\d{9}$/;

//5位数验证码正则
var myreg = /^\d{5}$/;

//Email正则
var pattern = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

//身份证（18位数）正则
var cP = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;

//URL正则
var urlP= /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;

//微信号正则，6至20位，以字母开头，字母，数字，减号，下划线
var wxPattern = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;

//车牌号正则
var cPattern = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;

//包含中文正则
var cnPattern = /[\u4E00-\u9FA5]/;

//空白行的正则表达式：
var pattern = /\n\s*\r/;           //(可以用来删除空白行)

<!-- 表单 -->
<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=/^1[3456789]\d{9}$/;
            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 = /^1[3456789]\d{9}$/;
    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;
}