<!-- 表单 -->
<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>

$(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;
}