javascript生成随机验证码并验证

最新推荐文章于 2023-06-16 13:06:50 发布

原创最新推荐文章于 2023-06-16 13:06:50 发布 · 259 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文详细介绍了一种基于JavaScript的验证码生成与校验方法。通过使用随机数选取字符集中的字符，生成四位验证码并显示在网页上。用户输入验证码后，通过调用校验函数检查输入是否与生成的验证码一致，实现简单而有效的验证码机制。

布局

	<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()">

<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>