|
首先在Home/Controller下创建一个公共控制器PublicController
, J; b9 f* t2 `; O# ?- <?php
, f R9 K6 u% } - namespace Home\Controller;" F% a+ G& t( f1 i$ p t
- ' ^/ H6 p5 i) [, ~1 w
- use Think\Controller;
( p; e3 I+ }- }, {. l7 F9 p) K1 b - use Think\Verify;/ G; G9 k+ L6 F( Y- g7 }( a- {
- % B( g h) m$ Z( C) n. ~
- class PublicController extends Controller1 _( e+ I+ a: Y: \& l
- {
8 q% h" x" t% _5 W$ y% u - . e, |6 E- C- V/ X3 w7 N" v: u+ _
- /* 生成验证码 */3 m6 N# Z1 k1 A% E* a. S, A
- public function verify()
9 E$ f, t5 `# D' ?3 c/ o% I - {
% J( g. r* x3 \- Z1 _ - $config = [" M) N5 U! h8 I
- 'fontSize' => 19, // 验证码字体大小9 u; _; r+ L1 H9 e. [- w5 C
- 'length' => 4, // 验证码位数; V5 U" Q1 z$ N8 {0 A" ?" C H! D
- 'imageH' => 349 z, D3 L, N8 w! e$ u$ N; g! P7 K
- ];
& h8 [) D+ C) W0 l! D - $Verify = new Verify($config);5 A6 r0 V6 {- m; u2 p9 s
- $Verify->entry();
* ?9 i6 N1 }1 G - }9 P( h5 C; N+ L2 y1 Y" V- M
8 \5 \! }, I- @- /* 验证码校验 */
* Z( k9 k0 U# ~0 k- ^ - public function check_verify($code, $id = ''); ~/ c; }) c o* R- b+ `
- {9 N# ^# C# E8 x M7 V
- $verify = new \Think\Verify();' {" g% d; H1 g, y3 L# Z4 J# e
- $res = $verify->check($code, $id);. ]# u- C+ u+ X: i0 n4 G
- $this->ajaxReturn($res, 'json');1 Y1 @% h8 W' y6 z
- }
" j" ^& {- X! X" R; O - }
复制代码 ' Y# N3 w0 i" H. ^& @: [
- _" v8 o) N. S' ?- Wverify函数用于生成验证码,config是用来配置显示验证码的属性。该属性有哪些可配置项,可以查看Thinkphp/Library/Think/Verify.class.php文件,此处不再赘述。' i) w2 p0 ]8 g6 ]% _5 M) u
check_verify函数用于校验验证码的正确性。模板post用户填写的验证码到该函数,返回$res==true验证通过false验证失败。; b' K' M2 w4 I% `6 l: N4 }7 [
前台模板页建立index.html
' r" w) \1 R* ?' R/ w4 n, G- <div class="">' c6 e S* _6 | t6 m' \. v& Y
- <label for="j_verify" class="t">验证码:</label> <input id="j_verify"0 u0 T9 p& @/ |0 z
- name="j_verify" type="text" class="form-control x164 in">; `0 ?" `7 s# H; M
- <img id="verify_img" alt="点击更换" title="点击更换" B) Z: g" \) X2 @1 C3 ~% I
- src="{:U('public/verify',array())}" class="m">& i, w e; P& }9 C( G: G2 m
- </div>
复制代码
. I- ]( F$ E' M* t" {2 \2 N使用Thinkphp的U方法形成生成验证码的图片。 到此验证码即可正常显示。点击刷新验证码从上面产生验证码的链接我们可以看出,域名/public/verify即可产生验证码。Thinkphp的验证码生成机制是,如若我们需要产生新的验证码,在该链接后加入一个变量值即可。 我们可以考虑实现public/verify/变量值的形式URL。 - $("#verify_img").click(function() {
# V5 k! A6 }! U: \0 k1 E - var verifyURL = "public/verify";$ [. @! C# ]) e t2 p
- var time = new Date().getTime();
% r( \% \7 b' }7 n - $("#verify_img").attr({2 m# U1 o1 Y/ N# x8 [$ s
- "src" : verifyURL + "/" + time: \8 @& i6 L, A k8 d( Q/ U
- });7 y/ [. n5 B5 z" R5 C0 q6 q
- });
复制代码
+ P0 o( d: I3 b. P利用JS获取当前时间戳加入到URL之后即可。 到此我们即可实现验证码的点击刷新功能。具体表现形式,自己随意哈。 异步校验验证码大家一定见过在某些网站,我们输入验证码的时候,输入的过程中文本框后面一直显示错误,直到我们输入争取的时候会先提示验证码正确的形式。下面代码就可以实现: 1 }9 K* `* p8 p/ w0 ^7 A+ j, d
- $("#j_verify").keyup(function() {
* v! P) g% x/ { - $.post("public/check_verify", {
* D$ _! W% i5 S- M* E3 [7 n& Z# h - code : $("#j_verify").val()
3 S" M5 O2 b6 r8 C( j - }, function(data) {
, f9 \1 z) v. D$ G' G: A! m( A9 Y - if (data == true) {
2 R( Z! Y6 P* T# n9 l# X% l - //验证码输入正确
& M2 n4 e8 J0 J3 i! U - } else {
0 X( K B( z& I0 l! j0 C- b2 J/ R - //验证码输入错误# e+ ~" t( n" K d4 L% Z
- }
$ A$ B5 V) [* {6 Y! n - });. O# S( ]0 ?) E. j
- });
复制代码 * X) Y4 c( L; M
利用onekeyup。原理就不需要多讲了吧! 这样我们就可以实现在提交用户名密码之前先进行一次验证码校验,之后表单提交之后再进行一次校验,提升用户体验啦! 还没结束:当我们采取以上形式实现验证码两次校验的时候,肯定会出现第一次异步校验成功,但是提交表单却提示验证码错误的情况!其实原因还是出在Thinkphp的Verify.class.php上: 以下是该类初始的config配置: - protected $config = array(9 t2 h2 Z# V% e/ {. {3 L( C# a
- 'seKey' => 'ThinkPHP.CN', // 验证码加密密钥
/ }( G( j" B+ h - 'codeSet' => '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY', // 验证码字符集合9 b' _. r+ Z Y$ Q
- 'expire' => 1800, // 验证码过期时间(s)
. K. @+ ]3 c: Z+ c( @! H - 'useZh' => false, // 使用中文验证码 . l7 x9 X, G. ^0 L0 R) S
- 'zhSet' => '……此处不粘贴了,太多了!', // 中文验证码字符串
% r( o8 F: p. S4 ], ]6 i - 'useImgBg' => false, // 使用背景图片 $ B7 G# I# t1 t+ @
- 'fontSize' => 25, // 验证码字体大小(px)& e2 O. r) G& d% l& ?6 y# }
- 'useCurve' => false, // 是否画混淆曲线# [1 W& `( y6 T; ?' H" r5 V" A* g0 [
- 'useNoise' => false, // 是否添加杂点
+ g0 r- u0 Z( k2 u2 }. v - 'imageH' => 0, // 验证码图片高度
, S+ x/ T" a* U& m( N+ R) y - 'imageW' => 0, // 验证码图片宽度
5 Z; Y; V! ~( M- F - 'length' => 5, // 验证码位数" z8 v+ K" ]. f
- 'fontttf' => '', // 验证码字体,不设置随机获取' ^. ^5 B) B& T! R3 S8 @; T1 ^
- 'bg' => array(243, 251, 254), // 背景颜色, ~# c: ~9 }$ b
- 'reset' => true, // 验证成功后是否重置. T+ N/ D) D9 |: i( ~
- );
复制代码
" w3 z8 ^; t& ^ j7 \2 \8 ~请大家注意最后一个属性reset 表示的是验证成功后是否重置验证码。相信大家都明白了吧,我们进行第一次校验通过之后,其实该验证码已经失效了,只不过因为我们采取的是异步校验,页面并没有刷新,导致了第二次申请校验的时候和系统产生的已经是不相同的了。所以如果大家喜欢这种两次校验的风格,可以考虑将reset配置为false即可。 好了,基于Thinkphp3.2.3的验证码问题今天就总结到这了。只是大概说了一下实现方法,具体内容还请大家参考TP官方手册。如有错误之处,欢迎大家指出。 : {* `, X# `0 l% \7 a! N
|