前端验证码

最新推荐文章于 2024-06-20 12:21:03 发布

飞扬_柳絮

最新推荐文章于 2024-06-20 12:21:03 发布

阅读量373

点赞数

分类专栏： JavaScript 文章标签：验证码 javascript

本文链接：https://blog.csdn.net/tjcjava/article/details/78414691

版权

JavaScript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
	<script src="http://zeptojs.com/zepto.min.js"></script>
	<title>手机测试页</title>
	 <style type="text/css">  
        #code{  
            font-family:Arial;  
            font-style:italic;  
            font-weight:bold;  
            border:0;  
            letter-spacing:2px;  
            color:blue;  
        }  
    </style>  
</head>
<body>
    <div>  
        <input type = "text" id = "input"/>  
        <input type = "button" id="code" onclick="createCode()"/>  
        <input type = "button" value = "验证" onclick = "validate()"/>  
    </div>
    <script type="text/javascript">
          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) { //若输入的验证码长度为0  
                alert("请输入验证码！"); //则弹出请输入验证码  
            }         
            else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时  
                alert("验证码输入错误！@_@"); //则弹出验证码输入错误  
                createCode();//刷新验证码  
                document.getElementById("input").value = "";//清空文本框  
            }         
            else { //输入正确时  
                alert("^-^"); //弹出^-^  
            }             
        }  
    </script>
</body>
</html>

飞扬_柳絮

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端验证码

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" /> <script src="http://zeptojs.co
复制链接

扫一扫

专栏目录