|
首先在Home/Controller下创建一个公共控制器PublicController
9 x! p8 j4 l) G# ]0 I- <?php' T5 s& E! g: H3 e
- namespace Home\Controller;8 d; r& N8 V2 k" B2 F: g
- 1 t' ]$ r" U! N5 N
- use Think\Controller;1 p" L* g) k. `+ [
- use Think\Verify;
( e7 V+ H0 u6 B$ k' y, v - 6 j1 b; v/ d9 w1 Z
- class PublicController extends Controller
# B9 H' l, B: t. p: N - {0 k7 o4 u6 T; e% h$ f$ q
. v. m1 i7 F9 L4 P/ ^& F- /* 生成验证码 */* Y; @( V3 h" _; _" R: H
- public function verify(): B( L0 ~$ t- Q* K9 \; r1 U, |
- {, D) i- d2 \$ {8 }
- $config = [
/ I; {. \2 e) O g1 i4 V - 'fontSize' => 19, // 验证码字体大小8 s0 j& i2 \ `8 n
- 'length' => 4, // 验证码位数
2 _! M7 U7 [, ~/ \8 p/ r) i - 'imageH' => 34* p$ \2 S/ r* w6 a! I( G; N
- ];+ J7 J+ ]1 ?7 y) Y6 G7 p, q
- $Verify = new Verify($config);
) @& Q) }! a- {5 J2 T& a - $Verify->entry();
2 z- }1 V0 s+ z' r) v6 t( h. b - }0 Z) U _- E3 o- G8 l: W
- 1 g1 O% C0 M& w' a8 X
- /* 验证码校验 */
2 R1 \8 f r$ ?5 C |' n - public function check_verify($code, $id = '')
. v- j' c" \5 ^: e - {
% l- z4 a' `; u& | - $verify = new \Think\Verify();
4 _8 S) }" P5 T& z - $res = $verify->check($code, $id);
, I* W) Z9 b# H3 c - $this->ajaxReturn($res, 'json');1 T, x) A, _7 V: ?8 v7 U/ W* e
- }
6 }9 `! P5 E( T; q& n+ z# Z* | - }
复制代码 , l/ P1 W" A$ K$ A8 M, [. N: p
! M' l' Z+ J; ^% ~+ r% rverify函数用于生成验证码,config是用来配置显示验证码的属性。该属性有哪些可配置项,可以查看Thinkphp/Library/Think/Verify.class.php文件,此处不再赘述。( ^4 ^( e: ~; [+ f* ^
check_verify函数用于校验验证码的正确性。模板post用户填写的验证码到该函数,返回$res==true验证通过false验证失败。2 H" v+ w8 E. N
前台模板页建立index.html
a2 V8 E# L' g9 K+ S4 q- <div class="">
: L1 P7 A' ]; Q+ \5 v - <label for="j_verify" class="t">验证码:</label> <input id="j_verify"% \- d8 f2 v! k3 f# Q4 s
- name="j_verify" type="text" class="form-control x164 in">5 o: z" Z# S. h: U$ K
- <img id="verify_img" alt="点击更换" title="点击更换"
4 m* U5 J2 F& w% Q2 L - src="{:U('public/verify',array())}" class="m">
% M8 w' v1 _7 l8 K - </div>
复制代码
, `+ T" }# a# ^: {* N使用Thinkphp的U方法形成生成验证码的图片。 到此验证码即可正常显示。点击刷新验证码从上面产生验证码的链接我们可以看出,域名/public/verify即可产生验证码。Thinkphp的验证码生成机制是,如若我们需要产生新的验证码,在该链接后加入一个变量值即可。 我们可以考虑实现public/verify/变量值的形式URL。 - $("#verify_img").click(function() {: ?$ r7 f' Z( G% m& `
- var verifyURL = "public/verify";
0 O+ C9 y- \. t; I- m8 T; n - var time = new Date().getTime();
) h5 Q2 c" K, }4 ^8 Z - $("#verify_img").attr({
$ }& N# t6 d4 f2 ]+ i3 ? - "src" : verifyURL + "/" + time( n& c, \$ V0 s% N2 v6 t% f, H, }0 P
- });
+ z/ u) } a+ Q B: u - });
复制代码
( L( v6 h6 ^5 x J! i3 i* e( B8 s- V利用JS获取当前时间戳加入到URL之后即可。 到此我们即可实现验证码的点击刷新功能。具体表现形式,自己随意哈。 异步校验验证码大家一定见过在某些网站,我们输入验证码的时候,输入的过程中文本框后面一直显示错误,直到我们输入争取的时候会先提示验证码正确的形式。下面代码就可以实现: ' \9 Y( ]! Q% ~7 ~5 k& ^* b4 p* B
- $("#j_verify").keyup(function() {' C" E: ^) l2 I" S$ }( v' r3 Z
- $.post("public/check_verify", {5 O4 {* | ~8 U! @: v: C1 ~: D
- code : $("#j_verify").val()
9 s4 }% @$ g4 ^0 [6 k L - }, function(data) {
" d( y; o: I1 g1 C9 e/ r - if (data == true) {) q1 @0 r/ x' A" ?
- //验证码输入正确
8 R. E) ~" X9 C2 l! I - } else {9 ~4 Q" u2 B/ R- {5 m
- //验证码输入错误
' C- Z! t1 g) u U - }1 ~- v% f" m- E4 C6 L& L
- });+ \8 A9 Q& S9 @: i: \
- });
复制代码
6 B) N8 Q Q0 e, I/ f利用onekeyup。原理就不需要多讲了吧! 这样我们就可以实现在提交用户名密码之前先进行一次验证码校验,之后表单提交之后再进行一次校验,提升用户体验啦! 还没结束:当我们采取以上形式实现验证码两次校验的时候,肯定会出现第一次异步校验成功,但是提交表单却提示验证码错误的情况!其实原因还是出在Thinkphp的Verify.class.php上: 以下是该类初始的config配置: - protected $config = array(& m& e6 |; Y2 l+ G( y
- 'seKey' => 'ThinkPHP.CN', // 验证码加密密钥
4 c8 _" k0 r1 z6 H - 'codeSet' => '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY', // 验证码字符集合' A# O9 U$ e( R" ?
- 'expire' => 1800, // 验证码过期时间(s)
" v, m" E& d1 E - 'useZh' => false, // 使用中文验证码 % ]+ p- s" D x5 @% V
- 'zhSet' => '……此处不粘贴了,太多了!', // 中文验证码字符串+ q E( \4 h7 Z" z
- 'useImgBg' => false, // 使用背景图片 & D- s/ t3 l( D/ N. |$ W/ o! [( z
- 'fontSize' => 25, // 验证码字体大小(px)! w) D/ X% O7 m& t
- 'useCurve' => false, // 是否画混淆曲线
/ q. c9 y) N$ B+ e - 'useNoise' => false, // 是否添加杂点
" f( B( U7 K+ b/ q, T, G - 'imageH' => 0, // 验证码图片高度
3 C/ K: q& [3 X: c1 \( B e0 u - 'imageW' => 0, // 验证码图片宽度
, @/ O7 ?( U) u" C: e" Z - 'length' => 5, // 验证码位数: X9 w* S7 h6 k9 p L
- 'fontttf' => '', // 验证码字体,不设置随机获取% c: X$ i. A l3 F
- 'bg' => array(243, 251, 254), // 背景颜色2 E5 y! m5 J8 H! H
- 'reset' => true, // 验证成功后是否重置
( Q6 y) q% N" `$ o+ K6 q9 L - );
复制代码 ! e# {0 `0 Z F# \& v) N
请大家注意最后一个属性reset 表示的是验证成功后是否重置验证码。相信大家都明白了吧,我们进行第一次校验通过之后,其实该验证码已经失效了,只不过因为我们采取的是异步校验,页面并没有刷新,导致了第二次申请校验的时候和系统产生的已经是不相同的了。所以如果大家喜欢这种两次校验的风格,可以考虑将reset配置为false即可。 好了,基于Thinkphp3.2.3的验证码问题今天就总结到这了。只是大概说了一下实现方法,具体内容还请大家参考TP官方手册。如有错误之处,欢迎大家指出。 * M+ p& P2 ?% ^
|