首先在Home/Controller下创建一个公共控制器PublicController
4 e2 ]! p; \! c7 i5 [- <?php
, H8 n; J; `/ Z' |8 d2 w1 S* H - namespace Home\Controller;
/ ^4 F( I+ w. i$ G) x% {
. g9 H0 m) _: e5 |6 U- use Think\Controller;
: l" w& X- w8 u" a% Y - use Think\Verify;; J% M# q- p6 i% E
' C7 J4 J6 I5 b& @: D- class PublicController extends Controller
( T1 c4 t# Y% P - {' W& H1 ?# e- ]: s
- / q, l; p% l6 m" r9 E. z0 |
- /* 生成验证码 */ p( |5 u- Q0 o& S" T) Z
- public function verify(), O) s1 n* s9 |
- {
0 r9 h0 ~9 t- C$ M3 h4 d - $config = [
3 }3 Z$ i, U6 U% S/ ^ - 'fontSize' => 19, // 验证码字体大小7 O# L& U9 ^' c2 ?8 _# i0 z" r
- 'length' => 4, // 验证码位数
! a' q3 B4 @3 C; J( j5 A Z - 'imageH' => 34
8 h5 N4 `$ o9 ^- K. n+ b - ];
- @. f! U$ a$ C" I" h M; |/ o - $Verify = new Verify($config);
/ k+ s* s/ T+ Y. S: X - $Verify->entry();
% p' v+ e! d, Q5 ]% ^# V/ u. j - }
# p# H' O$ T N0 Q2 f - 5 Y9 l, z1 b: c7 i( i
- /* 验证码校验 */ f! ^. L' }) x
- public function check_verify($code, $id = '')
1 ^6 r* {+ J0 V8 _% v- g% I - {, y1 W4 ]+ m* i9 z+ @
- $verify = new \Think\Verify();
% G- Q1 b8 @: d! ` - $res = $verify->check($code, $id);
' v& ?! u& a* B9 ^! ?3 r& `1 H - $this->ajaxReturn($res, 'json');
' f" l) T$ b1 y" m- W - }& B2 q" Y8 A6 r9 Z* a
- }
复制代码
. X. o& t F- k2 M% v0 H8 M1 l# m3 ^$ Y B, S& ?6 e4 @
verify函数用于生成验证码,config是用来配置显示验证码的属性。该属性有哪些可配置项,可以查看Thinkphp/Library/Think/Verify.class.php文件,此处不再赘述。$ J* l z0 K7 {
check_verify函数用于校验验证码的正确性。模板post用户填写的验证码到该函数,返回$res==true验证通过false验证失败。
\* k9 g1 P/ I前台模板页建立index.html
* I3 ~9 F+ j5 Q9 Y- <div class="">2 Q" B# ~1 j2 N" K! W" i' h- M% b
- <label for="j_verify" class="t">验证码:</label> <input id="j_verify"
3 {* u+ W, t7 y3 x. o - name="j_verify" type="text" class="form-control x164 in">2 p$ A) {9 N" }, O, \- M; {
- <img id="verify_img" alt="点击更换" title="点击更换"' J& A; s# o ~3 M$ A9 B/ q
- src="{:U('public/verify',array())}" class="m">. k1 i, w- w0 w: i2 z( B% F9 j& }8 @
- </div>
复制代码 0 |! c1 o% ^# [ m. ^
使用Thinkphp的U方法形成生成验证码的图片。 到此验证码即可正常显示。点击刷新验证码从上面产生验证码的链接我们可以看出,域名/public/verify即可产生验证码。Thinkphp的验证码生成机制是,如若我们需要产生新的验证码,在该链接后加入一个变量值即可。 我们可以考虑实现public/verify/变量值的形式URL。 - $("#verify_img").click(function() {) w' B3 w3 ?9 ` F3 a; m F
- var verifyURL = "public/verify";
8 I3 d- J+ a7 Q7 [1 }% v; B3 X% s - var time = new Date().getTime();
: [* u! ?3 ?+ b$ t0 D - $("#verify_img").attr({
) h/ C( w4 z$ T g - "src" : verifyURL + "/" + time1 f+ c0 R# l$ L
- });
' E+ I3 n' W2 d# I - });
复制代码 ' {; o7 f) l b- e8 p
利用JS获取当前时间戳加入到URL之后即可。 到此我们即可实现验证码的点击刷新功能。具体表现形式,自己随意哈。 异步校验验证码大家一定见过在某些网站,我们输入验证码的时候,输入的过程中文本框后面一直显示错误,直到我们输入争取的时候会先提示验证码正确的形式。下面代码就可以实现: . Q: f+ s+ O: c g( A) M9 r
- $("#j_verify").keyup(function() {
* g' W! z( v% i: {( y( B - $.post("public/check_verify", {
0 O. S4 l6 Y. }5 ?9 L( { - code : $("#j_verify").val()* q0 \/ K! [/ k, c2 f
- }, function(data) {! e' T- c/ C2 n5 e
- if (data == true) {/ ~2 I5 X {' @$ e5 S1 k u
- //验证码输入正确
; k; {& T+ a' Y6 D. `1 J" z) I( \/ Y - } else {$ |1 v$ j) k+ b; w$ h
- //验证码输入错误
' C3 p8 o7 E- l" I% D - }
3 Q. z! T7 U. S6 j3 r% o - });
2 ~" k! ?" c3 b$ u% t# d, }9 M/ | - });
复制代码
7 x$ [! s6 j6 a& U- k利用onekeyup。原理就不需要多讲了吧! 这样我们就可以实现在提交用户名密码之前先进行一次验证码校验,之后表单提交之后再进行一次校验,提升用户体验啦! 还没结束:当我们采取以上形式实现验证码两次校验的时候,肯定会出现第一次异步校验成功,但是提交表单却提示验证码错误的情况!其实原因还是出在Thinkphp的Verify.class.php上: 以下是该类初始的config配置: - protected $config = array(
, @1 P/ l- b' ?; J - 'seKey' => 'ThinkPHP.CN', // 验证码加密密钥
) v) C' P, f1 w! V) t# \ - 'codeSet' => '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY', // 验证码字符集合
) n" P9 n) W# ^3 ^* ]' [ - 'expire' => 1800, // 验证码过期时间(s)
x& H, a2 b* L! Q! w - 'useZh' => false, // 使用中文验证码
6 l7 t: c! E, @# W7 a - 'zhSet' => '……此处不粘贴了,太多了!', // 中文验证码字符串
$ V5 R) M( e* O) c - 'useImgBg' => false, // 使用背景图片
* w- P" m9 S! X% M - 'fontSize' => 25, // 验证码字体大小(px)6 D& B% H9 k& E: U$ b% K* ^! p6 X1 Y
- 'useCurve' => false, // 是否画混淆曲线9 ~& S- m, g/ _- k( [- G
- 'useNoise' => false, // 是否添加杂点
$ C6 q; U& Z; c8 k" x - 'imageH' => 0, // 验证码图片高度
+ X, |. W* X& E7 s: x - 'imageW' => 0, // 验证码图片宽度
4 \% }4 f. O$ R' ]9 q9 w - 'length' => 5, // 验证码位数
" d b( h6 N+ `. { - 'fontttf' => '', // 验证码字体,不设置随机获取
; N, `* C; `/ m. H6 A" G3 f - 'bg' => array(243, 251, 254), // 背景颜色3 o0 I% Y+ M. O0 p, j0 v
- 'reset' => true, // 验证成功后是否重置
* d* f( }0 ] A4 I - );
复制代码 " V: o: }3 g3 V9 L' K: d
请大家注意最后一个属性reset 表示的是验证成功后是否重置验证码。相信大家都明白了吧,我们进行第一次校验通过之后,其实该验证码已经失效了,只不过因为我们采取的是异步校验,页面并没有刷新,导致了第二次申请校验的时候和系统产生的已经是不相同的了。所以如果大家喜欢这种两次校验的风格,可以考虑将reset配置为false即可。 好了,基于Thinkphp3.2.3的验证码问题今天就总结到这了。只是大概说了一下实现方法,具体内容还请大家参考TP官方手册。如有错误之处,欢迎大家指出。 + ^% y4 Y$ E; T3 t
|