2018最新版 手機號、驗證碼正則表示式 jq + 小程式
阿新 • • 發佈:2019-01-08
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;
}