PHP生成验证码并由JavaScript验证

原创

xlj

修改于 2021-07-13 18:09:54

1.9K0

修改于 2021-07-13 18:09:54

文章被收录于专栏：XLJ的技术专栏

简述

PHP生成验证码并由JavaScript验证，非常简单的例子，不建议商用仅供学习参考原理是使用PHP的随机生成数字函数，循环生成 4 个随机数字，放到span里面用 JavaScript 判断验证

开始

生成 4 个随机数字

for ($i = 0; $i < 4; $i++) {
    echo mt_rand(0, 9);
}

再判断

var yzm = document.getElementsByClassName('Yzm')[0];
var nr = document.getElementsByClassName('inputStyle')[0];

Button.onclick = function () {
    if (nr.value == yzm.innerText) {
        alert('正确');
    } else {
        alert('错误');
    }
}

完整实例 index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证码</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
        }

        body {
            font-size: 18px;
        }

        div#Main {
            width: 70%;
            margin: 6% auto;
        }

        .inputStyle {
            border: none;
            border: 1px solid #dddddd;
            padding: 6px 10px;
            border-radius: 2px;
            font-size: 20px;
            margin-top: 2px;
            vertical-align: middle;
        }

        #Button {
            margin-top: 2%;
            border: none;
            background-color: #ffffff;
            padding: 6px 20px;
            background-color: #1a53db;
            color: #ffffff;
        }

        .Yzm {
            display: inline-block;
            background-color: #000000;
            padding: 6px 10px;
            color: #ffffff;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div id="Main">
        <input type="text" class="inputStyle">
        <span class="Yzm"><?php
            for ($i = 0; $i < 4; $i++) {
                echo mt_rand(0, 9);
            }
        ?></span>
        <br>
        <button id="Button">提交</button>
    </div>

    <script>
        // 获取验证码
        var yzm = document.getElementsByClassName('Yzm')[0];
        var nr = document.getElementsByClassName('inputStyle')[0];

        Button.onclick = function () {
            if (nr.value == yzm.innerText) {
                alert('正确');
            } else {
                alert('错误');
            }
        }
    </script>
</body>
</html>

效果图