两种验证码验证实现,一种直接在form表单提交按钮实现验证,一种使用ajax传递参数实现验证:
1、直接在form表单提交按钮实现验证,在控制器VerifyController.class.php中写入如下代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
namespace Home\Controller;
use Think\Controller;
class VerifyController extends Controller {
public function index() {
$this ->display();
}
public function checkLogin() {
$verify = new \Think\Verify();
$code =I( 'post.verify' ); //表单验证码
if ( $verify ->check( $code )){
$this ->success( '验证码正确' );
} else {
$this ->error( '验证码错误' );
}
}
public function verify()
{
// 实例化Verify对象
$verify = new \Think\Verify();
// 配置验证码参数
$verify ->fontSize = 14; // 验证码字体大小
$verify ->length = 4; // 验证码位数
$verify ->imageH = 34; // 验证码高度
$verify ->useImgBg = true; // 开启验证码背景
$verify ->useNoise = false; // 关闭验证码干扰杂点
$verify ->entry();
}
}
|
在视图Verify/index.html中的代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8" >
</head>
<body>
<form action= "{:U('verify/checkLogin')}" method= "post" >
<div class = "form-group has-feedback" >
<input type= "text" name= "verify" id= "verify" placeholder= "验证码" style= "width:100px;" />
<span style= "right:120px;" ></span>
<img class = "verify" src= "{:U(verify)}" alt= "验证码" onClick= "this.src=this.src+'?'+Math.random()" />
</div>
<div class = "col-xs-4" >
<button type= "submit" >验证</button>
</div>
</form>
</body>
</html>
|
2、使用ajax传递参数实现验证,在控制器VerifyController.class.php中的代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
namespace Home\Controller;
use Think\Controller;
class VerifyController extends Controller {
public function index() {
$this ->display();
}
public function checkLogin() {
$verify = new \Think\Verify();
$code = $_POST [ 'code' ]; //ajax验证码获取
if ( $verify ->check( $code )){
$this ->ajaxReturn(1);
} else {
$this ->ajaxReturn(0);
}
}
public function verify()
{
// 实例化Verify对象
$verify = new \Think\Verify();
// 配置验证码参数
$verify ->fontSize = 14; // 验证码字体大小
$verify ->length = 4; // 验证码位数
$verify ->imageH = 34; // 验证码高度
$verify ->useImgBg = true; // 开启验证码背景
$verify ->useNoise = false; // 关闭验证码干扰杂点
$verify ->entry();
}
}
|
视图Verify/index.html中的代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8" >
<script src= "__JS__/jquery-2.1.0.min.js" ></script>
</head>
<body>
<form action= "{:U('verify/checkLogin')}" method= "post" >
<div class = "form-group has-feedback" >
<input type= "text" name= "verify" id= "verify" placeholder= "验证码" style= "width:100px;" />
<span style= "right:120px;" ></span>
<img class = "verify" src= "{:U(verify)}" alt= "验证码" onClick= "this.src=this.src+'?'+Math.random()" />
</div>
<div class = "col-xs-4" >
<button type= "button" id= "ver" >验证</button>
</div>
</form>
<script>
$(document).ready( function (){
/*ajax验证码*/
$( "#ver" ).click( function (){
var code=$( "#verify" ).val(); //获取输入验证码
var url=$( 'form' ).attr( 'action' ); //获取表单action的值
$.ajax({
type: "post" ,
url:url,
data:{ "code" :code},
error: function (request){
alert( "ajax错误" );
},
success: function (data){
if (data){
alert( "正确" )
} else {
alert( '错误' )
}
}
});
});
});
</script>
</body>
</html>
|
在第2种方法,不要忘记下载jquery.min.js文件下载地址:http://www.jq22.com/jquery-info122
在配置文件Common/conf/config.php中配置地址:
1
2
3
4
5
6
|
return array (
/*地址替换*/
'TMPL_PARSE_STRING' => array (
'__JS__' =>__ROOT__. '/Public/JS' ,
),
);
|
以上所述是小编给大家介绍的thinkphp验证码的实现(form、ajax使用验证),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持!