首先在Home/Controller下创建一个公共控制器PublicController
4 K; k/ k" s5 \- <?php8 y# ^& a# b* L) J9 j; E
- namespace Home\Controller;0 M$ s3 j7 e9 n! _
* q' Y3 d! z: j. y2 y0 r5 y0 z- use Think\Controller;( y) K) V" p7 z9 a' r
- use Think\Verify;
. d9 N( X: E6 G0 B( \; Y
9 o% w6 \; {" H& V/ J- class PublicController extends Controller
& p( t. _6 W: _/ g - {
7 J4 b2 O- J$ H9 K0 F8 U6 O; U* X
: \7 D, i" n+ N6 C- /* 生成验证码 */( R" e# Y: \5 v6 ? X( D
- public function verify()0 B* \! x! a5 v" z$ L6 Q
- {, e$ e; E; W+ k
- $config = [6 J# R$ G* W1 m
- 'fontSize' => 19, // 验证码字体大小
' @% W" w2 H8 x - 'length' => 4, // 验证码位数" y3 A% Y; V% p$ b
- 'imageH' => 34
) ~$ M4 A% }. ? - ];" _8 N0 v% F' i- U+ P6 W/ y: P
- $Verify = new Verify($config);& h' f1 U4 y" E* P
- $Verify->entry();8 M c- w# ~ [$ F$ m) W
- }
. S0 o4 @. r; f$ Z7 ]3 o - 4 }* d8 p& B, j2 R6 X
- /* 验证码校验 */+ N' |' a. d; M+ A& I5 H( v2 M
- public function check_verify($code, $id = '')$ i% E& s+ d2 ]% b6 G
- {
* ^' `) w5 Z+ [3 f8 p - $verify = new \Think\Verify();( I7 X& ^2 O1 f5 g: @
- $res = $verify->check($code, $id);0 O6 E, S. d9 r' S% r7 ^( h
- $this->ajaxReturn($res, 'json');
9 {' Y1 m' R+ e; [8 O - }. x- R7 K; i% I% ?
- }
复制代码
~, @/ y* j/ W+ r+ \7 A# B* T6 x0 @
verify函数用于生成验证码,config是用来配置显示验证码的属性。该属性有哪些可配置项,可以查看Thinkphp/Library/Think/Verify.class.php文件,此处不再赘述。4 n# E, j0 D# E+ S8 q. ]4 P
check_verify函数用于校验验证码的正确性。模板post用户填写的验证码到该函数,返回$res==true验证通过false验证失败。8 g. b9 V" e. e( w8 m
前台模板页建立index.html8 `# Q( S/ M! W( g) }. u; e
- <div class="">
! `; O7 O% `/ H: E# ^ - <label for="j_verify" class="t">验证码:</label> <input id="j_verify"/ w% A2 Z4 t0 N# j7 H
- name="j_verify" type="text" class="form-control x164 in">
" I$ O/ K' h- F* ~, B4 q) | - <img id="verify_img" alt="点击更换" title="点击更换"
4 y- `5 o8 o& {0 b3 _- p/ i - src="{:U('public/verify',array())}" class="m">0 G$ p7 V6 l% p8 `, x8 A' _
- </div>
复制代码
2 L( \( n5 v/ u3 I$ ?5 x2 m使用Thinkphp的U方法形成生成验证码的图片。 到此验证码即可正常显示。点击刷新验证码从上面产生验证码的链接我们可以看出,域名/public/verify即可产生验证码。Thinkphp的验证码生成机制是,如若我们需要产生新的验证码,在该链接后加入一个变量值即可。 我们可以考虑实现public/verify/变量值的形式URL。 - $("#verify_img").click(function() {
: f `/ i9 @3 ]- [1 @8 |, h0 m - var verifyURL = "public/verify";
o5 T, I) ]9 u% X - var time = new Date().getTime();- D) R0 Y0 @ N1 J0 [
- $("#verify_img").attr({
1 |0 T6 A/ M' j+ t& v- | - "src" : verifyURL + "/" + time
9 l& {7 ]0 c0 s - });/ h/ u/ m' X3 n
- });
复制代码
& A6 Y: @) S. Z2 B( E利用JS获取当前时间戳加入到URL之后即可。 到此我们即可实现验证码的点击刷新功能。具体表现形式,自己随意哈。 异步校验验证码大家一定见过在某些网站,我们输入验证码的时候,输入的过程中文本框后面一直显示错误,直到我们输入争取的时候会先提示验证码正确的形式。下面代码就可以实现:
6 D; l/ m" Z6 h! H( i- $("#j_verify").keyup(function() {
0 e5 f% i! b. `4 k. x! S+ p* A - $.post("public/check_verify", {
9 }! y: U. j) b' t# b - code : $("#j_verify").val()
# T4 |7 P# d, K$ d' s* o. x - }, function(data) {
: m* T$ z4 {' F6 I8 { - if (data == true) {" [' E0 @: q8 C/ e. n: W
- //验证码输入正确1 l5 }, G* W1 k: K
- } else {
# R) R8 _& o* }7 G2 b$ H0 P* t - //验证码输入错误5 o0 J% B( G# V9 A6 w) [& S
- }
$ K* c W5 U6 v) Q, f - });6 K- M, M- p. p' _9 e, g6 u' r
- });
复制代码 : ~; _0 R5 L/ ?5 }
利用onekeyup。原理就不需要多讲了吧! 这样我们就可以实现在提交用户名密码之前先进行一次验证码校验,之后表单提交之后再进行一次校验,提升用户体验啦! 还没结束:当我们采取以上形式实现验证码两次校验的时候,肯定会出现第一次异步校验成功,但是提交表单却提示验证码错误的情况!其实原因还是出在Thinkphp的Verify.class.php上: 以下是该类初始的config配置: - protected $config = array(
5 F6 w8 U: D" S, o - 'seKey' => 'ThinkPHP.CN', // 验证码加密密钥$ Z( B) r' d% P5 X) ^" V1 }% h/ _
- 'codeSet' => '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY', // 验证码字符集合
1 x L0 v3 k9 a5 p1 H* ` - 'expire' => 1800, // 验证码过期时间(s)
r5 d# W# |, P- l& t, F2 x8 l; p" i+ j - 'useZh' => false, // 使用中文验证码 1 u( S* S5 t3 Q" p9 {! @5 i
- 'zhSet' => '……此处不粘贴了,太多了!', // 中文验证码字符串
" o# Y5 K. L8 |) I) x - 'useImgBg' => false, // 使用背景图片 - P k+ e2 A' t% [0 K8 q' Z% c0 W$ C
- 'fontSize' => 25, // 验证码字体大小(px)# ~& F8 J* J! Y! ?# I# E
- 'useCurve' => false, // 是否画混淆曲线
. g$ G7 x4 a* U4 u" I - 'useNoise' => false, // 是否添加杂点
1 o) A$ p ?+ b: n( ?. W - 'imageH' => 0, // 验证码图片高度+ g" m8 I6 Q/ e L$ S. R3 ~
- 'imageW' => 0, // 验证码图片宽度
. g5 b( A+ b+ y8 S3 i( g, g - 'length' => 5, // 验证码位数
. y) l0 x2 ^; p7 n( y - 'fontttf' => '', // 验证码字体,不设置随机获取
5 ^' O7 D/ I; p, q# g - 'bg' => array(243, 251, 254), // 背景颜色
! T7 k& I' {( C3 Z# b* ` J - 'reset' => true, // 验证成功后是否重置
( ^! x" h# }: h- r - );
复制代码 2 Y" \$ H% a y/ {
请大家注意最后一个属性reset 表示的是验证成功后是否重置验证码。相信大家都明白了吧,我们进行第一次校验通过之后,其实该验证码已经失效了,只不过因为我们采取的是异步校验,页面并没有刷新,导致了第二次申请校验的时候和系统产生的已经是不相同的了。所以如果大家喜欢这种两次校验的风格,可以考虑将reset配置为false即可。 好了,基于Thinkphp3.2.3的验证码问题今天就总结到这了。只是大概说了一下实现方法,具体内容还请大家参考TP官方手册。如有错误之处,欢迎大家指出。
& W+ T* j7 r c! {( i |