验证码

在登录时我们需要创建一个验证码,除了对input中的用户名和密码进行判断之外,同样也需要对输入的验证码进行判断,

并且,加入用户在输入验证码输错之后,要给出验证码错误的提示,同时要清空已经输入的验证码

前台创建一个form表单

                      <form class='dr' method="post">
                        <p>EDITION管理员后台登录</p>
                        <div class="lowin-group">
                            <label>用户名: <a href="#" class="login-back-link"></a></label>
                            <input id="username" type="text" name="username" class="lowin-input">
                        </div>

                        <div class="lowin-group password-group">
                            <label>密码: <a href="#" class="forgot-link"></a></label>
                            <input id="password" type="password" name="password" class="lowin-input">
                        </div>

                        <div class="lowin-group">
                            <label>验证码: <a href="#" class="login-back-link"></a></label>
                            <input id="captchatext" name="captcha" class="lowin-input" type="text" placeholder="验证码"
                                style="width:150px;">

                            <a id="kanbuq" href="javascript:;">看不清，换一张</a>
                            <img id="captcha" src="{:captcha_src()}">

                        </div>

                        <button class="lowin-btn login-btn" id="btn_dr" type="button">
                            登录
                        </button>

                        <div class="text-foot">
                            没有账号? <a href='{:url("admin/login/disp")}' class="register-link">立即注册</a>
                        </div>
                    </form>

js部分使用ajax进行发送请求

    <script>
        $(function () {        
            var imgsrc = $('#captcha').attr('src');  //获得img的src 
            $('#kanbuq').on('click', function () {      //点击进行图片的切换
                $('#captcha').attr('src', imgsrc + '?/a=' + Math.random());
            })

            $('#btn_dr').on('click', function () {

                $.ajax({
                    url: "{:url('admin/login/check')}",
                    type: "post",
                    data: $('.dr').serialize(),         // 序列化将这个表单内容进行发送
                    dataType: 'json',
                    success: function (res) {
                        if (res.status == 0) {
                            alert(res.msg);
                            window.location.href = "{:url('admin/main/index')}";      //登陆成功后进行跳转的地址
                        } else if (res.status == 1) {
                            alert(res.msg);
                            $('#captchatext').val(''),
                                $('#captcha').attr('src', imgsrc + '/?a=' + Math.random())     //此处是拼接一个随机数,时间不同的src,使图片切换

                        } else {
                            alert(res.msg);
                            $("#username").val('');
                            $("#password").val('');
                            $("#captchatext").val('');
                            $('#captcha').attr('src', imgsrc + '/?a=' + Math.random());
                        }
                    }
                })
            })
        })
    </script>

后台处理数据方法

 public function check(Request $request)
    {
        $status = null;
        $data = $request->param();
        // return $request;
        $username = $data['username'];
        $password = $data['password'];
        $validate = $this->validate($data, [
            'captcha|验证码' => 'require|captcha'
        ]);

        $res = User::get(['username' => $username]);

        if ($validate !== true) {
            $status = 1;
            $msg = '验证码错误';
        } elseif (is_null($res)) {
            $status = 2;
            $msg = '账号错误';
        } elseif ($res->password != $password) {
            $status = 3;
            $msg = '密码错误';
        } else {

            $status = 0;
            $msg = '登陆成功';
 
            Cookie::set('dml',$username);
            $res->save(['last_time' => time()]);
            session('user_id', $username);
            session('user_info', $data);
        }

        return ['status' => $status, 'msg' => $msg];    //返回处理结果
    }