验证码第一次异步校验成功，二次失败问题解决 - cncml手绘网

<?php
! \$ I# u) l4 U5 y" W4 O
namespace Home\Controller;+ j8 ?, a% k9 k( ?# `) d
$ G$ G. t7 J& R0 D" Q
use Think\Controller;% J& X' |8 A' q; _* C @
use Think\Verify;/ l, G( h( M- ~6 G, q- G+ B
9 D1 s4 \7 O# n" b C/ I8 a6 V) ]) Z
class PublicController extends Controller
" S$ S3 C; Z0 H: q' D
{
0 o% }* B% [1 S
2 ]3 p1 J5 f! S8 b
/* 生成验证码 */4 g0 D# c8 @5 L0 f7 q+ \! r( s! k
public function verify()4 w% z& H' ~% K/ @- I
{
1 \9 X) V/ V n9 ?
$config = [
! f, o3 ^; j/ @* L% W g
'fontSize' => 19, // 验证码字体大小
2 Z$ M( f1 U" E( @/ h
'length' => 4, // 验证码位数
4 m- t; r1 X% R2 x
'imageH' => 34
) Z/ a J' o: S4 z0 _/ u
];
& }* X0 f+ w5 v) W+ Q5 _* I4 K( r
$Verify = new Verify($config);8 D8 z, @; T- ?. Y' o- M
$Verify->entry();" W- Y4 k# j& a* `
}
4 F# M( e. ~2 K0 ^9 T, [! A6 C- b( F
D- z3 j. |/ f; n0 h1 A2 K
/* 验证码校验 */& y& b* d3 U0 `/ g% I
public function check_verify($code, $id = ''), e2 V0 s: K7 F# B, m0 ~# y0 @
{
+ k7 A7 u! G( Q
$verify = new \Think\Verify();& z6 C$ h5 a! g% W/ x
$res = $verify->check($code, $id);; x( T* D9 w# l7 A
$this->ajaxReturn($res, 'json');
# q& H8 h ~! s" ~- c
}
. ~7 K( V4 E( |8 x
}

复制代码

<div class="">
5 u+ J. T( v* L7 R# R6 Y
<label for="j_verify" class="t">验证码：</label> <input id="j_verify"$ w9 Z: T2 d! S
name="j_verify" type="text" class="form-control x164 in">/ @$ \6 \: L# k% T! x" X
<img id="verify_img" alt="点击更换" title="点击更换"- w$ W) I0 `3 Z2 v" Y( S5 e
src="{:U('public/verify',array())}" class="m">8 E- e) Z4 V5 B4 {: |2 h) {0 V* F7 W
</div>

复制代码

$("#verify_img").click(function() {7 n, N8 ?( c9 `' d, G/ E7 L
var verifyURL = "public/verify";5 H9 l# q! H% j
var time = new Date().getTime();
3 q2 ~- \7 i& I, B' m
$("#verify_img").attr({# F8 @1 i+ ^) k; b' c
"src" : verifyURL + "/" + time# z3 P. w, n+ ?& Q' t1 H* W! m& M
});
$ j+ h, p' y5 D+ o9 J
});

复制代码

$("#j_verify").keyup(function() {$ Y( y3 g1 `4 g6 V; M
$.post("public/check_verify", {# O6 h& k8 T. a2 ~# F7 y- I6 k) F
code : $("#j_verify").val()
! K% K0 Q0 m0 s o2 ^) n' e
}, function(data) {
9 @; G1 N; ?8 b
if (data == true) {
; Z! N z' x l( _
//验证码输入正确
( O9 `4 h; X; u
} else {
* _; u0 a* \& V2 }) {& ~+ {
//验证码输入错误
5 d/ o% W/ m6 _7 o" w
}
" G0 }/ X# c. ]. Q
});
. K, `, l! H" b; d- |
});

复制代码

protected $config = array(
; P9 ^( e! e% y2 ~' \3 m* k
'seKey' => 'ThinkPHP.CN', // 验证码加密密钥# K! j) _# q' [$ k8 g
'codeSet' => '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY', // 验证码字符集合
* I! J! T0 X. q+ U& Q+ Z8 {
'expire' => 1800, // 验证码过期时间（s）
/ q" N) d- n( T o4 w
'useZh' => false, // 使用中文验证码 + P! I" @+ L( _
'zhSet' => '……此处不粘贴了，太多了！', // 中文验证码字符串
9 V) B4 D" E& n+ ]
'useImgBg' => false, // 使用背景图片 6 C* ~( W9 J. }
'fontSize' => 25, // 验证码字体大小(px)" V4 j& E; t& t
'useCurve' => false, // 是否画混淆曲线
! d/ s$ N' H: ^/ D
'useNoise' => false, // 是否添加杂点 + C/ l7 \6 u- q
'imageH' => 0, // 验证码图片高度
/ f3 S" d* I& @6 A
'imageW' => 0, // 验证码图片宽度
: H) @, _$ F1 Z5 X) C3 A" U
'length' => 5, // 验证码位数* F" L6 p: R9 E3 f$ _
'fontttf' => '', // 验证码字体，不设置随机获取7 o- W: h* {$ m" o6 T
'bg' => array(243, 251, 254), // 背景颜色
: R- B, c4 R: u+ q& S
'reset' => true, // 验证成功后是否重置
+ M0 }& }/ _ }" ~( ^
);

复制代码

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