用 Zend_Dojo 实现 captcha 图片切换

当我们实现诸如会员注册功能时，通常会给出一个验证码和输入框，要求用户输入，以确认该用户的有效性。 这个功能在 Zend Framework 里面由 Zend_Captcha 组件提供，特别是 Zend_Captcha_Image，它允许用户把验证码用图片的形式展示出来。 如下图 ： 以下我要实现的就是，当我们点击上面图片时，图片会自动更新，就像通常我们在论坛注册时看到的那样。 为此，我们需要做一些前期工作。首先是准备好字体，这个可以在任何免费字体网站下载你喜欢的 ttf 字体。这里我下载了一种名为 Faktos 的字体，并放在 public/fonts/faktos/ 目录下 ： 这是作为图片里面的文字的默认字体。 此外，还要创建图片存放的文件夹，如本例中，我将把图片放在 public/img/captcha/ 目录下 ： 好了，接着就是代码了，在这里我使用了 Zend_Dojo ，通过它调用 Dojo toolkit 强大 Ajax 支持。文件一共两个，一个是 IndexController.php 控制器文件，另一个是 index.phtml 视图文件。下面是代码 ： // IndexController.php class IndexController extends Zend_Controller_Action { // 创建 form 和验证码输入框 public function indexAction() { $form = new Zend_Form(); $captcha = $this->createCaptcha(); $form->addElement($captcha); $this->view->captchaImageUrl = $captcha->getCaptcha()->getImgUrl() . $captcha->getCaptcha()->getId() . $captcha->getCaptcha()->getSuffix(); $this->view->formLogin = $form->render(); } // Ajax ： 输出的是新图片的路径 public function ajaxAction() { $captcha = $this->createCaptcha()->getCaptcha(); $captcha->generate(); echo $captcha->getImgUrl() . $captcha->getId() . $captcha->getSuffix(); die; } // 创建 captcha 验证码输入框 public function createCaptcha() { // 验证码的修饰器，主要是添加 id 和 onclick 事件 $decorators = array( array('HtmlTag', array('tag' => 'div', 'id' => 'captchaId', 'onclick' => 'changeImage()')) ); $form = new Zend_Form(); // Zend_Captcha_Image : 图片存放在 public/img/captcha/ $captcha = $form->createElement('captcha', 'captcha', array( 'captcha' => array( 'captcha' => 'Image', 'wordLen' => 6, 'fontsize' => 20, 'width' => 200, 'height' => 100, 'dotNoiseLevel' => 2, 'timeout' => 300, 'font' => 'fonts/faktos/Faktos.ttf', 'imgDir' => './img/captcha/', 'imgUrl' => '/img/captcha/', ), 'decorators' => $decorators )); return $captcha; } } 视图中的 Dojo 用的是 CDN 1.3.1 版的，所以不需要其它操作，而直接粘贴就可以看到效果。 // index.phtml 视图文件 <?php // 通过 CDN 使用 Dojo 最新版本，并配置相关参数 $this->dojo()->enable() ->setCdnVersion('1.3.1') ->setDjConfigOption('parseOnLoad', true) ->setDjConfigOption('isDebug', false) ->setDjConfigOption('locale', 'zh'); // 输出 Dojo 内容，当然可以把这移到页面顶部输出 echo $this->dojo(); ?> <mce:script type="text/javascript"><!-- // changeImage 函数 function changeImage() { // 如果点击的是输入框，则不换图片 if (document.activeElement.id == 'captcha-input') { return false; } // Dojo 封装的 Ajax 方法 dojo.xhrGet( { // Url 响应 url: "/index/ajax", // 作为 text 处理 handleAs: "text", // 超时单位为微秒 timeout: 5000, // 成功返回响应时调用 load 方法 load: function(response, ioArgs) { // 查找原图片并更新其路径 dojo.query("img", document.getElementById("captchaId")).forEach( function(selectTag) { if (selectTag.src.indexOf("<?php echo $this->captchaImageUrl; ?>")) { selectTag.src = response; } } ); return response; }, // 当发生错误时 error: function(response, ioArgs) { console.error("HTTP status code: ", ioArgs.xhr.status); return response; } }); } // --></mce:script> <?php // 输出 form echo $this->formLogin; ?> 这个功能简单，但是却很实用！