js简单的验证码测试

简单验证码生成与验证

最新推荐文章于 2023-04-22 19:39:48 发布

原创最新推荐文章于 2023-04-22 19:39:48 发布 · 377 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #验证码

JS 同时被 2 个专栏收录

36 篇文章

订阅专栏

HTML

10 篇文章

订阅专栏

本文介绍了一个简单的HTML和JavaScript实现的验证码生成与验证系统。该系统通过JavaScript随机生成由数字和字母组成的验证码，并将其显示在HTML页面上。用户在文本框中输入验证码后，点击验证按钮，系统将进行校验并给出反馈。

直接上代码:

HTML:

<html>  
    <head>  
        <title>验证码基础</title>  
        <style type="text/css">  
            #code  
            {  
                font-family:Arial;  
                font-style:italic;  
                font-weight:bold;  
                border:0;  
                letter-spacing:2px;  
                color:blue;  
            }  
        </style>  
        <script type = "text/javascript" src = "yanzhen.js">  
        </script>  
    </head>  
    <body>  
        <div>  
            <input type = "text" id = "input"/>  
            <input type = "button" id="code" onclick="createCode()"/>  
            <input type = "button" value = "验证" onclick = "validate()"/>  
        </div>  
    </body>

JS:(yanzhen.js)

	var code ;  
        window.onload = function createCode(){  
             code = "";   
             var codeLength = 4;//验证码的长度 (可以任选的哦)
             var checkCode = document.getElementById("code");   
             var random = 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 index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）  
                code += random[index];//根据索引取得随机数加到code上  
            }  
            checkCode.value = code;//把code值赋给验证码  
        }  
        //校验验证码  
        function validate(){  
            var inputCode = document.getElementById("input").value.toUpperCase();      
            if(inputCode.length <= 0) {   
                alert("请输入验证码"); 
            }         
            else if(inputCode != code ) {
                alert("验证码输入错误");
                createCode();//刷新验证码  
                document.getElementById("input").value = "";//清空文本框  
            }         
            else { //输入正确时  
                alert("输入正确"); 
            }             
        }