登录之图形跟短信验证码

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')}" onclick="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)
        }
    }