js实现输入手机验证码后点击提交按钮验证手机输入的验证码和发送的验证码是不是一致

Posted 2023-04-15

这个不能使用js来做，js属于客户端脚本，手机验证码不能通过任何方式显示到前端，所以js不能来做校验
实现方案是，点击获取验证码，发送手机号到服务端，服务端通过短信平台网关接口发送验证码；用户接收到验证码，输入验证码，然后将手机号和验证码同时提交到服务端，由服务端进行验证，并返回是否验证通过
整个过程中验证码并未出现在前端 参考技术A 是否一致是需要后端来做判断，因为手机验证码是后端生成的 参考技术B 一般现在系统群发的验证码都是由专门的短信群发平台发送的，号段一般是106，如果有收不到的情况，可能是被运营商拦截了或者是系统延迟了
群发短信分2种，一种是用专门的短信群发平台来推送，这种一般是106开头的
还有一种就是用自己的手机号群发短信，如果短时间高频次的发送，很容易被运营商判定为骚扰短信进行拦截

使用Jquery实现获取短信验证码60秒倒计时

现在使用手机号+验证码的方式注册账号已经成为一种必备功能，当我们输入手机号点击发送验证码按钮后，按钮应该不可被再次点击，并开始倒计时，倒计时结束后才能再次点击。这一个可以借助某些插件实现，但其实使用Jquery也可以非常容易实现。假设我们使用button作为发送按钮：

<button type="button" name="button">点击获取验证码</button>

点击事件我们可以这样写：

$("button[name='button']").click(function(event) {
    //这里写发送验证码的代码    var time = 60;    settime($(this));    
    function settime(obj){                
        if (time==0) {
            $(obj).attr('disabled', false);            $(obj).html("点击获取验证码");            time = 60;                    
            return;        } else{            $(obj).attr('disabled', true);            $(obj).html(time+"秒后重新发送");            time--;        }        setTimeout(function() {            settime(obj)        },1000)    } });

中间发送短信的功能，可以参考ThinkPHP5.1使用阿里云平台发送短信验证码这篇文章。其中第一个if当中的return是在倒计时结束后结束计时器，防止循环。