js验证码

最新推荐文章于 2025-05-23 10:08:07 发布

leedaning

最新推荐文章于 2025-05-23 10:08:07 发布

阅读量942

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js 验证码登录验证码

本文链接：https://blog.youkuaiyun.com/leedaning/article/details/45644075

js 专栏收录该内容

17 篇文章

订阅专栏

今天做登录这块用到了验证码的功能，以前没怎么留意过这块，今天做好了记下来跟大家分享下，同时也方便自己日后的回顾。
代码如下：


/*
 * js验证码
 */
function verifCode(){
    var verifCode = '';             //验证码
    var verifCodeLength = 4;        //验证码长度
    var selectNum = 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',
            '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 verifyCode_show = document.getElementById('verifCode_show');

    for(var i=0; i<verifCodeLength; i++){
        verifCode += selectNum[Math.round(Math.random()*selectNum.length)]; 
    }//end for

    verifyCode_show.innerHTML = verifCode;
}//end func verifCode()

/*
 * 验证验证码是否正确
 */
function verification(){
    var verifCode_show = document.getElementById('verifCode_show').innerHTML;
    var verify = document.getElementById('verify').value;

    alert('验证码：'+verifCode_show.toLowerCase());
    alert('输入的值：'+verify.toLowerCase());

    if(verifCode_show.length<0){
        verifCode();
        return false;
    }else if(verifCode_show.toLowerCase() != verify.toLowerCase()){     //先将字符串都转换为小写，以便忽略大小写进行比较
        alert('验证码错误！');
        return false;
    }else{
        alert('验证码正确！');
        return true;
    }
}//end func verification()

表单部分：

<div><span>验&nbsp;证&nbsp;码：</span>
                <input type="verify" name="verify" id="verify" onkeydown="javascript:butOnClick();"/>
                <span type="text" id="verifCode_show" style=''></span>
                <span id="verifCode_change" onclick="verifCode();">看不清楚，点击更换</span>
            </div>
            <input type="button" name="submit" value="提交" id="bsubmit" onclick="verification();"/>