有基础的大牛可以去官网查看具体步骤
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' => '验证码错误']);}