PHP + jQuery 在前台实现验证码功能

一、HTML代码

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js验证码</title>
</head>
<body>
<div>
    <table border="1">
        <tr>
            <td>
                验证码：<input type="text" id="inputCode" placeholder="请输入验证码">
                <span id="verify" style="cursor: pointer;"></span>
            </td>
        </tr>
        <tr>
            <td><input type="button" id="sub" value="提交"></td>
        </tr>
    </table>
</div>
</body>
</html>

二、JavaScript代码

<script src="jQuery文件路径"></script>
<script type="text/javascript">
    var code;
    //自动加载方法生成验证码
    $(function () {
        //调用方法生成验证码
        createCode();
    });
    //通过点击生成验证码
    $("#verify").on("click",function () {
        //调用方法生成验证码
        createCode();
    });
    //生成验证码
    function createCode(){
        code = "";
        //验证码的长度
        var codeLength = 4;
        //所有候选组成验证码的字符
        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');

        for(var i = 0; i < codeLength; i++){
            var charNum = Math.floor(Math.random() * 36);
            code += codeChars[charNum];
        }
        //动态替换生成验证码
        $("#verify").text(code);
    }
    //提交验证
    $("#sub").on("click",function () {
        //获取用户输入的验证码
        var inputCode = $("#inputCode").val();
        if(inputCode != code){
            alert("验证码有误");
        }else{
            alert("验证码正确");
        }
    })
</script>

PHP + jQuery 在前台实现验证码功能

猜你喜欢