ajax获得验证码

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

飞在泥里的Jackie

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

阅读量987

点赞数

CC 4.0 BY-SA版权

分类专栏： web前段

本文链接：https://blog.youkuaiyun.com/wqelsysk/article/details/49153933

web前段专栏收录该内容

11 篇文章

订阅专栏

本文介绍了通过Ajax技术实现点击获取验证码的过程，包括前台合法输入验证、按钮状态禁用以及倒计时功能。

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

思路如下：

1、点击获取验证码

---前台验证是否输入合法---

var reg = /^((13[0-9])|(15[0,3]|15[5,9])|(18[0,5-9])|(147))\d{8}$/;//手机号正则表达

---合法后---

按钮变为不可点击（※通过解绑事件绑定来实现）并且执行倒计时；

$(this).css({'background-color': '#bfbfbf'}).off("touchstart");

---倒计时结束后----可以重新获取验证码（※继续绑定事件）;

$('.get-verify').html('获取验证码').css({
    'background-color': '#91cd35'
}).on('touchstart', function () {
    sendCode();
    $(this).css({
        'background-color': '#bfbfbf'
    }).off('touchstart');
    timeRecorder();
});

----获取验证码----

function sendCode() {
    $.ajax({
        type: "Post",
        url: "/supply/perInfo/sendSmscode",
        data: {phone: parseInt($.trim($(".tel-ipt").val()))},
        dataType: "json",
        success: function (result) {
            if (result.statusCode == 1) {}
            else if (result.statusCode == 0) {
                TgsPlug.alert(result.message,3,"发送失败");
                clearTimeout(clock);
                startSend();
            }
            else if (result.statusCode == 2) {
                TgsPlug.alert(result.message, 3, "发送失败");
                location.reload();
            }
        },
        error: function () {
            TgsPlug.alert("请确认您的网络通畅。", 3, "发送失败");
            clearTimeout(clock);
            startSend();
        }
    });
}

------最后确认提交验证码------

$(".confirm-btn").on("click",function(){
    if(!$.trim($('#code').val()){
        TgsPlug.alert("请输入验证码！");
    }
    $.ajax({
        type: "Post",
        url: "",
        data: {code: $.trim($('#code').val()),phone:parseInt($.trim($(".tel-ipt").val()))},
        dataType: "json",
        success: function (result) {
            if (result.statusCode == 1) {
                //跳转到页面
            }
            else if (result.statusCode == 0) {
                TgsPlug.alert(result.message, 3, "提交失败");
            }
        },
        error: function () {
            TgsPlug.alert("请确认您的网络通畅。", 3, "提交失败");
        }
    });
});