THINKPHP之最简单的验证码搭建_$('#captchapic').attr()-优快云博客

本文详细介绍如何使用HTML创建登录页面，并集成了验证码功能。包括前端界面设计、验证码刷新事件定义、后端验证流程及代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、建立html页面：重要内容

<div class="login">
    <h1 style="margin-bottom: 40px;"></h1>
    <form method="post"  class="layui-form">
        <input type="text" name="access" lay-verify="title"  placeholder="用户名"  class="layui-input"  />
        <input type="password" name="passwd" lay-verify="title"  placeholder="密码"  class="layui-input" />
        <div  class="layui-row" >
            <div class="layui-col-xs6">
                <input type="text" class="layui-input" lay-verify="title"    placeholder="验证码"   name="code">
            </div>
            <div class="layui-col-xs6" id="captcha_image" >
                <img class="layui-input"  src="{:captcha_src()}" alt="captcha" />
            </div>
        </div>
        <button type="submit"lay-submit="" lay-filter="demo1" class="btn btn-primary btn-block btn-large">登录</button>
    </form>
</div>

上面如下图：2、定义点击刷新的事件：

   $(function () {
        //刷新验证码
        $("#captcha_image").click(function(){
            $(this).find('img').attr('src','/captcha?r='+Math.random());
        });
    })

此时可以看一下有没有效果

3、后台进行验证：找到你提交验证的方法所在控制器，引入验证码类：

namespace app\admin\controller;

use think\Controller;

use think\captcha\Captcha;

Class Login extends Controller{

}

4、在登陆action方法里面进行校验：

 /**
     * 登陆处理
     */
        public function loginAction()
        {
            $errorModel = new \app\common\model\Error();
            $returnArray = array();
            $captcha = new Captcha();
            if(!empty($_POST['code']) && $captcha->check($_POST['code']))
            {
//验证码通过
                
            }else{
//验证码不对    
            }

        }

5、完成