laravel中图片验证码以及错误处理

有基础的大牛可以去官网查看具体步骤

1.安装验证码扩展包

composer require mews/captcha

2.自动生成配置文件

php artisan vendor:publish

仔细选择对应的包序号，否则会全部给你装上

 3.修改config/captcha.php ,修改  flat  （你想选择的验证码类型）配置，一般验证码长度为 4

也可以修改长度，宽度，高度以及其他属性

 4.前端修改模板

<div class="form-group">
    <label for="captcha">验证码</label>
    <input style="width: 160px" type="text" class="form-control" id="captcha" placeholder="请输入验证码">
     <img class="thumbnail captcha mt-3 mb-2"  src="{{ captcha_src('flat') }}" title="点击图片重新获取验证码">
    @if ($errors->has('captcha'))
        <span class="invalid-feedback" role="alert">
       <strong>{{ $errors->first('captcha') }}</strong>
       </span>
    @endif
</div>

 5.后端控制器中加入验证

protected function validator(array $data)
    {
        return Validator::make($data, [
            'email' => ['required', 'string', 'email', 'max:255'],
            'password' => ['required', 'string', 'confirmed'],
            'captcha' => ['required', 'captcha'],
        ], [
            'captcha.required' => '验证码不能为空',
            'captcha.captcha' => '请输入正确的验证码',
        ]);
    }

6。结束

 

但是，我的项目基于学长的完成，所以需要验证错误时返回json数据

1.前端模板

<div class="form-group">
   <label for="captcha">验证码</label>
   <input style="width: 160px" type="text" class="form-control" id="captcha" placeholder="请输入验证码">
    <img class="thumbnail captcha mt-3 mb-2"  src="{{ captcha_src('flat') }}" title="点击图片重新获取验证码">
</div>

2.jQuery触发点击事件

$("#findPass").hide();
        $(".captcha").click(function () {
            $(".thumbnail").attr("src", '/captcha/flat?'+Math.random());
        });

3.后端controller进行验证，错误后返回json数据

        $rules =[
            'captcha' => 'captcha'
        ];
        $validate = Validator::make($request->all(), $rules); // 此处验证码只能使用validator检测
        if($validate->fails()){
            return response()->json([
                'status' => false,
                'info' => '验证码错误'
            ]);
        }

完成！