验证码第一次异步校验成功，二次失败问题解决

admin · 发表于 2018-7-30 17:12:10

首先在Home/Controller下创建一个公共控制器PublicController

<?php& {. c7 t" R, m# W
namespace Home\Controller;
1 r/ B7 ]$ K3 U: Y1 @
& X* @# x( c! m- ?% R; ^7 {* m+ B
use Think\Controller;
. V$ b: y; ]. ]; V2 P9 X% m
use Think\Verify;( s3 B9 V) W$ ~2 e2 a7 z2 T
. W6 c3 s% N. E2 k! [
class PublicController extends Controller! ^! ^! M' g- I) T0 p2 k( g- g7 z
{9 @1 R+ |3 k5 v/ Y! k- D$ E
) A3 [+ H4 C; {3 J* o$ G
/* 生成验证码 */1 f; `$ w0 G0 E2 g+ \
public function verify()
9 G7 p2 V6 m* M# P3 H7 S9 z
{$ b# d* g6 G) ?" k
$config = [
7 {/ P S& i$ f5 P& x
'fontSize' => 19, // 验证码字体大小0 b; T/ s6 ?) L' D* G# {( o
'length' => 4, // 验证码位数
- ~" h, w* [+ j0 @4 ^
'imageH' => 34
! g% |/ I' \4 s7 C0 f
];3 c8 x- h, x0 s9 @) [3 g
$Verify = new Verify($config);
4 c+ U4 {, @ L
$Verify->entry();& {3 ~0 y$ q& T) d7 G1 {0 y) C
}
; r$ ~, I9 u# M
( a0 [0 I. u/ G% H
/* 验证码校验 */2 U: ]! J8 O6 ]
public function check_verify($code, $id = '')
p% r. g! H; U9 V( A$ w7 z) a
{ h$ p8 o5 s( e/ p. t$ S) I9 p
$verify = new \Think\Verify();
; ]4 X$ S5 u- ~% z2 N: N- ?/ }, |
$res = $verify->check($code, $id);
4 A" ~3 Q0 O( p( H t, S% W' L
$this->ajaxReturn($res, 'json');
3 M$ a6 T8 H$ ~
}$ i' h/ d9 y: Y$ C# d9 I- f( Y- u
}

复制代码

verify函数用于生成验证码，config是用来配置显示验证码的属性。该属性有哪些可配置项，可以查看Thinkphp/Library/Think/Verify.class.php文件，此处不再赘述。
check_verify函数用于校验验证码的正确性。模板post用户填写的验证码到该函数，返回$res==true验证通过false验证失败。
前台模板页建立index.html

<div class="">2 T- D* E! t2 F; b
<label for="j_verify" class="t">验证码：</label> <input id="j_verify"
) c- L( {$ U: p% `/ h
name="j_verify" type="text" class="form-control x164 in">
4 b, Q! w: ]9 \4 F' a% R8 f
<img id="verify_img" alt="点击更换" title="点击更换"
, ^' z X z' H
src="{:U('public/verify',array())}" class="m">
/ e- T% J3 H9 }; w0 P, ^: |& w
</div>

复制代码

使用Thinkphp的U方法形成生成验证码的图片。

到此验证码即可正常显示。点击刷新验证码

从上面产生验证码的链接我们可以看出，域名/public/verify即可产生验证码。Thinkphp的验证码生成机制是，如若我们需要产生新的验证码，在该链接后加入一个变量值即可。

我们可以考虑实现public/verify/变量值的形式URL。

$("#verify_img").click(function() {
' I3 w6 |9 v+ F4 G/ K% t
var verifyURL = "public/verify";
( j2 Q* O! f8 Q: j0 u( ?1 T
var time = new Date().getTime();
- Y, P( a5 f. Q x; U) ~
$("#verify_img").attr({
: L* | A2 T7 ^9 H+ ?, ]! T& o
"src" : verifyURL + "/" + time8 U9 S8 s* M X; D* \1 i' Z+ B' E( d
});$ |( v! }* W7 ^0 r: t: p. d
});

复制代码

利用JS获取当前时间戳加入到URL之后即可。

到此我们即可实现验证码的点击刷新功能。具体表现形式，自己随意哈。

异步校验验证码

大家一定见过在某些网站，我们输入验证码的时候，输入的过程中文本框后面一直显示错误，直到我们输入争取的时候会先提示验证码正确的形式。下面代码就可以实现：

$("#j_verify").keyup(function() {
, h5 y& s1 m" I' C% {
$.post("public/check_verify", {
1 P- x9 Y _# T$ i* X( u
code : $("#j_verify").val()
- y2 {$ t1 `' Q- C5 f
}, function(data) {4 ?$ `, i. h3 r& [
if (data == true) {' M3 z8 Z3 [1 Z* F \
//验证码输入正确8 \0 ]! I! n/ c9 c% r
} else {7 [& B* I% ^" o. g0 `
//验证码输入错误
0 Y6 o% i6 ?; V% |
}
- r! D f+ @/ [0 {1 ~5 ]
}); j# A! y7 Y6 G
});

复制代码

利用onekeyup。原理就不需要多讲了吧！

这样我们就可以实现在提交用户名密码之前先进行一次验证码校验，之后表单提交之后再进行一次校验，提升用户体验啦！

还没结束：

当我们采取以上形式实现验证码两次校验的时候，肯定会出现第一次异步校验成功，但是提交表单却提示验证码错误的情况！其实原因还是出在Thinkphp的Verify.class.php上：

以下是该类初始的config配置：

protected $config = array(
7 k+ r# o1 }& t# z$ {
'seKey' => 'ThinkPHP.CN', // 验证码加密密钥
& ]+ A) e# m' `. s: D
'codeSet' => '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY', // 验证码字符集合
/ s7 H8 K- y6 L- J6 _; [; \6 S
'expire' => 1800, // 验证码过期时间（s）7 o3 b% B2 S7 N3 s- E# G
'useZh' => false, // 使用中文验证码 4 I2 v% r% ~8 |7 r" S7 v) j
'zhSet' => '……此处不粘贴了，太多了！', // 中文验证码字符串: ~: ]- T% f/ ~! k
'useImgBg' => false, // 使用背景图片 2 Z/ K0 g P6 G- L
'fontSize' => 25, // 验证码字体大小(px)+ b+ _ a4 g ~/ [( [) y$ S7 q
'useCurve' => false, // 是否画混淆曲线" A; F$ L: ]- n
'useNoise' => false, // 是否添加杂点
6 I% V" Y ~# |% I/ u
'imageH' => 0, // 验证码图片高度
0 | P: a, Z& W+ J/ f: W: m
'imageW' => 0, // 验证码图片宽度% _2 C9 _" ], q2 k; U: o
'length' => 5, // 验证码位数
0 Z) N; E+ O7 b8 c; m/ T9 u6 j
'fontttf' => '', // 验证码字体，不设置随机获取
1 q! I1 m/ n% ?' L, `" E+ }8 L
'bg' => array(243, 251, 254), // 背景颜色- q: D" H0 n: O u* T) y" s
'reset' => true, // 验证成功后是否重置8 N7 q3 N; {2 a& d; V2 p, l0 P) Q
);

复制代码

请大家注意最后一个属性reset 表示的是验证成功后是否重置验证码。相信大家都明白了吧，我们进行第一次校验通过之后，其实该验证码已经失效了，只不过因为我们采取的是异步校验，页面并没有刷新，导致了第二次申请校验的时候和系统产生的已经是不相同的了。所以如果大家喜欢这种两次校验的风格，可以考虑将reset配置为false即可。

好了，基于Thinkphp3.2.3的验证码问题今天就总结到这了。只是大概说了一下实现方法，具体内容还请大家参考TP官方手册。如有错误之处，欢迎大家指出。

帐号		自动登录	找回密码
密码			立即注册

[thinkphp学习资料] 验证码第一次异步校验成功，二次失败问题解决