首先在Home/Controller下创建一个公共控制器PublicController
D# E+ A' t: E1 O- <?php
9 ~& ?" u2 \7 S3 p: Z, L - namespace Home\Controller;
5 Z: R- r! }+ |- O' g# p$ \ q+ J0 K - . B& ?8 L" B) s" j5 I
- use Think\Controller;
+ l' K/ k; b$ X+ Y5 Y; L, m - use Think\Verify;0 Z- F, L$ P8 h: z
& ]: q/ C8 N7 `1 i' K# T9 w" B- class PublicController extends Controller' [6 e2 w( Y+ J+ i
- {
1 I; |# [* X4 ?6 g/ o - . w2 q6 S* d, J7 q
- /* 生成验证码 */! k& a0 Q: g8 Q( Y Y. Z
- public function verify()
' H( J; Z! j+ Z5 ` - {/ S t3 Q, m# k$ h! m
- $config = [
& I1 }2 H0 B1 N# H9 O - 'fontSize' => 19, // 验证码字体大小
- }1 _3 g) ]0 ^ - 'length' => 4, // 验证码位数( E! k1 K; g1 U+ d* H: `& b
- 'imageH' => 34 |+ o+ v: _' A1 h1 M
- ];9 q z6 H7 K$ I& X& D
- $Verify = new Verify($config);
4 z) I4 F; `. m - $Verify->entry();
7 s) G; }) D5 Z- Q - }) W; p6 H( i$ _
- + @4 i1 N7 C2 z# \0 c
- /* 验证码校验 */5 d+ `* y U, p
- public function check_verify($code, $id = '')7 T r$ Y: x8 P" f
- {* d3 B$ e& ?1 A) E1 e$ C' b0 d
- $verify = new \Think\Verify();- u' k5 I( {7 O
- $res = $verify->check($code, $id);
* S+ O. I4 q4 k - $this->ajaxReturn($res, 'json');# Z6 g& U( K/ p p/ \, @- p, x
- }+ a# h K; R2 Q$ w( G* j, Z
- }
复制代码
2 ~! K; d9 g i8 n( x# j/ K
/ p, g) a- s- D6 a" | \verify函数用于生成验证码,config是用来配置显示验证码的属性。该属性有哪些可配置项,可以查看Thinkphp/Library/Think/Verify.class.php文件,此处不再赘述。
" A# f0 f1 j: g2 @$ Q$ p: Ncheck_verify函数用于校验验证码的正确性。模板post用户填写的验证码到该函数,返回$res==true验证通过false验证失败。
# x. }' m6 D# W' Q4 `# o/ X前台模板页建立index.html5 S/ k$ }5 e3 h8 o# R
- <div class="">
- d5 M* I1 F5 s$ M- }; q( } - <label for="j_verify" class="t">验证码:</label> <input id="j_verify"
1 o8 {* g$ F+ P! T* }6 } - name="j_verify" type="text" class="form-control x164 in">' J* ~/ m0 B$ }5 ~1 J0 q2 s$ B
- <img id="verify_img" alt="点击更换" title="点击更换"4 |' L3 n& G M8 @" R: X
- src="{:U('public/verify',array())}" class="m">
2 W. G/ |/ z5 S/ R - </div>
复制代码
* G6 \$ I3 k+ P% t, t) H使用Thinkphp的U方法形成生成验证码的图片。 到此验证码即可正常显示。点击刷新验证码从上面产生验证码的链接我们可以看出,域名/public/verify即可产生验证码。Thinkphp的验证码生成机制是,如若我们需要产生新的验证码,在该链接后加入一个变量值即可。 我们可以考虑实现public/verify/变量值的形式URL。 - $("#verify_img").click(function() {. y3 \. L" t, @
- var verifyURL = "public/verify";9 J" j- L: ], r& a; S+ G0 h, C
- var time = new Date().getTime();
+ V' f7 G6 X' s' i- v- I - $("#verify_img").attr({ y' t# s. i& T* k+ |
- "src" : verifyURL + "/" + time o1 j0 A7 K' W$ Y9 T- U6 T
- });
& g) k) ?& z3 Z/ `: {: S - });
复制代码
1 s' A9 \+ o4 _/ @利用JS获取当前时间戳加入到URL之后即可。 到此我们即可实现验证码的点击刷新功能。具体表现形式,自己随意哈。 异步校验验证码大家一定见过在某些网站,我们输入验证码的时候,输入的过程中文本框后面一直显示错误,直到我们输入争取的时候会先提示验证码正确的形式。下面代码就可以实现:
. ^& f3 E# \6 p, ~2 h- $("#j_verify").keyup(function() {1 S$ l; d; C- t2 a, z
- $.post("public/check_verify", {$ [( p- U0 M" X/ ?+ U" H
- code : $("#j_verify").val()) H0 R/ O9 C; I- D0 Z2 ~
- }, function(data) {. {/ Z( q0 V( K$ ~( i! x# B
- if (data == true) {+ R# f/ ~$ q. I/ h
- //验证码输入正确5 S, E, \+ b" U) M5 P, x
- } else {% t4 W( I; E* b6 c6 a5 P
- //验证码输入错误2 }: _ Q, G6 ^+ x; E* d- V
- }6 `) v, z# ?: r0 Y
- });
! b' l4 T) k4 n- S - });
复制代码 ! P1 B5 N! @' m' `/ m, Q
利用onekeyup。原理就不需要多讲了吧! 这样我们就可以实现在提交用户名密码之前先进行一次验证码校验,之后表单提交之后再进行一次校验,提升用户体验啦! 还没结束:当我们采取以上形式实现验证码两次校验的时候,肯定会出现第一次异步校验成功,但是提交表单却提示验证码错误的情况!其实原因还是出在Thinkphp的Verify.class.php上: 以下是该类初始的config配置: - protected $config = array(" x+ G! ?$ f- r
- 'seKey' => 'ThinkPHP.CN', // 验证码加密密钥
* `$ U% Y+ S7 S; N, E - 'codeSet' => '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY', // 验证码字符集合
5 b# K7 s% T) d6 k$ f4 G4 `1 o3 X - 'expire' => 1800, // 验证码过期时间(s)
2 u- U8 g8 O) M! u! f5 C6 X! Z - 'useZh' => false, // 使用中文验证码 Q% j1 ^. u3 J; ~: n
- 'zhSet' => '……此处不粘贴了,太多了!', // 中文验证码字符串5 g7 ?# H0 g3 j c3 K! X+ _7 N
- 'useImgBg' => false, // 使用背景图片
. {; V( N3 T) K7 u. e: _ - 'fontSize' => 25, // 验证码字体大小(px)
8 a* r7 u7 n; e2 m - 'useCurve' => false, // 是否画混淆曲线7 u" }% a% I# l# }" R
- 'useNoise' => false, // 是否添加杂点
: P( \: R! _: l/ E% ~1 z1 Q - 'imageH' => 0, // 验证码图片高度. |. _# V" _% k9 t; I- k& m
- 'imageW' => 0, // 验证码图片宽度
9 H. Y- R- t9 f# @* A T) u" \ - 'length' => 5, // 验证码位数$ J& Z7 t7 P4 K) t/ W5 f. X1 o
- 'fontttf' => '', // 验证码字体,不设置随机获取
* Q) ]8 Y6 a8 C: [/ V2 S1 j' O - 'bg' => array(243, 251, 254), // 背景颜色
( C$ G/ ~% ~" B& ?0 a& j" a - 'reset' => true, // 验证成功后是否重置& y( w9 H! e7 f8 I3 A8 D
- );
复制代码
5 ^; K- }! V: M7 Y请大家注意最后一个属性reset 表示的是验证成功后是否重置验证码。相信大家都明白了吧,我们进行第一次校验通过之后,其实该验证码已经失效了,只不过因为我们采取的是异步校验,页面并没有刷新,导致了第二次申请校验的时候和系统产生的已经是不相同的了。所以如果大家喜欢这种两次校验的风格,可以考虑将reset配置为false即可。 好了,基于Thinkphp3.2.3的验证码问题今天就总结到这了。只是大概说了一下实现方法,具体内容还请大家参考TP官方手册。如有错误之处,欢迎大家指出。 1 ?6 W' u- V) Z: v! _7 o
|