js简单的验证码测试

最新推荐文章于 2024-08-22 15:49:37 发布

狼牙冷

最新推荐文章于 2024-08-22 15:49:37 发布

阅读量334

点赞数

分类专栏： JS HTML 文章标签： javascript html 验证码

本文链接：https://blog.csdn.net/jimolangyaleng/article/details/54137269

版权

JS 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

HTML

10 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

直接上代码:

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" οnclick="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("输入正确"); 
            }             
        }