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

?

轉載于:https://www.cnblogs.com/cqlb/p/9682603.html

總結

以上是生活随笔為你收集整理的2018最新版 手机号、验证码正则表达式 jq + 小程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。