tp5的验证码简单配置

最新推荐文章于 2022-03-28 16:22:21 发布

来日方长；

最新推荐文章于 2022-03-28 16:22:21 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/weixin_43023551/article/details/87938595

版权

最近做个项目有很多小细节准备都写下来方便
验证码是第一个让人很烦的小问题

第一种

 <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>