关于js生成随机验证码并验证

用JavaScript生成随机验证码并验证

  1. body部分
	<span id="code" style="background-color: #ccc">1010</span>
    <input type="button" value="刷新" onclick="randomCode()"><br>
    <input type="text" id="txt" placeholder="请输入验证码">
    <input type="button" value="提交" onclick="checkCode()">
  1. script部分
<script>
        //获取元素
        var code = document.getElementById('code');
        var txt = document.getElementById('txt');
        //新建字符串,字符串中包含所有的值
        var str = '0123456789abcdefghijklmnopqrstuvwxyz';

        //封装函数
        function randomCode() {
            //定义一个空的字符串
            var strNew = '';
            // 随机产生四位字符,放在code元素里
            for (var i = 0; i < 4; i++) {
                var index = parseInt(Math.random() * str.length);
                strNew += str.charAt(index);
            }
            // 设置code元素的innerText
            code.innerText = strNew;
        }

        //验证输入的是否正确,函数封装
        function checkCode() {
            if (txt.value == code.innerText) {
                alert('验证成功');
            } else {
                alert('验证失败,请重新输入');
                txt.value = '';
                randomCode();
            }
        }
    </script>
  • 1
    点赞
  • 0
    评论
  • 4
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页

打赏

文雅的

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值