jquery实现验证码发送以及验证码的有效时间30分钟实现方式

var InterValObj; //timer变量,控制时间
var count = 60; //间隔函数,1秒执行
var curCount;//当前剩余秒数
var code = ""; //验证码
var codeLength = 6;//验证码长度
function sendMessage() {
    curCount = count;
    //产生验证码
for (var i = 0; i < codeLength; i++) {
  code += parseInt(Math.random() * 9).toString();
}
    //设置button效果,开始计时
    $("#btnSendCode").attr("disabled", "true");
    $("#btnSendCode").val("剩余"+curCount +"秒");
    InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次
//向后台发送处理数据,并发送邮件
    (jQuery).ajax({
type : "POST",
dataType : "json",
url : mainServer + "/userCenter/sendVerifiCodeActive.jspa",//发送验证码邮件
data : {
'newBindEmail' : $('#bindWuEmail').val(),//传入参数
'verifyCode':code
},
success : function(data) {
//邮件已经成功发送,弹出框提示
}
});


   }



    //timer处理函数
function SetRemainTime() {
    if (curCount == 0) {                
        window.clearInterval(InterValObj);//停止计时器
        $("#btnSendCode").removeAttr("disabled");//启用按钮
        $("#btnSendCode").val("重新发送");
        code = ""; //清除验证码。如果不清除,过时间后,输入收到的验证码依然有效    
    }
    else {
        curCount--;
        /*$("#btnSendCode").val("请在" + curCount + "秒内输入验证码");*/
        $("#btnSendCode").val("剩余"+curCount +"秒");
    }

}



当用户前台点击获取验证码的时候,异步向后台发送验证码,后台获取验证码和当前服务器的时间戳,存入数据库,数据表用户表添加了两个字段,验证码字符串

验证码截止时间datetime类型,当用户输入验证码后,和后台数据库的时间戳比较,看时间是否过期,如果过期,验证码无效,如果在有效期内,比较验证码是否相等

相等,则更新数据,并清空验证码,因为验证码是一次有效,不相等返回界面提示验证码不正确。


        
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个使用jQuery实现动态验证码的示例: HTML代码: ``` <form> <label for="email">电子邮件:</label> <input type="text" id="email" name="email"><br> <label for="captcha">验证码:</label> <input type="text" id="captcha" name="captcha"> <img src="#" alt="验证码" id="captchaImg"> <a href="#" id="refreshCaptcha">换一张</a><br> <input type="submit" value="提交"> </form> ``` JavaScript代码: ``` $(document).ready(function() { var captchaUrl = 'captcha.php'; //验证码图片的URL地址 var captchaId = ''; //验证码ID //刷新验证码图片 function refreshCaptcha() { captchaId = ''; //清空验证码ID $('#captchaImg').attr('src', captchaUrl + '?t=' + new Date().getTime()); //重新加载图片 } //点击“换一张”链接时,刷新验证码 $('#refreshCaptcha').click(function() { refreshCaptcha(); return false; //阻止默认链接行为 }); //在页面加载时,刷新验证码 refreshCaptcha(); //表单提交时,验证验证码是否正确 $('form').submit(function() { var captchaInput = $('#captcha'); //验证码输入框 var captchaValue = captchaInput.val(); //输入的验证码 if (captchaValue === '') { alert('请输入验证码'); captchaInput.focus(); return false; } $.ajax({ url: 'checkCaptcha.php', //验证验证码的URL地址 type: 'POST', data: { id: captchaId, value: captchaValue }, success: function(result) { if (result === 'true') { //验证码正确,表单提交 return true; } else { //验证码错误,刷新验证码 alert('验证码错误'); refreshCaptcha(); captchaInput.val(''); captchaInput.focus(); return false; } }, error: function(jqXHR, textStatus, errorThrown) { alert('出现错误:' + textStatus); refreshCaptcha(); captchaInput.val(''); captchaInput.focus(); return false; } }); return false; }); }); ``` 在上面的代码中,我们首先定义了一个变量`captchaUrl`,表示验证码图片的URL地址。然后定义了一个`refreshCaptcha`函数,用于刷新验证码图片。在函数内部,我们首先清空了验证码ID,然后使用jQuery更新了验证码图片的`src`属性,加上了一个随机参数`t`,以便每次刷新图片都会产生新的URL地址,从而避免浏览器缓存。接着,在页面加载时,我们调用了`refreshCaptcha`函数,以显示初始的验证码图片。 接下来,我们使用jQuery绑定了“换一张”链接的`click`事件,当用户点击该链接时,会调用`refreshCaptcha`函数,刷新验证码。 最后,我们使用jQuery绑定了表单的`submit`事件,在表单提交之前,首先验证用户输入的验证码是否正确。如果输入的验证码为空,会弹出提示框,要求用户输入验证码。如果输入的验证码不为空,则使用jQuery的`ajax`方法向服务器端发送验证请求,包括验证码ID和输入的验证码值。服务器端会根据这些参数,验证验证码是否正确,并返回一个布尔值。如果验证码正确,则返回`true`,表单提交;否则,返回`false`,并弹出提示框,要求用户重新输入验证码。在验证失败时,我们还调用了`refreshCaptcha`函数,刷新验证码图片,以便用户重新输入验证码
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值