1、html代碼

<ul class="login-from"><li class="flexbox flexbox-middle" ><input type="tel" class="ipt flexchild" id="tel" maxlength="11" placeholder="請輸入您的聯(lián)系方式" /></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:"請輸入數(shù)字", 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:"請輸入數(shù)字", time: 1000});}})}//登錄 發(fā)送驗證碼var getVerifyFlag = true;var lockKey = false;$('#getVerifyCode').on('click', function () {var tel = $("#tel").val().trim();var dyncode = $("#dyncode").val().trim();if(tel == ''){$.dialog({content: '聯(lián)系方式不能為空!', time: 2000});return ;}if(!isPhoneNo(tel)){$.dialog({content: '聯(lián)系方式不正確!', 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');//刷新動態(tài)碼 }var date = new Date();date = date.getTime();window.localStorage.setItem('getVerifyCodeTime', date);getVerifyCodeCount();$.dialog({content: '發(fā)送成功！', time: 2000});$("#clickVerifyFlag").val(true);} else {$.dialog({content: res.data, time: 2000});$('#dyncodeimg').trigger('click');//刷新動態(tài)碼 }getVerifyFlag = true;},error: function () {$.dialog({content: '網(wǎng)絡(luò)加載失敗！', time: 2000});getVerifyFlag = true;}})}});//登錄發(fā)送驗證碼 倒計時 function getVerifyCodeCount() {if (window.localStorage.getItem('getVerifyCodeTime')) {var nowTime = new Date();nowTime = nowTime.getTime();oldTime = Number(window.localStorage.getItem('getVerifyCodeTime'));var t = nowTime - oldTime;//時間差 秒數(shù)var seconds = Math.floor(t / 1000);counts = 60 - seconds;var timer = setInterval(function () {if (counts > 0) {counts--;//防止再次發(fā)送短信$('#getVerifyCode').attr("disabled","disabled");$('#getVerifyCode').val('已發(fā)送(' + counts + '秒)');$('#getVerifyCode').css({'color':'#ccc','pointer-events': 'none'});} else {clearInterval(timer);$('#getVerifyCode').removeAttr("disabled");$('#getVerifyCode').val('重新發(fā)送');$('#getVerifyCode').css({'color':'#ec2b2c','pointer-events': 'auto'});}}, 1000)}}

?

轉(zhuǎn)載于:https://www.cnblogs.com/qdlhj/p/10095301.html

總結(jié)

以上是生活随笔為你收集整理的登录之图形跟短信验证码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。