jQuery实现登录验证码

最新推荐文章于 2024-04-23 16:26:38 发布

Jadon_z

最新推荐文章于 2024-04-23 16:26:38 发布

阅读量351

点赞数

分类专栏： web前端文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/Jadon_z/article/details/126433887

版权

web前端专栏收录该内容

38 篇文章 0 订阅

订阅专栏

HTML部分:

<body onload="createCode()">
    <!--在页面加载的同时要加载验证码，否则页面加载完后验证码不会显示 -->
    <p>
        <label> 验证码：</label>
    <div class="code" id="checkCode" onclick="createCode()"></div>
    </p>
    <p>
        <label>请输入验证码：</label><input id="YZ" name="yz" width="30px;">
    </p>
    <input class="btttom" type="button" name="OK" id="OK" onclick="GetDom()" value="确认" />

</body>

css部分：

    /*验证码*/
    .code {
        background-color: silver;
        font-family: Arial;
        /*设置字体*/
        font-style: initial;
        color: brown;
        font-size: 20px;    
        border: 0;
        padding: 2px 3px;
        letter-spacing: 3px;
        font-weight: bolder;
        width: 81px;
        height: 23px;
        margin-left: 120px;
        margin-top: -35px;
        cursor: pointer;
    }

    a {
        text-decoration: none;
        font-size: 12px;
        color: #288bc4;
    }

    a:hover {
        text-decoration: underline;
    }
    .yz {
        position: absolute;
        margin-left: 220px;
        margin-top: -10px;
    }

js部分:

<script src=" http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!--验证-->
<script>

    var code;
    function createCode() {  //函数体
        code = "";
        var codeLength = 5; //验证码的长度
        var checkCode = $('#checkCode');
        var codeChars = 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',
            '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 charNum = Math.floor(Math.random() * 52);//设置随机产生
            code += codeChars[charNum];
        }
        if (checkCode) {
            checkCode.addClass('code');
            checkCode.html(code) ;
        }
    }

    function GetDom() {
        if ($('#YZ').val() == "") {
            alert("验证码不能为空！");
            createCode();//输错一次或提交一次都将会刷新一次验证码
            return false; //结束本次会话
        } else if ($('#YZ').val().toUpperCase() != code.toUpperCase()) { //toUpperCase不区分大小写
            alert("您输入的验证码有误，请重新输入！！");
            createCode();//读取文件
        }
        else {
            alert("ok");
        }

    } 
</script>