码迷,mamicode.com
首页 > Web开发 > 详细

js验证码

时间:2015-04-12 19:13:13      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>idCode</title>
    <style>
        .code{
            font-family:Arial;  
            font-style:italic;  
            color:red;  
            border:0;  
            padding:2px 3px;  
            letter-spacing:3px;  
            font-weight:bold; 
            background: yellow;
            opacity: 0.8;
        }  
        #checkCode{
            width: 60px;
            text-align: center;
        }
   </style>
</head>
 
    <form action="#">  
        <input type="text" id="inValue">  
        <input type="text" readonly="readonly" id="checkCode" class="code">
        <br>
        <br>  
        <input id="btn" type="button" value="确定">   
    </form>
<script>
window.onload = function(){
    createCode();
    var checkCode = document.getElementById_x_x_x("checkCode");
    var btn = document.getElementById_x_x_x("btn");
    checkCode.onclick = function(){
        createCode();
    }
    btn.onclick = function(){
        validate();
    }
}
    var code;//在全局定义验证码  
    function createCode(){      
        code = "";//code存储字符串  
        var codeLength = 4;//验证码的长度   
        var selectChar = [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‘,‘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‘];//所有候选组成验证码的字符,当然也可以用中文的 
        var getRandomColor = function(){
            return ‘#‘+(Math.random()*0xffffff<<0).toString(16);
        }//随机生成背景颜色 
        for(var i=0; i <   codeLength; i ++)
        {  
            var charIndex = Math.floor(Math.random()*62);
            //alert(charIndex);  
            code += selectChar[charIndex];  
        }  
        //alert(code);  
        if(checkCode)  
        {  
            checkCode.style.background = getRandomColor();
            checkCode.value = code;  
        }  
    }  
 
    function validate(){   
        var inputCode = document. getElementById("inValue").value;  
        if(inputCode.length<=0)  
        {  
            alert("请输入验证码!");  
        }  
        else if(inputCode.toUpperCase()!=code.toUpperCase())  
        {  
            alert("验证码输入错误!");  
            createCode();//刷新验证码  
        }  
        else  
        {  
            alert("输入正确,验证成功");  
        }  
    }  
</script>
</body>
</html>

js验证码

标签:

原文地址:http://www.cnblogs.com/gyx19930120/p/4419980.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!