|
首先在Home/Controller下创建一个公共控制器PublicController
& S5 s6 _7 k* H. [4 Y- <?php
' ]( ]& E1 ~9 ? - namespace Home\Controller;
7 T4 M. A/ K. t, J/ x
. @1 E! B* ? H2 V$ ?- use Think\Controller;
- @- a. t( o4 I# B8 p7 I - use Think\Verify;
* c( l I* C9 l- [ - " X5 K% r3 Y8 Z6 [
- class PublicController extends Controller
. @0 |$ M9 E5 z7 g. i3 B - {
/ x6 O6 L! H6 Q- } - * L* u( J4 l: L; |2 v e
- /* 生成验证码 */) w! T+ Y* f" ?4 q5 j! v, i6 l6 t, }
- public function verify()+ _! \- e- e( v' Z
- {( e2 C0 [1 E" F7 M8 R
- $config = [
& k8 ?; q7 T6 U, b' K- S - 'fontSize' => 19, // 验证码字体大小2 s" V8 d& a4 D# V9 P6 ^, K; X
- 'length' => 4, // 验证码位数
~% q0 x! V [3 [ - 'imageH' => 34) H Q0 [! P3 m3 @- o
- ];
V* S: c$ [. J9 U3 u" I - $Verify = new Verify($config);" C4 g3 _! @/ a9 C
- $Verify->entry();& A+ u. S9 R, | E4 g
- }% g A5 h I% Y7 \
3 S5 K; M8 i" `- /* 验证码校验 */
) F" W5 D: ^8 P- j0 z - public function check_verify($code, $id = '')( G+ r+ ]0 ~* w; G- m+ |) P' |2 d+ w
- {' ~9 Z2 x+ G V2 t4 P& }
- $verify = new \Think\Verify();# j% z4 H) }9 `+ U: U
- $res = $verify->check($code, $id);
+ L: Z, v J) l$ C7 J: H - $this->ajaxReturn($res, 'json');
0 `. C# {9 N5 U" T2 B - }
2 V' F* R$ T+ h+ [, q" u# S- X+ \ - }
复制代码 & T' _0 g1 B' Z% m5 x; [
" }; v, }1 j3 b; o) X6 averify函数用于生成验证码,config是用来配置显示验证码的属性。该属性有哪些可配置项,可以查看Thinkphp/Library/Think/Verify.class.php文件,此处不再赘述。
5 ?) u$ i# S' echeck_verify函数用于校验验证码的正确性。模板post用户填写的验证码到该函数,返回$res==true验证通过false验证失败。8 l# a& ?5 \6 Q# i/ b
前台模板页建立index.html
2 K2 n- a6 } |' t7 \* p' f- <div class="">
; D' P, x2 i1 c/ N0 H, H0 ^, @ - <label for="j_verify" class="t">验证码:</label> <input id="j_verify"+ L$ R2 a U* D* t/ _
- name="j_verify" type="text" class="form-control x164 in">9 I5 G: ~. Z9 O4 w. _" [9 G% ?
- <img id="verify_img" alt="点击更换" title="点击更换"
/ W5 ~4 _1 Y: f - src="{:U('public/verify',array())}" class="m">
: I, |/ ~5 X5 ^2 B# e - </div>
复制代码
9 \, `& K4 D0 z* m使用Thinkphp的U方法形成生成验证码的图片。 到此验证码即可正常显示。点击刷新验证码从上面产生验证码的链接我们可以看出,域名/public/verify即可产生验证码。Thinkphp的验证码生成机制是,如若我们需要产生新的验证码,在该链接后加入一个变量值即可。 我们可以考虑实现public/verify/变量值的形式URL。 - $("#verify_img").click(function() {
; q; [3 Q. { U( G% _1 M6 S - var verifyURL = "public/verify";
: y+ b4 d! a& m& ?: S - var time = new Date().getTime();
% q: M! m3 G& x) {8 x% z& m - $("#verify_img").attr({
' S1 v5 P8 V# j2 e; o+ V' j8 ] - "src" : verifyURL + "/" + time
; }/ A2 [. t; q - });* ~, b3 F$ D* ?" n0 z' f. N7 }
- });
复制代码 ! }0 F7 v' S- z" r; J
利用JS获取当前时间戳加入到URL之后即可。 到此我们即可实现验证码的点击刷新功能。具体表现形式,自己随意哈。 异步校验验证码大家一定见过在某些网站,我们输入验证码的时候,输入的过程中文本框后面一直显示错误,直到我们输入争取的时候会先提示验证码正确的形式。下面代码就可以实现: 9 p3 W' M5 |% \
- $("#j_verify").keyup(function() {
) \6 S5 Y# l7 E9 X - $.post("public/check_verify", {
% Z/ {1 v1 U0 v8 Z/ C m - code : $("#j_verify").val()
$ {9 v6 B0 d- \4 ? - }, function(data) {: |3 X; l* T2 G3 I, ?
- if (data == true) {
- h8 C( Z5 g3 ~2 s( i - //验证码输入正确
2 R/ U0 ~! ~2 J9 N - } else {
- I, |: A, A8 c1 ]; h - //验证码输入错误
: w- t" o3 S# U& Z" ?% o, x5 x - }; l2 N0 Z2 \( J S
- });4 K) O9 p7 d) n6 u+ V! ^. f9 ?6 A
- });
复制代码
5 p/ T2 W" A7 B利用onekeyup。原理就不需要多讲了吧! 这样我们就可以实现在提交用户名密码之前先进行一次验证码校验,之后表单提交之后再进行一次校验,提升用户体验啦! 还没结束:当我们采取以上形式实现验证码两次校验的时候,肯定会出现第一次异步校验成功,但是提交表单却提示验证码错误的情况!其实原因还是出在Thinkphp的Verify.class.php上: 以下是该类初始的config配置: - protected $config = array(
7 |/ q6 ^& g L1 N$ A. Z) w% ~ - 'seKey' => 'ThinkPHP.CN', // 验证码加密密钥$ b4 O. }' r: o* o
- 'codeSet' => '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY', // 验证码字符集合' w; V: `' o( E9 U5 y" Z, {
- 'expire' => 1800, // 验证码过期时间(s)# q$ v' C, j' I$ j# f9 i$ \+ N; ]
- 'useZh' => false, // 使用中文验证码
8 w; }- g' R, w - 'zhSet' => '……此处不粘贴了,太多了!', // 中文验证码字符串
) f2 V' \2 y2 k" ?/ X - 'useImgBg' => false, // 使用背景图片
" E# p/ J0 m+ l4 m+ E - 'fontSize' => 25, // 验证码字体大小(px); Q @2 E2 ?1 R4 U. J2 ?+ b: `2 O
- 'useCurve' => false, // 是否画混淆曲线
' ]5 s9 c. P7 B7 T: ? a5 g- p - 'useNoise' => false, // 是否添加杂点 1 z! C8 S' F. ~5 l p+ F7 g3 f i
- 'imageH' => 0, // 验证码图片高度
' ~$ z3 \9 O% N) ?5 O3 z - 'imageW' => 0, // 验证码图片宽度
. L1 k" q5 t: j3 W+ F1 s2 Z - 'length' => 5, // 验证码位数7 i& n4 m/ _' S' X1 d
- 'fontttf' => '', // 验证码字体,不设置随机获取
, v7 N! U, I! Z - 'bg' => array(243, 251, 254), // 背景颜色8 ]$ l. A; u+ V4 A! ]/ _+ S
- 'reset' => true, // 验证成功后是否重置
* q3 i) a0 O$ U/ A' h# s% x' L - );
复制代码 % u+ |( S3 b- h% S% U% ~% u D( s' ]& b
请大家注意最后一个属性reset 表示的是验证成功后是否重置验证码。相信大家都明白了吧,我们进行第一次校验通过之后,其实该验证码已经失效了,只不过因为我们采取的是异步校验,页面并没有刷新,导致了第二次申请校验的时候和系统产生的已经是不相同的了。所以如果大家喜欢这种两次校验的风格,可以考虑将reset配置为false即可。 好了,基于Thinkphp3.2.3的验证码问题今天就总结到这了。只是大概说了一下实现方法,具体内容还请大家参考TP官方手册。如有错误之处,欢迎大家指出。 / u" m9 s Y! L- Y+ d. g
|