Laravel学习之旅(四) 登陆验证码加记住密码篇

首先我们需要composer安装captcha插件

$ composer require "mews/captcha:~2.0"

然后在你需要使用的控制器中加入下方代码

$rules = [
    "captcha" => 'required|captcha'
];
$messages = [
    'captcha.required' => '请输入验证码',
    'captcha.captcha' => '验证码错误，请重试'
];

$params = $_REQUEST['data'];//接收的登陆参数
$validator = Validator::make($params, $rules, $messages);
if($validator->fails()) {
    return success(false,'',0,'验证码错误');
}

 

页面代码：

<input type="text" name="captcha" lay-verify="required|captcha" placeholder="图形验证码" autocomplete="off" class="layui-input verification captcha" value="">
<div class="captcha-img">
    <img id="captchaPic" src="{{ captcha_src('flat') }}" onclick="this.src='/captcha/flat?'+Math.random()" title="点击图片重新获取验证码">
    @if ($errors->has('captcha'))
        <span class="invalid-feedback" role="alert">
        <strong>{{ $errors->first('captcha') }}</strong>
        </span>
    @endif
</div>

js部分：

 

界面:

 

如果你还要加上记住密码功能可以这样：

引入jquery.cookie.js

<script src="/layui/lib/jquery-3.4.1/jquery.cookie.js" charset="utf-8"></script>

然后

<div class="layui-form-item">
    <input type="checkbox" id="rememberMe" name="rememberMe" value="true" lay-skin="primary" title="记住密码">
</div>

if ($.cookie("rememberMe")) {
    $("#rememberMe").prop("checked", true);
    $("#username").val($.cookie("username"));
    $("#password").val($.cookie("password"));
}

//勾选记住密码
if (data.rememberMe) {
    var user_name = data.username;
    var user_password = data.password;
    $.cookie("rememberMe", "true", {
        expires: 7
    }); // 存储一个带7天期限的 cookie
    $.cookie("username", user_name, {
        expires: 7
    }); // 存储一个带7天期限的 cookie
    $.cookie("password", user_password, {
        expires: 7
    }); // 存储一个带7天期限的 cookie
} else {
    $.cookie("rememberMe", "false", {
        expires: -1
    }); // 删除 cookie
    $.cookie("username", '', {
        expires: -1
    });
    $.cookie("password", '', {
        expires: -1
    });
}