- 前端显示:在自定义表单的页面上,让验证码图片和输入框显示出来。
- 后端验证:在用户提交表单后,服务器端验证用户输入的验证码是否正确。
第一步:准备工作(确保验证码功能已开启)
在修改代码之前,请确保你的 DedeCMS 后台已经开启了验证码功能,虽然自定义表单不直接使用会员系统的验证码,但它的底层机制是相通的,需要相关的全局配置支持。
-
登录你的 DedeCMS 后台。
-
进入【系统】->【系统基本参数】。
-
在左侧菜单选择【互动设置】。
-
找到并确保以下选项是“是”:
启用验证码:这个选项是总开关,必须开启。注册验证码:开启它。评论验证码:开启它。留言验证码:开启它。会员登录验证码:开启它。
为什么需要开启这些? DedeCMS 的验证码功能由一个统一的类库
safe_config.php和validatecode.php控制,虽然自定义表单不直接调用这些,但开启这些相关的验证码功能可以确保验证码的核心类文件被正确加载和初始化,避免后续出现类不存在的致命错误。
第二步:前端显示(修改模板文件)
这是最关键的一步,你需要找到并修改你自定义表单所使用的模板文件。
-
找到模板文件 在你的网站根目录下,进入
/templets/文件夹,然后找到你自定义表单对应的文件夹(/plus/diyfield.htm是默认的,但如果你在后台指定了其他模板,就找那个)。 -
在模板中添加验证码代码 在
<form>标签内部,你希望显示验证码的位置,添加以下 HTML 代码:<li> <label for='vdcode'>验证码:</label> <!-- 验证码图片 --> <img id='vdimgck' src='/include/vdimgck.php' align='absmiddle' style='cursor:pointer' onclick='this.src="/include/vdimgck.php?"+Math.random()' title='点击刷新验证码' /> <!-- 验证码输入框 --> <input type='text' name='vdcode' id='vdcode' style='width:50px;text-transform:uppercase;' class='intxt' /> </li>
代码解释:
<img id='vdimgck' src='/include/vdimgck.php'>:这是显示验证码图片的核心。/include/vdimgck.php是 DedeCMS 自带的验证码生成脚本。onclick='this.src="/include/vdimgck.php?"+Math.random()':这是实现“点击刷新”功能的 JavaScript 代码,每次点击图片,都会在 URL 后面加一个随机数,强制浏览器重新请求图片,从而刷新验证码。<input type='text' name='vdcode' ...>:这是用户输入验证码的输入框。name='vdcode':这个name属性非常重要! 后端验证会通过这个name值来获取用户输入,请务必保持为vdcode。id='vdcode':与name保持一致,方便 JavaScript 调用。
-
(可选)美化样式 你可以根据你的网站样式,给
<li>标签或其内部的元素添加 CSS 类,使其与整体设计更协调。
第三步:后端验证(修改处理文件)
当用户点击提交按钮后,数据会发送到 /plus/diy.php 文件,我们需要修改这个文件,在它处理数据之前加入验证码的校验逻辑。
-
打开文件 用编辑器打开网站根目录下的
/plus/diy.php文件。 -
找到关键代码段 在文件中,找到如下代码(通常在第 40-50 行之间,具体行数可能因版本不同而略有差异):
// ------------------- // 保存到主表 // ------------------- if($fieldinfo['isbase']==1) { $addvalue = ${$fieldinfo['fieldname']}; if($addvalue=='') { if($fieldinfo['isnull']==0) { showMsg('dede_fields_check()', '-1'); exit(); } } if($fieldinfo['phpcode']!='') { $addvalue = preg_replace("/[^0-9a-zA-Z\$_@\.]/", "", $addvalue); $addvalue = "{$".$fieldinfo['fieldname']."=$addvalue;}"; eval($addvalue); } $inaddfile[$fieldinfo['fieldname']] = $addvalue; } -
在关键位置插入验证代码 在上面这段代码 之前(也就是在
if($fieldinfo['isbase']==1)这行之前),插入以下 PHP 代码:// ------------------- // 验证码校验 // ------------------- if(strtolower($_REQUEST['vdcode']) != strtolower($_SESSION['vdcode'])) { // 验证码错误,跳转并提示 showMsg('验证码错误!', '-1'); exit(); }代码解释:
$_REQUEST['vdcode']:获取前端表单中name='vdcode'的输入值。strtolower()将其转为小写,以实现不区分大小写的验证。$_SESSION['vdcode']:获取服务器端当前会话中生成的正确验证码,这个值是在vdimgck.php生成图片时,同时存入 Session 的。showMsg('验证码错误!', '-1');:如果两者不匹配,调用 DedeCMS 自带的提示函数,显示“验证码错误!”并返回上一页。exit();:终止脚本执行,不再继续处理表单提交。
-
保存文件 保存修改后的
/plus/diy.php文件。
完整流程与排错
整个流程已经设置完毕:
- 用户访问你的自定义表单页面。
- 页面加载,显示验证码图片和输入框。
- 用户填写表单,输入图片中显示的验证码。
- 用户点击提交。
- 数据发送到
/plus/diy.php。 diy.php首先执行你添加的验证码校验代码。- 如果正确:验证通过,继续执行原有的数据保存逻辑,成功后显示提交成功的提示。
- 如果错误:立即执行
showMsg(...),提示“验证码错误”并终止程序,数据不会被保存。
如果遇到问题,请检查以下几点:
- 验证码不显示:
- 检查
/include/vdimgck.php文件是否存在。 - 检查 GD 库是否在 PHP 环境中启用,可以通过
phpinfo()函数来查看。 - 检查服务器目录权限,确保
session文件夹有写入权限。
- 检查
- 验证码总是提示错误:
- 确认前端输入框的
name属性是vdcode。 - 确认后端
$_REQUEST['vdcode']和$_SESSION['vdcode']都能正确取到值(可以var_dump一下看看)。 - 检查浏览器是否禁用了 Cookie,因为验证码依赖 Session,而 Session 依赖 Cookie。
- 检查是否有其他插件或代码修改了 Session 的处理方式。
- 确认前端输入框的
通过以上步骤,你就可以成功地为你的 DedeCMS 自定义表单添加验证码功能了。
