首先在Home/Controller下创建一个公共控制器PublicController / [) r2 f+ S b) G ` d
- <?php
( F; W% h. ?: n% \9 j - namespace Home\Controller; T1 [! ~% z+ w; W( g
- A- M0 `, I# f( H8 J1 L, }
- use Think\Controller;& o/ a2 P: }' Z- R6 y
- use Think\Verify;2 x( S n. {; P; l \& ~$ `8 b
- 1 a. K( F3 I- @7 C
- class PublicController extends Controller
% Q# h2 F8 W8 \- B; F' N - {
! Y$ ]0 r' y0 H
& [9 s' J! M& s- /* 生成验证码 */
& s7 \- v0 r- B5 n' ?: r( x/ r x - public function verify()
4 l& ?+ j, Z1 a+ m8 |1 F, r4 x4 H4 u - {3 ] Y4 B* j- d" j/ \9 ?' f
- $config = [2 a- ?1 D, I- ~8 y/ r5 i: O. X
- 'fontSize' => 19, // 验证码字体大小8 W; m5 t6 r5 u
- 'length' => 4, // 验证码位数
( r5 D/ P) z# x) C2 s - 'imageH' => 34
) a0 w% r+ y+ |7 c- A. L - ];/ Z2 x. d5 ^; N9 Y* f
- $Verify = new Verify($config);
2 w$ ~' b: k" G2 l& \/ c - $Verify->entry();; R/ I- ]- m# z# i* V- H
- }
0 C) Q# V, ]$ `* M- u
2 a6 D- m1 t( s" M A- /* 验证码校验 */
& `5 M4 I' n$ f; U# w/ |' l - public function check_verify($code, $id = '')3 l% P0 J6 A9 |5 ?
- { ~( [* x$ Z$ V* O7 r) R
- $verify = new \Think\Verify(); ~1 l; b+ [" O2 P7 g' b4 O% s
- $res = $verify->check($code, $id);
" _2 t% ^7 V7 [" | - $this->ajaxReturn($res, 'json');
2 x9 |+ o6 V8 k: A! e. P - }+ N7 }9 V" `) C
- }
复制代码
1 X. O. i7 f* C; F
3 @3 v/ z( c, {# K3 @/ Wverify函数用于生成验证码,config是用来配置显示验证码的属性。该属性有哪些可配置项,可以查看Thinkphp/Library/Think/Verify.class.php文件,此处不再赘述。# @4 `8 x r! _, a& ~! A
check_verify函数用于校验验证码的正确性。模板post用户填写的验证码到该函数,返回$res==true验证通过false验证失败。* X0 {. A& x7 v p( Y4 {7 E
前台模板页建立index.html1 ]; ~, d- c3 K! C
- <div class="">* W9 E4 t6 S9 l
- <label for="j_verify" class="t">验证码:</label> <input id="j_verify"
) ]# P, w3 Y3 G - name="j_verify" type="text" class="form-control x164 in">- E1 k( p7 y. k# N+ Q
- <img id="verify_img" alt="点击更换" title="点击更换"
' b6 Q. m( ^2 T3 K {' D - src="{:U('public/verify',array())}" class="m">
4 Y5 S+ O0 E( T0 E# Z; l* W! c# q - </div>
复制代码
5 R/ F0 \. o; T( Z4 A" u. p使用Thinkphp的U方法形成生成验证码的图片。 到此验证码即可正常显示。点击刷新验证码从上面产生验证码的链接我们可以看出,域名/public/verify即可产生验证码。Thinkphp的验证码生成机制是,如若我们需要产生新的验证码,在该链接后加入一个变量值即可。 我们可以考虑实现public/verify/变量值的形式URL。 - $("#verify_img").click(function() {
3 J5 p6 O3 H+ `/ l - var verifyURL = "public/verify";
3 [3 y; t% p- K+ b - var time = new Date().getTime();0 Y" s2 T& A/ C2 G$ _
- $("#verify_img").attr({* g6 H9 H+ R' s' n$ l' w1 D
- "src" : verifyURL + "/" + time
9 I$ j( g4 y, g" L6 j) X' S. [ - });
. s: ^$ ~" `2 Y- x - });
复制代码
" Q7 ?5 k" F% e, v利用JS获取当前时间戳加入到URL之后即可。 到此我们即可实现验证码的点击刷新功能。具体表现形式,自己随意哈。 异步校验验证码大家一定见过在某些网站,我们输入验证码的时候,输入的过程中文本框后面一直显示错误,直到我们输入争取的时候会先提示验证码正确的形式。下面代码就可以实现: $ q" l; s* w; }( |
- $("#j_verify").keyup(function() {
0 K& Y$ k3 n5 |. U - $.post("public/check_verify", {, O/ P# m& M' J4 {
- code : $("#j_verify").val()9 [( @. P8 E: E" C P& r
- }, function(data) {
9 R$ b1 b3 T$ V3 |) D- D, q `4 E; h - if (data == true) {$ ~# P- q# w% Z- |- \
- //验证码输入正确9 E6 u o- e) c) R# P; D
- } else {5 x, V' I$ b% E! d
- //验证码输入错误& _! _' A0 E& B B
- }
m2 k2 b2 p U; F" k, a# k" w - });
' @0 Q/ Z& t% K/ S3 ?* A0 o - });
复制代码
- G \/ f. `; W ?3 W1 u; K利用onekeyup。原理就不需要多讲了吧! 这样我们就可以实现在提交用户名密码之前先进行一次验证码校验,之后表单提交之后再进行一次校验,提升用户体验啦! 还没结束:当我们采取以上形式实现验证码两次校验的时候,肯定会出现第一次异步校验成功,但是提交表单却提示验证码错误的情况!其实原因还是出在Thinkphp的Verify.class.php上: 以下是该类初始的config配置: - protected $config = array(
) S( O% B4 ` T! J; |) Z - 'seKey' => 'ThinkPHP.CN', // 验证码加密密钥' s7 r" l% }% k4 K% e( Z
- 'codeSet' => '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY', // 验证码字符集合
8 o* \: Q. ?; F0 f/ Z9 u) k - 'expire' => 1800, // 验证码过期时间(s)
- y% |9 V, W& ] - 'useZh' => false, // 使用中文验证码 ' v) S# n$ y. M
- 'zhSet' => '……此处不粘贴了,太多了!', // 中文验证码字符串
5 u4 R* [ o) R# T( {1 E - 'useImgBg' => false, // 使用背景图片
, \3 K4 L2 k4 V! X. M" ? - 'fontSize' => 25, // 验证码字体大小(px)/ A8 f+ W- d% {: k1 N( a" @ C
- 'useCurve' => false, // 是否画混淆曲线6 A5 D) r8 N( C. y$ @
- 'useNoise' => false, // 是否添加杂点 ; O* w1 q7 x' F- \
- 'imageH' => 0, // 验证码图片高度8 N5 T2 M9 j. \. E( l
- 'imageW' => 0, // 验证码图片宽度
, v# q' m; L1 g. J/ P) Y: ^3 R# g) V - 'length' => 5, // 验证码位数1 z- X9 s# O0 t1 p+ D7 s# l: M
- 'fontttf' => '', // 验证码字体,不设置随机获取3 |6 b$ ^6 z* E
- 'bg' => array(243, 251, 254), // 背景颜色
/ ~7 k3 z3 Q- _; B& ^ - 'reset' => true, // 验证成功后是否重置* {2 I% P4 y" H' }0 `2 w
- );
复制代码
8 s2 F; A3 C' _请大家注意最后一个属性reset 表示的是验证成功后是否重置验证码。相信大家都明白了吧,我们进行第一次校验通过之后,其实该验证码已经失效了,只不过因为我们采取的是异步校验,页面并没有刷新,导致了第二次申请校验的时候和系统产生的已经是不相同的了。所以如果大家喜欢这种两次校验的风格,可以考虑将reset配置为false即可。 好了,基于Thinkphp3.2.3的验证码问题今天就总结到这了。只是大概说了一下实现方法,具体内容还请大家参考TP官方手册。如有错误之处,欢迎大家指出。
# d" |- J9 c* b4 t' L9 a |