js如何实现前台验证码？（代码）

程序员文章站 2022-04-26 16:38:49

...

本篇文章给大家带来的内容是关于js如何实现前台验证码？（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

能来查这个知识点的同学，想必是已经最少掌握了一点点JavaWeb知识了吧，应该可以看得懂这段代码知道怎么用的吧！

<body>
  <div class="input">
            &nbsp&nbsp<span 
style="font-size:16px;font-family: 
黑体">验证码:</span>&nbsp<input id="t1" type="text" name="u" 
 onblur="but()" />
                   <span id="discode"></span>
                   <input type="button" value="点击刷新" class="c" style="height:20px;"onClick="createCode()">
      </div>
<script language="javascript">
        var code; //在全局 定义验证码
        function createCode() { //创建验证码函数
            code = "";
            var codeLength = 4;//验证码的长度
            var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B',
                    'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N',
                    'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');//所有候选组成验证码的字符，当然也可以用中文的
            for (var i = 0; i < codeLength; i++) {
                var charIndex = Math.floor(Math.random() * 36);
                code += selectChar[charIndex];
            }
            // 设置验证码的显示样式，并显示
            document.getElementById("discode").style.fontFamily = "黑体"; //设置字体
            document.getElementById("discode").style.letterSpacing = "20px"; //字体间距
            document.getElementById("discode").style.color = "red"; //字体颜色
            document.getElementById("discode").innerHTML = code; // 显示
        }
        function but() {//验证验证码输入是否正确
            var val1 = document.getElementById("t1").value;
            var val2 = code;
            if (val1 != val2) {
                
                document.getElementById('t1').value = "";
            }
        }
    </script>
</body>