带有数字和字母的四位验证码_所有的四位数验证码-CSDN博客

本文链接：https://blog.csdn.net/qq_48314805/article/details/108798769

本文介绍如何使用JavaScript生成包含数字和字母的四位验证码，适用于网页验证，提高安全性。通过随机函数混合数字和大小写字母，确保验证码的唯一性。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    请输入验证码：<input type="text" id='num'>
    <input type="button" value="" id='rannum'>
    <input type="button" value="验证" id='btn'>
    <div id="box"></div>
</body>
<script>
    (function () {
        var num = document.getElementById('num')
        var rannum = document.getElementById('rannum')
        var btn = document.getElementById('btn')
        var box = document.getElementById('box')
        function ma(n) {
            var str = '0123456789zxcvbnmasdfghjklqwertyuiopZXCVBNMASDFGHJKLQWERTYUIOP'
            var html = '';
            for (var i = 0; i < n; i++) {
                var num = parseInt(Math.random() * str.length);
                var na = str[num];
                html += na;
            }
            return html;
        }
        rannum.value = ma(4);
        rannum.onclick = function () {
            rannum.value = ma(4);
        }
        btn.onclick = function () {
            var n1 = num.value;
            var n2 = rannum.value;
            if (n1 == n2) {
                box.innerHTML = '验证通过';
                box.style.color = '#58bc58';
            } else {
                box.innerHTML = '验证失败';
                box.style.color = 'red';
            }
        }
    })()
</script>

</html>