生成随机验证码

本文介绍如何在用户点击获取按钮后,通过JavaScript生成6位数的随机验证码,并利用jQuery处理相关逻辑。生成的验证码通过短信发送给用户,并设定有效时间为3分钟,超时将失效。

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

通过点击“获取短信验证码”按钮,然后系统将生成6位数的随机验证码通过短信的方式发送给指定用户。
在这里插入图片描述

先声明一个数组:

var arrRan = [];//随机数数组

然后使用Math.random来生成随机数

Math.random () 方法可返回介于 0 ~ 1 之间的一个随机数。
 //得到随机数数组
        function getRandom() {
            if (arrRan.length == 6) {
            //判断随机数数组是否满足6位数,不满足则进行递归
                return;
            }
            var random = Math.random() * 10;
            //通过Math.random()方法得到0~1之间的随机数再*10得到0或者0以上的值
            var intran = Math.round(random);
            //将得到的数进行处理,四舍五入保留个位
            if (intran == 10) {
                intran = 0;
            }
            arrRan.push(intran);//将最终的结果添加到随机数数组中。
            getRandom();
        }

在“获取短信验证码”按钮的点击事件中对得到的随机数组进行处理

 //生成随机密码
		$("#authcode").click(function () {
		    num = 30;
		    arrRan.splice(0,6);//将上一次得到的随机数组清空
		    getRandom();//生成随机数数组
		    var securitycode = arrRan.join("");//拼接生成验证码
		    $.getJSON("SaveRandom", { Code: securitycode }, function (data) {
		        if (data) {
		            //计时3分钟
		            numcode = 0;
		            timercode = setInterval(clearcode, 1000);
		        }
		    })
		    $("#authcode").attr("disabled", "disabled");//改变按钮状态
		    $("#checkrandom").removeClass("hide");//显示验证按钮
		    $("#openPhone").removeClass("hide");
		    timer = setInterval(star, 1000);
		});

JavaScript Array对象中的splice()方法可删除从 index 处开始的零个或多个元素,从而达到清空上一次的随机数数组的效果。这个时候验证码已经生成。可以通过计时器来对验证码获取时间进行限制,避免短时间内重复获取导致系统卡顿。

 //验证码获取冷却计时器
		function star() {
		    if (num == -1) {
		        clearInterval(timer);
		        $("#authcode").removeAttr("disabled");
		        $("#authcode").html("获取短信验证码");
		        $("#authcode").addClass("btn-info");
		        return;
		    }
		    $("#authcode").html("重新获取(" + num + ")");
		    $("#authcode").removeClass("btn-info");
		    num--;
		}

在这里插入图片描述

再使用一个计时器,来对随机验证码进行有效期的判定,若三分钟内未完成验证,该验证码将会被销毁。

 //验证码有效期计时器
		function clearcode() {
		    if (numcode == 180) {
		        clearInterval(timercode);
                //请求清除验证码Session
		        $.getJSON("ClearRandom", function () { });
		        return;
		    }
		    numcode++;
		}

随机验证码通过手机短信的方式发送到用户号码上,然后用户可以根据验证码来进行验证
在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值