码迷,mamicode.com
首页 > 其他好文 > 详细

tp5的验证码点击刷新&看不清 换一张

时间:2017-10-11 00:35:04      阅读:2532      评论:0      收藏:0      [点我收藏+]

标签:验证码   captcha   tp5   

tp5的验证码功能已经集成到框架的扩展之中了,只是官方手册上没有仔细的介绍,导致不知道该如何像tp3一样实现点击刷新验证码&更换验证,其实蛮简单的。

首先使用Composer安装think-captcha扩展包:

composer require topthink/think-captcha

请特别留意captcha的版本,tp5.0的版本是使用1.*,tp5.1的版本是使用2.*!

composer的时候最简单的方法是在composer.json 文件的require里面添加 "topthink/think-captcha":"1.*" 然后在命令行下面直接 composer update。


首先在模版文件中使用验证码,记得增加id属性:

    <div class="row cl">
        <div class="formControls col-xs-8 col-xs-offset-3">
          <input class="input-text size-L" type="text" placeholder="验证码" onblur="if(this.value==‘‘){this.value=‘验证码:‘}" onclick="if(this.value==‘验证码:‘){this.value=‘‘;}" value="验证码:" style="width:150px;">
          <img id="verify_img" src=\‘#\‘" /a> 
        </div>
      </div>

然后增加一段js:

<!-- 验证码 -->
<script>
    function refreshVerify() {
        var ts = Date.parse(new Date())/1000;
        $(‘#verify_img‘).attr("src", "/captcha?id="+ts);
    }
</script>
<!-- 验证码 -->

如果没有使用jquery的话,可以更改成:

<!-- 验证码 -->
<script>
    function refreshVerify() {
        var ts = Date.parse(new Date())/1000;
        var img = document.getElementById(‘verify_img‘);
        img.src = "/captcha?id="+ts;
    }
</script>
<!-- 验证码 -->


然后就可以了!

技术分享


本文出自 “为了以后-老K8” 博客,谢绝转载!

tp5的验证码点击刷新&看不清 换一张

标签:验证码   captcha   tp5   

原文地址:http://laok8.blog.51cto.com/4751263/1971255

(1)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!