1、html代码
<ul class="login-from"> <li class="flexbox flexbox-middle" ><input type="tel" class="ipt flexchild" id="tel" maxlength="11" placeholder="请输入您的联系方式" /></li> <li class="flexbox flexbox-middle"> <input id="dyncode" type="text" maxlength="4" class="ipt flexchild" placeholder="请输入图形验证码" /> <img id="dyncodeimg" class="code-img" src="{:U('getDynamicCode')}" οnclick="javascript:this.src = '{:U('getDynamicCode')}?tm=' + Math.random();"> </li> <li class="flexbox flexbox-middle"> <input id="VerifyCode" type="text" maxlength="6" class="ipt VerifyCode" placeholder="请输入短信验证码" /> <input id="getVerifyCode" type="text" class="getVerifyCode" value="点击获取"> </li> </ul>
js验证
//手机号码验证 if(document.getElementById("tel")){ document.getElementById("tel").addEventListener("input", function(event) { var val = event.target.value; var reg = /[\d]/g; if (!reg.test(val)) { event.target.value = ""; $.dialog({content:"请输入数字", time: 1000}); } }) } //验证码验证 if(document.getElementById("VerifyCode")){ document.getElementById("VerifyCode").addEventListener("input", function(event) { var val = event.target.value; var reg = /[\d]/g; if (!reg.test(val)) { event.target.value = ""; $.dialog({content:"请输入数字", time: 1000}); } }) } //登录 发送验证码 var getVerifyFlag = true; var lockKey = false; $('#getVerifyCode').on('click', function () { var tel = $("#tel").val().trim(); var dyncode = $("#dyncode").val().trim(); if(tel == ''){ $.dialog({content: '联系方式不能为空!', time: 2000}); return ; } if(!isPhoneNo(tel)){ $.dialog({content: '联系方式不正确!', time: 2000}); return ; } if(dyncode.length < 4){ $.dialog({content: '请输入图形验证码!', time: 2000}); return ; } if (getVerifyFlag) { getVerifyFlag = false; $.ajax({ url: "{:U('smssend')}?t=" + Math.random(), type: 'POST', data: {tel: tel, dyncode: dyncode,csrf_param:'{$csrf_param}',csrf_token:'{$csrf_token}'}, success: function (res) { if (res.status == 1000) { //成功 if (res.re_flag == 1) { $('#dyncodeimg').trigger('click');//刷新动态码 } var date = new Date(); date = date.getTime(); window.localStorage.setItem('getVerifyCodeTime', date); getVerifyCodeCount(); $.dialog({content: '发送成功!', time: 2000}); $("#clickVerifyFlag").val(true); } else { $.dialog({content: res.data, time: 2000}); $('#dyncodeimg').trigger('click');//刷新动态码 } getVerifyFlag = true; }, error: function () { $.dialog({content: '网络加载失败!', time: 2000}); getVerifyFlag = true; } }) } }); //登录发送验证码 倒计时 function getVerifyCodeCount() { if (window.localStorage.getItem('getVerifyCodeTime')) { var nowTime = new Date(); nowTime = nowTime.getTime(); oldTime = Number(window.localStorage.getItem('getVerifyCodeTime')); var t = nowTime - oldTime; //时间差 秒数 var seconds = Math.floor(t / 1000); counts = 60 - seconds; var timer = setInterval(function () { if (counts > 0) { counts--; //防止再次发送短信 $('#getVerifyCode').attr("disabled","disabled"); $('#getVerifyCode').val('已发送(' + counts + '秒)'); $('#getVerifyCode').css({'color':'#ccc','pointer-events': 'none'}); } else { clearInterval(timer); $('#getVerifyCode').removeAttr("disabled"); $('#getVerifyCode').val('重新发送'); $('#getVerifyCode').css({'color':'#ec2b2c','pointer-events': 'auto'}); } }, 1000) } }