最近做个项目有很多小细节 准备都写下来 方便
验证码是第一个让人很烦的小问题
第一种
<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 src="{:captcha_src()}" id="verify_img" alt="验证码" onclick="refreshVerify()"> <a id="kanbuq" href="javascript:;">看不清,换一张</a> </div>
<div class="formControls col-xs-8 col-xs-offset-3">
<label for="online">
<input type="checkbox" name="online" id="online" value="">
使我保持登录状态</label>
</div>
</div>
<script>
function refreshVerify() {
var ts = Date.parse(new Date())/1000;
$('#verify_img').attr("src","/captcha?id="+ts);
}
</script>
在tp的app\config.php文件中加入配置
'captcha' => [
// 验证码字符集合
'codeSet' => '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY',
// 验证码字体大小(px)
'fontSize' => 28,
// 是否画混淆曲线
'useCurve' => false,
// 验证码位数
'length' => 4,
// 验证成功后是否重置
'reset' => true
],
第二种验证码的方式
'captcha' => [
// 验证码字符集合
'codeSet' => '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY',
// 验证码字体大小(px)
'fontSize' => 18,
// 是否画混淆曲线
'useCurve' => false,
//使用中文验证码
'useZh' => false,
// 验证码图片高度
'imageH' => 40,
// 验证码图片宽度
'imageW' => 130,
// 验证码位数
'length' => 4,
// 验证成功后是否重置
'reset' => true
],
<div class="input-group">
<input type="text" name="captcha" class="form-control" placeholder="{:__('Captcha')}" data-rule="{:__('Captcha')}:required;length(4)" />
<span class="input-group-addon" style="padding:0;border:none;cursor:pointer;">
<img src="{:rtrim('__PUBLIC__', '/')}/index.php?s=/captcha" width="100" height="30" onclick="this.src = '{:rtrim('__PUBLIC__', '/')}/index.php?s=/captcha&r=' + Math.random();"/>
</span>
</div>
这两种效果都不错 可以的