其他分享
首页 > 其他分享> > 3.9 JS制作登录验证码

3.9 JS制作登录验证码

作者：互联网

制作登录验证码

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>用户登陆</title>
    <style>
        .content{
            width:400px;
            margin:200px auto;
            text-align:center;
            border-radius: 15px;
            padding:10px;
            background: #ECF0F1;
            font-size:20px;

        }
        .cl{
            font-size:30px;
        }
        .code{
            font-family:Arial;
            font-style:italic;
            color:blue;
            font-size:30px;
            border:0;
            padding:2px 3px;
            letter-spacing:3px;
            font-weight:bolder;
            float:left;
            cursor:pointer;
            width:150px;
            height:50px;
            line-height:60px;
            text-align:center;
            vertical-align:middle;
            background-color:#D8B7E3;
        }
        span {
            text-decoration:none;
            font-size:12px;
            color:#288bc4;
            padding-left:10px;
        }

        span:hover {
            text-decoration:underline;
            cursor:pointer;
        }

    </style>
</head>
<body>
   <div class="content">
	    <div class="cl">欢迎登陆</div>
	    <form action="dl.php" method="POST" id="form-submit">
	    <div style="margin:10px auto">
		    <label style="width:40px;">账户名：</label><input style="width:160px;" type="text" name="zh" />
	    </div>
	    <div style="margin:10px auto">
		    <label style="width:40px;">密&nbsp;码：</label><input style="width:160;" type="text" name="pw" />
	    </div>
       <div style="margin:10px auto">
            <table border="0" cellspacing="5" cellpadding="5" >
                <tr>
                    <td> <div id="checkCode" class="code"  onclick="createCode(4)" ></div></td>
                    <td> <span onclick="createCode(4)">看不清换一张</span></td>
                </tr>
                <tr>
                    <td>验证码：</td>
                    <td><input type="text" id="inputCode"  style="float:left;" /></td>
                </tr>
            </table>
        </div>
          <input style="width:40px;margin:10px auto"type="submit" onclick="validateCode()" value="提交"/>
	    </form>
   </div>
</body>
</html>
<script type="text/javascript">
    //页面加载时，生成随机验证码
    window.onload=function(){
     createCode(4);
    }

    //生成验证码的方法
    function createCode(length) {
        var code = "";
        var codeLength = parseInt(length); //验证码的长度
        var checkCode = document.getElementById("checkCode");
        //所有候选组成验证码的字符，当然也可以用中文的
        var codeChars = new Array('的','一','是','在','了','不','和','有','大','这','主','中','人','上','为','们','地','个','用','工','时','要','动','国','产','以','我','到','他','会','作','来','分','生','对','于','学','下','级','就','年','阶','义','发','成','部','民','可','出','能','方','进','同','行','面','说','种','过','命','度','革','而','多','子','后','自','社','加');
        //循环组成验证码的字符串
        for (var i = 0; i < codeLength; i++)
        {
            //获取随机验证码下标
            var charNum = Math.floor(Math.random() * 62);
            //组合成指定字符验证码
            code += codeChars[charNum];
        }
        if (checkCode)
        {
            //为验证码区域添加样式名
            checkCode.className = "code";
            //将生成验证码赋值到显示区
            checkCode.innerHTML = code;
        }
    }

    //检查验证码是否正确
    function validateCode()
    {
        var form_submit=document.getElementById('form-submit');
        //获取显示区生成的验证码
        var checkCode = document.getElementById("checkCode").innerHTML;
        //获取输入的验证码
        var inputCode = document.getElementById("inputCode").value;
        console.log(checkCode);
        console.log(inputCode);
        if (inputCode.length <= 0)
        {
            alert("请输入验证码！");
        }
        else if (inputCode.toUpperCase() != checkCode.toUpperCase())
        {
            alert("验证码输入有误！");
            createCode(4);
        }

    }

</script>

<?php
$username = $_POST['zh'];
$pwd = $_POST['pw'];
if ($username=='小脆筒' and $pwd =='123') {
    echo "<font color=red>登陆成功</font>";
}else{
    echo "登陆失败";
}
?>

如果觉得本文写得不错顺手点个赞感谢老铁！

标签：inputCode,code,checkCode,验证码,JS,var,font,3.9
来源： https://blog.csdn.net/weixin_46672830/article/details/117997302