|
首先在Home/Controller下创建一个公共控制器PublicController & j2 ]2 @7 L" e5 T6 t! {! t
- <?php6 V( g; ?# W0 I
- namespace Home\Controller;
: I$ g8 \: | o9 n, P. i/ a - : |3 w; C8 e% r3 y
- use Think\Controller;
" i& h/ Q( }8 ?# {9 c0 a% D - use Think\Verify;0 N" O/ n1 I* ~; k7 j5 W
) u$ I. z# `$ E- class PublicController extends Controller2 ^* q9 J3 X) J) f5 Z( k
- {" ]' C' S' E8 J' T
- ! s6 o, O' c! w8 t# A7 F% @: Z
- /* 生成验证码 */
" ^& u: ]1 K' |5 Q8 p3 { - public function verify()) N# H- } t4 E2 U
- {* T' s: T! G4 P1 T/ K: ^
- $config = [6 Z2 L$ x( T/ R7 X7 j
- 'fontSize' => 19, // 验证码字体大小
8 C& W7 j% k4 t, d9 W - 'length' => 4, // 验证码位数
8 H1 a8 t$ J+ g' l3 x0 Q2 b& _ - 'imageH' => 34/ D5 p- x5 B* I- @$ I! v
- ];
3 I& b) E5 d1 n7 d0 C: \ - $Verify = new Verify($config);. S# u8 ?. u0 K' d; W
- $Verify->entry();
) h, v7 i& y6 N6 R/ J - }5 }0 _- z" V- W2 x O
- 9 M" d% Y4 }* s C; A5 f$ U% _
- /* 验证码校验 */( q" i: s/ E) K' z" s9 |
- public function check_verify($code, $id = '')
6 A9 ^6 l) I5 C" s P2 L; k - {
6 h4 K6 D9 R" m+ w; U. j - $verify = new \Think\Verify();
5 S6 W, a( z4 q) B& h4 B - $res = $verify->check($code, $id);
" r2 N3 I" b8 F8 e2 L - $this->ajaxReturn($res, 'json');
' }- K2 M6 B" e5 y - }
' K S" ^7 ~! F5 e9 h - }
复制代码 % [& x5 E m k, F
! n6 C) ?$ B9 ?6 I
verify函数用于生成验证码,config是用来配置显示验证码的属性。该属性有哪些可配置项,可以查看Thinkphp/Library/Think/Verify.class.php文件,此处不再赘述。 G* F4 S; Q! S& I6 ]
check_verify函数用于校验验证码的正确性。模板post用户填写的验证码到该函数,返回$res==true验证通过false验证失败。! G6 X, v: T* T$ `" G6 z
前台模板页建立index.html# @' ]' |: L, b
- <div class="">
# }( |5 g# }# `8 H* U# ?' _ - <label for="j_verify" class="t">验证码:</label> <input id="j_verify", {1 u/ l0 p# I2 q, X
- name="j_verify" type="text" class="form-control x164 in">; h' B+ i* Z+ ?; ?. c/ D
- <img id="verify_img" alt="点击更换" title="点击更换") A1 h2 z4 v, V- j
- src="{:U('public/verify',array())}" class="m">! q# N) g/ U& l: |. m. A; y
- </div>
复制代码
# u8 U9 }" D# d5 u/ a S# a! V使用Thinkphp的U方法形成生成验证码的图片。 到此验证码即可正常显示。点击刷新验证码从上面产生验证码的链接我们可以看出,域名/public/verify即可产生验证码。Thinkphp的验证码生成机制是,如若我们需要产生新的验证码,在该链接后加入一个变量值即可。 我们可以考虑实现public/verify/变量值的形式URL。 - $("#verify_img").click(function() {
( Q/ _7 y: Q6 g9 t: F2 b - var verifyURL = "public/verify";
! f! q) x- w) [! \9 p3 j - var time = new Date().getTime();
- F" M; S8 |$ n; i% m - $("#verify_img").attr({
1 X6 Q+ c# |2 J7 u0 A# \( D) F - "src" : verifyURL + "/" + time o% ` i, |/ Y3 w* b% q
- });8 F/ @$ k9 K! `
- });
复制代码
* F- _) l' x% v1 w利用JS获取当前时间戳加入到URL之后即可。 到此我们即可实现验证码的点击刷新功能。具体表现形式,自己随意哈。 异步校验验证码大家一定见过在某些网站,我们输入验证码的时候,输入的过程中文本框后面一直显示错误,直到我们输入争取的时候会先提示验证码正确的形式。下面代码就可以实现:
6 w1 u% P/ b3 D! ?# v- $("#j_verify").keyup(function() {( b2 G5 s3 f7 T
- $.post("public/check_verify", {
3 \# L' t: g. a( ^9 R3 h9 S. I - code : $("#j_verify").val(). w0 W" j A7 T" q- b, j/ o
- }, function(data) {
0 u( v& |1 D& p& Z - if (data == true) {
: e7 i( C1 Y# {8 s" ?4 O - //验证码输入正确
& F' J* e% ]) ]! n& Z' c% z! V - } else {
0 @) G+ r7 H" v- b - //验证码输入错误
) R. F$ ^& j6 v - }: U/ W# p. [% ^; Z" Z' q0 P
- });; @: _5 `2 I; x1 e, p }1 M9 R
- });
复制代码
5 o. L- i) N/ g3 h0 c) q利用onekeyup。原理就不需要多讲了吧! 这样我们就可以实现在提交用户名密码之前先进行一次验证码校验,之后表单提交之后再进行一次校验,提升用户体验啦! 还没结束:当我们采取以上形式实现验证码两次校验的时候,肯定会出现第一次异步校验成功,但是提交表单却提示验证码错误的情况!其实原因还是出在Thinkphp的Verify.class.php上: 以下是该类初始的config配置: - protected $config = array(
' ^; }/ Y$ f O - 'seKey' => 'ThinkPHP.CN', // 验证码加密密钥0 z. f8 r* a1 N; O3 j% R% x
- 'codeSet' => '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY', // 验证码字符集合
, Q( s6 R6 B0 b5 S& u - 'expire' => 1800, // 验证码过期时间(s)
8 l9 l% u7 u+ [6 ~ - 'useZh' => false, // 使用中文验证码 & }9 k& N, ?/ D. |% n8 k3 ~1 V/ t
- 'zhSet' => '……此处不粘贴了,太多了!', // 中文验证码字符串+ a6 r b9 R/ X
- 'useImgBg' => false, // 使用背景图片
$ Q$ T. V8 J2 k" p( [" U - 'fontSize' => 25, // 验证码字体大小(px)
1 V B5 w' [7 L2 l% z - 'useCurve' => false, // 是否画混淆曲线
+ f$ J5 h- `; e$ m - 'useNoise' => false, // 是否添加杂点 # I I% f4 ?3 f8 [. z5 u0 b g; f
- 'imageH' => 0, // 验证码图片高度
7 w9 X1 r: t- r2 N! i0 f0 G% x - 'imageW' => 0, // 验证码图片宽度
! v; K7 {6 d9 b; ~# c- D - 'length' => 5, // 验证码位数' R0 H8 L( c3 q2 q+ g8 e2 e
- 'fontttf' => '', // 验证码字体,不设置随机获取
7 ~+ \) A/ N9 m - 'bg' => array(243, 251, 254), // 背景颜色
9 g* j1 F3 m0 y/ l' s. v) I - 'reset' => true, // 验证成功后是否重置% x9 S+ k6 L/ p# @0 R/ i
- );
复制代码 - B% U4 m/ p5 e. t; Q3 r2 \5 x4 U
请大家注意最后一个属性reset 表示的是验证成功后是否重置验证码。相信大家都明白了吧,我们进行第一次校验通过之后,其实该验证码已经失效了,只不过因为我们采取的是异步校验,页面并没有刷新,导致了第二次申请校验的时候和系统产生的已经是不相同的了。所以如果大家喜欢这种两次校验的风格,可以考虑将reset配置为false即可。 好了,基于Thinkphp3.2.3的验证码问题今天就总结到这了。只是大概说了一下实现方法,具体内容还请大家参考TP官方手册。如有错误之处,欢迎大家指出。
8 s# o/ I3 A2 |6 G: q |