从v2.5.6
版本起,SW-X内置了一个行为验证码类,基于\x\verify\Havior
类做驱动支持。
在使用创建行为验证码前,需要先使用php sw-x havior start
命令,安装框架提供的行为校验控制器。
点击前:
校验成功后:
前端依赖样式:
<!--Jquery组件-->
<script src="https://www.sw-x.cn/public/js/jquery.min.js"></script>
<!--JS组件-->
<script src="https://www.sw-x.cn/api/havior/swx_havior_captcha.js"></script>
<!--CSS样式-->
<link href="https://www.sw-x.cn/api/havior/swx_havior_captcha.css" rel="stylesheet">
依赖类:\x\verify\Havior
方法名:create()
返回值:验证码组件的HTML代码
参数:
string $key
swx_havior
依赖类:\x\verify\Havior
方法名:check()
返回值:bool
参数:
string $key
swx_havior
示例控制器代码:
namespace app\http;
use x\controller\Http;
class Index extends Http
{
/**
* @RequestMapping(route="/test", method="get", title="调用行为验证码的页面")
*/
public function index() {
// 生成行为验证码组件所需的HTML代码
$this->assign('havior', \x\verify\Havior::create('shop_havior'));
return $this->display();
}
/**
* @RequestMapping(route="/test_check", method="post", title="AJAX校验的接口")
*/
public function test_check() {
// 进行校验
$res = \x\verify\Havior::check('shop_havior');
if ($res === true) {
return $this->_json('200', '校验通过');
}
return $this->_json('301', $res);
}
// 假设这是你的接口返回值格式
private function _json($code, $msg, $data=null) {
return $this->fetch(json_encode([
'code' => "{$code}",
'msg' => $msg,
'data' => $data,
], JSON_UNESCAPED_UNICODE));
}
}
view
视图示例代码:
<html lang="en">
<head>
<!--Jquery组件-->
<script src="https://www.sw-x.cn/public/js/jquery.min.js"></script>
<!--JS组件-->
<script src="https://www.sw-x.cn/api/havior/swx_havior_captcha.js"></script>
<!--CSS样式-->
<link href="https://www.sw-x.cn/api/havior/swx_havior_captcha.css" rel="stylesheet">
</head>
<body>
<!--输出行为验证码-->
{$havior}
<!--下面模拟下接口提交-->
<button type="button">发送调试</button><script>
$("button").click(function(){
$.ajax({
url : "/test_check",
type : "post",
data : {},
success : function(arr){
var array = eval("("+arr+")");
// 调用 swx_vif_captcha() 刷新验证码
swx_vif_captcha();
alert(array.msg);
}
});
})
</script>
</body>
</html>