js实现30秒内禁止重复点击发送验证邮件

本文介绍了一种实现邮箱验证功能的方法，并在用户点击提交按钮后，通过正则表达式验证邮箱地址的有效性。同时，文章详细解释了一个30秒倒计时机制，用于在用户提交邮箱验证请求后限制短时间内重复发送请求，增强了用户体验。

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

如题实现一个这里写图片描述，个人用的是一个input type = button,这样不会突然显示一个button那么突兀。

onclick = sub_eamil
然后js sub_email()函数里先检验是否填写了邮箱地址以及邮箱地址正则的匹配。

//判断为空
if(username.length == 0) {
    uexWindow.alert('提示','用户名不能为空','确定');
    return;
}
if(email.length == 0) {
    uexWindow.alert('提示','邮箱不能为空','确定');
    return;
}
var pattern = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;  
if (!pattern.test(email)) {  
    uexWindow.alert('提示','请输入正确的邮箱地址','确定');  
    return;
}

然后实现

//调用函数实现30秒内禁止重复发送邮件
var bt=document.getElementById("submit_email");
var countdown = 30;
time_out(bt,countdown);

递归函数，另外要体现给用户，这里很精巧的每1秒钟返回一次提示给用户，利用setTimeout函数的延迟执行来一秒后递归回来。

function time_out(bt,countdown) {
    if (countdown == 0) { 
        bt.disabled = false;
        bt.value="获取邮箱验证码"; 
        countdown = 30; 
    } else { 
        bt.disabled = true; 
        bt.value="重新发送(" + countdown + ")"; 
        countdown--; 
        setTimeout(function() { time_out(bt,countdown) },1000);
    } 
}