当我们实现诸如会员注册功能时,通常会给出一个验证码和输入框,要求用户输入,以确认该用户的有效性。 这个功能在 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; ?> 这个功能简单,但是却很实用!