- 广场
-
- 搜索中...
- 本文档内搜索
zxf/tools 使用手册
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
}
到此,基本已经结束,就是这么简单!
预览
其他说明[一般用不到,包内已经都处理完了]
获取验证码图片
$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"/>