laravel 验证码的验证,验证码的刷新

数据上传数据库,数据在视图显示,数据分页显示,项目
视图表单自动验证,项目

继续上边两个项目进行往下写。


验证码的相关操作:


验证码是区分人与计算机的图灵测试。


(1)安装扩展包 ,安装前确认当前环境支持composer


例如我的,laravel版本为7.1.3
在文件目录中打开命令行窗口,输入,composer require mews/captcha 回车,等在下载安装。
成功后就是下面这样。
在这里插入图片描述


(2)配置文件下/config/app.php文件


别名
在下面位置添加'Captcha'=>Mews\Captcha\Facades\captcha::class, 在这里插入图片描述


(3)再打开命令行窗口输入,php artisan vendor:publish输出,然后选择Mews/Captcha对应的那个数字(我的是10,,,然后回车就可以了)


生成配置文件**/config/captcha**
在这里插入图片描述


(4)访问一下,验证码图片就显示出来了


在这里插入图片描述
但是现在验证码的数量过多,修改刚才在命令行窗口的下载captcha文件,在/config/captcha里
修改验证码数字的长度,改成你需要色数字
在这里插入图片描述
再次访问就是4位了
在这里插入图片描述


(5)视图文件编写及验证


添加一个input控件,为他指定一个name属性,用来验证输入的验证码信息
再添加一个显示验证码的img控件
在这里插入图片描述
在控制器里添加用来验证的方法,

键captcha对应的是input控件里的name属性值。
给验证码文本输入框,添加不能为空(required),验证是否为验证码(captcha)
在这里插入图片描述


(6)访问视图文件,a.验证是否为空,b.和输入内容正确与否两个部分


首先验证是否为空,及提示信息:
如果此时不输入内容,进行提交,下面就会提示captcha不能为空,
我们需要对语言包文件进行修改配置,让他提示中文信息
在这里插入图片描述
修改语言包文件
添加captcha对应的中文提示信息
在这里插入图片描述
访问一下,此时就是修改成了中文提示,还有一个问题,就是,验证文本框输入的信息
在这里插入图片描述
验证输入内容是否正确
如果输入的内容和验证码内容不一样,要有提示验证码输入错误提示信息
但现在下面提示的是validation.captcha
在这里插入图片描述
还是继续修改(两种方式,一种在语言包,一种在控制器里添加)

第一种在validation语言包添加:'captcha' => ':attribute 验证码不匹配',

在这里插入图片描述
第二种方法
给控制器里的validate方法的第二个参数写提示信息,这两种方法,效果是一样的
在这里插入图片描述
以上两种用来判断输入内容是否和验证码一致的方法,使用一种即可。
验证一下,现在就提示上面设置的信息了

在这里插入图片描述


(7),实现点击验证码进行刷新的功能


在视图文件里添加下面js代码,用来实现点击更新

  • 使用jQuery
  • 引入jQuery的jQuery库
  • 编写一个事件,给img控件添加点击事件,实现点击刷新
<script type="text/javascript" src="https://php-acad.28sjw.com/Statics/Assets/js/jquery.min-3.2.1.js"></script>
<script type="text/javascript">
    $(function(){
        var url=$('img').attr('src');
        $('img').click(function(){
            $(this).attr('src',url+Math.random())
        })
    });
</script>
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值