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="<{:captcha_src()}>" width="100px" height="40px" onclick="refreshVerify()">
<a id="kanbuq" href="javascript:refreshVerify()">看不清，换一张</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>
<!-- 验证码 -->

然后就可以了！