一开始是想通过jquery来实现验证码功能的。
也实现了。
验证码效果
但是发现不能很好的和php联动,我是想直接用js来判断是否正确而非进行提交,不能很好的达到我想要的效果,当然也可能是我没想到。

<script>
    var num_list=[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 num='';
    var num_len=5;
    function createnum(){
        for(let i =0;i<num_len;i++){
            let num_random = Math.floor(Math.random()*num_list.length)
            num = num+num_list[num_random];
        }
    }
    createnum();
    $('.right-num').val(num);

简单上一下jquery的代码,很简单,但是没有实现我想要的效果,所以放弃来使用php写。

其实php的思路和js是一样的,我们通过数组来创建组成的数据,然后设置随机数来随机选择。
之后将数据传入php即可。

<?php
    $numlist = 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');
    $num ='';
    $numlen=5;
    function createnum($numlist,$num,$numlen){
        for($i=0;$i<$numlen;$i++){
            $numrandom = rand(0,count($numlist)-1);
            $num=$num.$numlist[$numrandom];
        }
        return $num;
    }
    $num =createnum($numlist,$num,$numlen);
?>
<!-- 后台登陆页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>China-news-admin</title>
    <link rel="stylesheet" href="../news/css/index.css">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="../news/css/login-css.css">
</head>
<body>
    <div class='login'>
        <h2>管理员登录</h2>
        <form action="" method="post" class='login-form'>
            用户名:<input type="text" name="userName" id="userName"><br>
            密&nbsp;&nbsp;码: <input type="password" name="pwd" id="pwd"><br>
            验证码:<input type="text" name='num' class='num'><br>
            验证码:<input type='text' name='right-num' class='right-num' value='<?php echo $num; ?>'></input>
            <br>
            <input type="submit" value="登录" name="sublime" id="login">
        </form>
    </div>
    <?php
        if (isset($_POST["sublime"])) {
            include("config.php");
            $userName = $_POST["userName"];
            $pwd = $_POST["pwd"];
            $inputnum=strtolower($_POST['num']);
            $num = strtolower($_POST['right-num']);
            if($inputnum==null){
                echo '<script>alert("验证码不能为空")</script>';
            }
            elseif($inputnum!=$num){
                echo '<script>alert("验证码错误")</script>';
            }
            elseif($inputnum==$num){
                if ($userName==null) {
                    echo '<script>alert("用户名不能为空")</script>';
                } elseif ($pwd==null) {
                    echo '<script>alert("密码不能为空")</script>';
                } elseif ($userName!=null) {
                    $sql = "select * from admin where username='$userName'";
                    $sth = mysqli_query($connect, $sql);
                    $result = mysqli_fetch_all($sth, MYSQLI_ASSOC);
                    if ($pwd == $result[0]["userpwd"]) {
                        Header("Location:admin_index.php");
                    } else {
                        echo '<script>alert("密码错误")</script>';
                    }
                }
            }
        }
    ?>
    
</body>
</html>

我是直接将我的代码复制上来了,其实也就是前面创建出来这个数值,然后在验证码的地方输出,之后通过form表单提交数据,这里面有个很关键的地方就是传right-num数据,如果我们不传这个数据而是使用前面的$num的话,那么会造成$num为当前页面的数值,而我们提交的则是上一个,也就是说我们点击提交按钮后,数据发生了变化,我们提交的是之前的,而$num是提交后新生成的。所以我们就需要将之前生成的验证码也传入php中来进行判断。
然后就实现了验证码的功能,不过其实比较简陋,但是说实在的,验证码这个东西没啥卵用,防君子不防小人罢了。

最后修改:2021 年 05 月 28 日 11 : 02 AM
如果觉得我的文章对你有用,请随意赞赏