TnCode 滑动验证码

引入包：composer require zxf/tools

快速上手

前端页面

在页面中引用静态资源

composer 中已经封装好资源，下面的代码直接复制即可

<script src="/tn_code/assets/tn_code.min.js"></script>
<link href="/tn_code/assets/tn_code.min.css" rel="stylesheet">

页面中定义一个容器 .tncode(名称可随意起名) 传递给下面的 handleDom

<div class="tncode"></div>

在js 中添加事件

<script type="text/javascript">
    // 方式一：使用默认配置【建议方式】
	$TN.init();

    // 方式二：需要自定义配置
    $TN.init({
        handleDom:'.tncode', // 触发验证码容器
        getImgUrl:'/tn_code/get_img', // 获取验证码图片地址
        checkUrl:'/tn_code/check' // 验证地址
    }).onSuccess(function(){
        //验证通过
        console.log('验证通过')
    }).onFail(function(){
        //验证失败
        console.log('验证失败')
    });
</script>

在laravel中进行表单验证

在laravel中使用，已经内置了一个名为TnCode的专用验证规则，直接使用即可

public function form(Request $request)
{
    // 前提是初次验证已经通过此步骤才生效
    $request->validate([
        'tn_r' => 'required|TnCode',
    ], [
        'tn_r.required'   => '滑动验证码验证失败',
        'tn_r.TnCode' => 'TnCode 验证',
    ]);

    // TODO
}

到此，基本已经结束，就是这么简单！

预览

TnCode

其他说明[一般用不到，包内已经都处理完了]

获取验证码图片

$customConfig = [
    'slide_transparent_img' => dirname(__FILE__) . '/img/mark_01.png', // 自定义透明滑块图片
    'slide_dark_img'        => dirname(__FILE__) . '/img/mark_02.png', // 自定义黑色滑块图片
]

// 默认不需要传入配置
$tn = new \zxf\TnCode\TnCode();

// 如果需要自定义配置
$tn = new \zxf\TnCode\TnCode($customConfig);

// 默认生成图片
$tn->make();

// 如果需要自定义背景图片
$tn->make([
    'your/path/x.png',
    'your/path/xxx.png',
    'your/path/xxxx.png',
]);

初次验证

$tncode = new \zxf\TnCode\TnCode();
if ($tncode->check()) {
    $_SESSION['tncode_check'] = 'ok';
    echo "ok";
} else {
    $_SESSION['tncode_check'] = 'error';
    echo "error";
}
die;

二次验证【此步骤可选】【非强制】

在laravel中使用，已经内置了一个名为TnCode的专用验证规则，直接使用即可

public function form(Request $request)
{
    // 前提是初次验证已经通过此步骤才生效
    $request->validate([
        'tn_r' => 'required|TnCode',
    ], [
        'tn_r.required'   => '必填',
        'tn_r.TnCode' => 'TnCode 验证',
    ]);

    // TODO
}

加载 TnCode 的静态资源

仅可加载 TnCode 下 Resources 目录下的png、css、js 三种静态资源

<script src="/tn_code/assets/tn_code.min.js"></script>
<link href="/tn_code/assets/tn_code.min.css" rel="stylesheet">

<img src="/tn_code/assets/img/icon.png"/>

← 上一篇「RSA加密解密」