使用ajax实现发送验证码业务

最新推荐文章于 2025-06-09 15:35:23 发布

原创最新推荐文章于 2025-06-09 15:35:23 发布 · 1.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #验证码 #手机

web前端开发同时被 2 个专栏收录

30 篇文章

订阅专栏

手机验证码

1 篇文章

订阅专栏

本文介绍了一种通过Ajax发送手机验证码的方法。该方法首先检查手机号的有效性，然后启动倒计时，并通过Ajax向指定接口发送请求。成功后，将显示验证码已发送的消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里实现用ajax发送手机验证码的业务和功能，代码如下：

//点击获取验证码
    document.getElementById("btnyzm").onclick=function(){
        //如果在正在发送则不能发送
        var t =this.innerHTML.indexOf('重');
        if(t==0){
            return;
        }
        //发验证码之前验证手机号是否合法    
        if($("#number").text().length<=0){
            alert("手机号码不能为空!");
            return;
        }else{
            if($("#number").text() && /^1[3|4|5|8]\d{9}$/.test($("#number").text())){
                console.log("手机号正确");
            }else{
                alert("手机号格式错误,请核实后再填写！");
                return;
            };
        };
        //调用倒计时功能
        time(this);
        //调用发送短信请求  YHLX （1.求职者2.企业用户） YZLX 验证类型（1.登录验证，2.注册验证）
        var yzmdata={SJHM:$("#number").text(),YHLX:"2",YZLX:"2"};
        var promise,
            yzmCode;
        $.ajax({
            url:"接口地址",
            type:"POST",
            data: yzmdata,
            timeout: 3000,
            success:function(res){
                promise = new Promise(function(resolve,reject){
                    yzmCode = res.data;
                    resolve();
                })
                return promise;
            }
        }).then(function(){
            if(yzmCode.status != 200){
                alert("发送失败");
            }
            if(yzmCode.data.IsOK){
                alert("验证码发送成功，请注意查收");
            }
        })
    };

    //初始化验证码时间
    var wait=40;
    function time(o) {
      if (wait == 0) {
        //jq操纵dom对象改名内容
        o.innerHTML = '获取验证码';
        o.removeAttribute("disabled");
        //时间重置
        wait = 40;
      }else{
        o.innerHTML = "重新发送(" + wait + ")";
        wait--; 
        //每1秒执行一次time时间。如果不满足就就继续减 一直到0为止，如果为0就显示免费获取验证码
        setTimeout(function() {  
            time(o)  
        },1000);  
      };  
    };