js生成验证码并验证

最新推荐文章于 2023-03-09 21:23:00 发布

大数据球球

最新推荐文章于 2023-03-09 21:23:00 发布

阅读量701

点赞数

分类专栏： js学习文章标签： js学习

js学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<pre class="javascript" name="code">var code ; //在全局定义验证码    
02.//产生验证码   
03.window.onload = function createCode(){  
04.     code = "";   
05.     var codeLength = 4;//验证码的长度   
06.     var checkCode = document.getElementById("checkCode");   
07.     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',  
08.     'S','T','U','V','W','X','Y','Z');//随机数   
09.     for(var i = 0; i < codeLength; i++) {//循环操作   
10.        var charIndex = Math.floor(Math.random()*36);//取得随机数的索引   
11.        code += random[charIndex];//根据索引取得随机数加到code上   
12.    }  
13.    checkCode.value = code;//把code值赋给验证码   
14.}  
15.//校验验证码   
16.function validate(){  
17.    var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写         
18.    if(inputCode.length <= 0) { //若输入的验证码长度为0   
19.        alert("请输入验证码！"); //则弹出请输入验证码   
20.    }         
21.    else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时   
22.        alert("验证码输入错误！"); //则弹出验证码输入错误   
23.        createCode();//刷新验证码    
24.    }         
25.    else { //输入正确时   
26.        alert("^-^"); //弹出^-^   
27.    }             
28.}

<html> 2. <head> 3. <title>验证码</title> 4. <style type="text/css"> 5. .code 6. { 7. font-family:Arial; 8. font-style:italic; 9. font-weight:bold; 10. border:0; 11. letter-spacing:3px; 12. color:blue; 13. } 14. </style> 15. <script type = "text/javascript" src = "checkCode.js"> 16. </script> 17. </head> 18. <body> 19. <div> 20. <input type = "text" id = "input"/> 21. <input type = "button" id="checkCode" class= "code" οnclick="createCode()"/> 22. <a href = "#" onclick = "createCode()">看不清楚</a><br> 23. <input type = "button" value = "验证" onclick = "validate()"/> 24. </div> 25. </body> 26.</html>

<html>  
02.    <head>  
03.        <title>验证码</title>  
04.        <style type="text/css">  
05.            .code  
06.            {  
07.                font-family:Arial;  
08.                font-style:italic;  
09.                font-weight:bold;  
10.                border:0;  
11.                letter-spacing:3px;  
12.                color:blue;  
13.            }  
14.        </style>  
15.        <script type = "text/javascript" src = "checkCode.js">  
16.        </script>  
17.    </head>  
18.    <body>  
19.        <div>  
20.            <input type = "text" id = "input"/>  
21.            <input type = "button" id="checkCode" class= "code" οnclick="createCode()"/>  
22.            <a href = "#" onclick = "createCode()">看不清楚</a><br>  
23.            <input type = "button" value = "验证" onclick = "validate()"/>  
24.        </div>  
25.    </body>  
26.</html>

checkCode.js

大数据球球

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js生成验证码并验证

var code ; //在全局定义验证码 02.//产生验证码 03.window.onload = function createCode(){ 04. code = ""; 05. var codeLength = 4;//验证码的长度 06. var checkCode = document.getElementById("checkC
复制链接

扫一扫