thinkphp验证码的实现(form、ajax实现验证)

2025-05-29 0 30

两种验证码验证实现,一种直接在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使用验证),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对快网idc网站的支持!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

快网idc优惠网 建站教程 thinkphp验证码的实现(form、ajax实现验证) https://www.kuaiidc.com/96801.html

相关文章

发表评论
暂无评论