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 = /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/divJS :
$(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' //viewview 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/viewview 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;}
