验证码短信 登陆时短信验证码的原理，实现

登陆时需要发送短信验证码或者其他的验证方式来校验是否是本人操作，达到安全性的目的，

本文主要以个人思考的实现方式做讲解，来看看常用的短信验证码的前台界面的实现：

效果如图：

点击获取验证码时，倒计时，暂时设定倒计时的时间为180秒，

思路：

当点击【获取验证码】按钮时，发送请求到后台，根据自己的规则生成4位，6位或者8位数字，在用一个标识作为key，将随机数存到session中，我这里是用用户名作为key。发送验证码成功之后，前端开始倒计时，当倒计时的时间 = 0时，发送请求到后端，将用户名作为参数传人，从用户名在session查找，得到发送验证码时保存到session中的随机数，然后从session中清除。假如在倒计时中，用户已经输入了验证码，此时停止倒计时，将输入的验证码和用户名作为入参，传人后台，从session保存的验证码做比对，校验是否正确，假如验证码正确，将倒计时框置为不可用，假如错误，停止倒计时，提示【验证码有误，请重新输入】。

验证码正确，提交表单是定义一个标识，可以提交表单

代码实现如下：

发送验证码：

function getVlidCode(){
    var username = $("#username").val();//将用户名作为session存储的key
    if (flagT){
        $.ajax({
            type:"GET",
            async: false,
            data:"username="+username,
            url:projectName+"/userAction/getVerifYCode.do",
            success:function(date){
                if (date == 1) {
                    chengeviyfValue();
                }
            }
        });
    }
}

定时器，每1000毫秒执行一次:

function chengeviyfValue(){
    if ( flag ){
        $("#getVerifYCodeNum").text("剩余("+totalNum+")秒");
        var username = $("input[name='username']").val();
        if (totalNum == 0) {//时间到了 没有值，清空session中保存的验证码
            document.getElementById('getVerifYCodeNum').innerHTML = "重新发送";
            $.ajax({
                type:"GET",
                async: false,
                data:"username="+username,
                url:projectName+"/userAction/removeVerifYCode.do",
                success:function(date){
                    Ext.Msg.alert('提示！', '验证码已失效，请重新发送！');
                }
            });
            totalNum = 180;
            flagT = true;
            return;
        }else {
            flagT = false;//当totalNum的值不等于0时，不让在点击发送按钮
        }
        totalNum--;
        setTimeout('chengeviyfValue()',1000);
    }
}