dede自定义表单短信验证码-DEDE建站-盈思创科技

准备工作：选择并接入短信服务平台。
后端开发：编写PHP代码，处理短信发送、验证码校验和表单数据入库。
前端开发：修改HTML模板,添加短信验证码相关的输入框和按钮。
整合与测试：将前后端代码整合,并进行全面测试。

下面我将为你提供一个详细的、可操作的教程。

（图片来源网络，侵删）

第一步：准备工作 - 选择并接入短信平台

你需要一个短信服务商来提供短信发送的API,市面上有很多选择，

阿里云短信服务
腾讯云短信服务
Twilio (国际)
SendCloud (国内)

核心流程（以任意平台为例）：

注册账号：在选定的短信平台注册一个开发者账号。
创建应用：在后台创建一个短信应用，获取到 AppKey 和 AppSecret。
申请签名：创建一个短信签名，【你的网站名称】”，签名会显示在短信内容前,必须经过审核。
申请模板：创建一个短信模板，模板是固定的格式，用于发送验证码。
- ：您的验证码是：${code}，5分钟内有效。
- 模板变量：code
- 审核通过后，你会得到一个 模板ID。
获取API文档：下载该平台的短信发送API文档，里面会包含请求地址、参数和示例代码,这是后续PHP开发的关键。

第二步：后端开发 - 编写PHP处理逻辑

这一步是核心,我们需要创建一个新的PHP文件来处理短信验证码的请求和校验。

创建短信发送接口文件

在 plus 目录下创建一个新文件，send_sms.php。

（图片来源网络，侵删）

<?php
require_once(dirname(__FILE__)."/../include/common.inc.php");
require_once(DEDEINC.'/dedetemplate.class.php');
// 引入你从短信平台下载的SDK文件
// 如果下载了阿里云的SDK，并放在 /include/sms/ 目录下
// require_once(DEDEINC.'/sms/aliyun-php-sdk-core/autoload.php');
// require_once(DEDEINC.'/sms/dysmsapi/Request/V20250525/SendSmsRequest.php');
// --- 以下代码为通用逻辑，你需要根据你选择的短信平台SDK进行修改 ---
// 1. 接收前端传来的手机号
$mobile = isset($mobile) ? trim($mobile) : '';
if (empty($mobile)) {
    // 返回JSON格式的错误信息
    $result = array('code' => 0, 'msg' => '手机号不能为空');
    echo json_encode($result);
    exit;
}
// 2. 生成6位随机验证码
$code = rand(100000, 999999);
// 3. 将验证码存入Session，用于后续校验
// Session需要提前开启，通常在 common.inc.php 中已经开启
$_SESSION['sms_code_'.$mobile] = $code;
// 设置Session有效期，例如5分钟
$_SESSION['sms_code_'.$mobile.'_expire'] = time() + 300;
// 4. 调用短信平台API发送短信
// --- 以下是模拟发送过程，你需要替换成真实的API调用 ---
// try {
//     // 实例化短信请求对象 (以阿里云为例)
//     $request = new DysmsapiRequest\V20250525\SendSmsRequest();
//     $request->setPhoneNumbers($mobile);
//     $request->setSignName("【你的网站名称】"); // 你的签名
//     $request->setTemplateCode("SMS_123456789"); // 你的模板ID
//     $request->setTemplateParam(json_encode(array('code' => $code)));
//     $acsResponse = $client->getAcsResponse($request);
//     if ($acsResponse->Code == 'OK') {
//         // 发送成功
//         $result = array('code' => 1, 'msg' => '验证码已发送');
//     } else {
//         // 发送失败
//         $result = array('code' => 0, 'msg' => '发送失败：' . $acsResponse->Message);
//     }
// } catch (Exception $e) {
//     $result = array('code' => 0, 'msg' => '发送失败：' . $e->getMessage());
// }
// --- 模拟发送结束 ---
// 为了演示，我们直接返回成功
// 在实际项目中，请务必替换上面的注释部分为真实的API调用
$result = array('code' => 1, 'msg' => '验证码已发送');
// 5. 返回JSON结果
echo json_encode($result);
exit;
?>

说明：

你需要将注释掉的代码替换为你所用短信平台的真实API调用逻辑。
$_SESSION['sms_code_'.$mobile] 是将验证码与手机号绑定存入Session,防止一个验证码被多个手机号使用。
设置了过期时间,防止验证码被无限期使用。

修改自定义表单处理文件

找到你的自定义表单对应的处理文件，通常位于 /plus/diy.php,我们需要修改它来增加验证码校验逻辑。

在 diy.php 文件中，找到数据入库之前的部分（通常在 if($dsql->Execute('add')) 之前）,添加如下代码：

// 在 diy.php 中添加如下代码
// 1. 接收表单提交的验证码
$form_sms_code = isset($$_POST['sms_code']) ? trim($$_POST['sms_code']) : '';
// 2. 获取Session中存储的验证码和过期时间
$mobile = isset($$_POST['mobile']) ? trim($$_POST['mobile']) : ''; // 假设你的表单中有一个名为mobile的字段
$session_code = isset($_SESSION['sms_code_'.$mobile]) ? $_SESSION['sms_code_'.$mobile] : '';
$session_expire = isset($_SESSION['sms_code_'.$mobile.'_expire']) ? $_SESSION['sms_code_'.$mobile.'_expire'] : 0;
// 3. 校验验证码
if (empty($form_sms_code)) {
    showMsg('请输入短信验证码', '-1');
    exit();
}
if ($form_sms_code != $session_code) {
    showMsg('短信验证码错误', '-1');
    exit();
}
if (time() > $session_expire) {
    showMsg('短信验证码已过期，请重新获取', '-1');
    exit();
}
// 4. 验证码校验通过，删除Session中的验证码，防止重复提交
unset($_SESSION['sms_code_'.$mobile]);
unset($_SESSION['sms_code_'.$mobile.'_expire']);
// ... 后续的 $dsql->Execute('add') 代码继续执行 ...

说明：

$$_POST['sms_code'] 和 $$_POST['mobile'] 中的 sms_code 和 mobile 需要和你后面在HTML表单中定义的 input 的 name 属性保持一致。
这段代码会在数据存入数据库前，先检查用户提交的验证码是否正确、是否过期。
验证成功后，会清除Session中的验证码,确保该验证码只能使用一次。

第三步：前端开发 - 修改HTML模板

我们需要修改你的自定义表单模板文件（通常是 templets/plus/diy_list.htm 或你自定义的表单页面）,添加短信验证码的UI元素。

在你的表单HTML中,添加如下结构：

<div class="form-group">
    <label for="mobile">手机号码</label>
    <input type="tel" class="form-control" id="mobile" name="mobile" placeholder="请输入您的手机号" required>
</div>
<div class="form-group">
    <label for="sms_code">短信验证码</label>
    <div class="input-group">
        <input type="text" class="form-control" id="sms_code" name="sms_code" placeholder="请输入短信验证码" required>
        <span class="input-group-btn">
            <button class="btn btn-default" type="button" id="sendSmsBtn">获取验证码</button>
        </span>
    </div>
</div>
<!-- 其他表单字段... -->
<button type="submit" class="btn btn-primary">提交</button>

添加下面的JavaScript代码来处理“获取验证码”按钮的点击事件和倒计时功能，你可以将这段代码放在页面的底部，</body> 标签之前。

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 获取按钮和输入框
    const sendSmsBtn = document.getElementById('sendSmsBtn');
    const mobileInput = document.getElementById('mobile');
    const smsCodeInput = document.getElementById('sms_code');
    // 按钮点击事件
    sendSmsBtn.addEventListener('click', function() {
        const mobile = mobileInput.value.trim();
        // 1. 校验手机号格式
        if (!/^1[3-9]\d{9}$/.test(mobile)) {
            alert('请输入正确的手机号码');
            return;
        }
        // 2. 禁用按钮，防止重复点击
        sendSmsBtn.disabled = true;
        sendSmsBtn.textContent = '发送中...';
        // 3. 调用后端 send_sms.php 接口
        fetch('/plus/send_sms.php?mobile=' + encodeURIComponent(mobile))
            .then(response => response.json())
            .then(data => {
                if (data.code === 1) {
                    alert(data.msg);
                    startCountDown(); // 开始倒计时
                } else {
                    alert(data.msg); // 显示错误信息，如“发送失败”
                    // 如果失败，恢复按钮
                    sendSmsBtn.disabled = false;
                    sendSmsBtn.textContent = '获取验证码';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('发送请求失败，请检查网络');
                sendSmsBtn.disabled = false;
                sendSmsBtn.textContent = '获取验证码';
            });
    });
    // 倒计时函数
    function startCountDown() {
        let countdown = 60; // 60秒倒计时
        sendSmsBtn.textContent = countdown + '秒后重试';
        const timer = setInterval(() => {
            countdown--;
            if (countdown <= 0) {
                clearInterval(timer);
                sendSmsBtn.disabled = false;
                sendSmsBtn.textContent = '获取验证码';
            } else {
                sendSmsBtn.textContent = countdown + '秒后重试';
            }
        }, 1000);
    }
});
</script>

第四步：整合与测试

上传文件：将你修改过的 send_sms.php 和 diy.php 文件上传到你的服务器上对应的目录。
检查权限：确保这些PHP文件有可执行权限。
测试流程：
- 打开你的表单页面。
- 输入一个手机号，点击“获取验证码”按钮。
- 检查是否能收到短信（在开发阶段，可以先 echo $code; 来查看生成的验证码是否正确）。
- 将收到的验证码填入表单,提交表单。
- 检查表单是否成功提交,数据是否正确存入了数据库。
- 尝试错误的情况，如：输入错误的验证码、使用过期的验证码、不输入验证码等,看系统是否给出了正确的提示。

总结与注意事项

安全性：Session验证码的方式相对简单，但对于大多数网站已经足够，对于安全性要求极高的网站，可以考虑将验证码存入Redis等缓存数据库,并设置更严格的IP限制。
成本：短信服务是按量收费的，请务必注意测试频率,避免产生不必要的费用。
错误处理：在你的PHP代码中,务必做好各种异常情况的捕获和用户友好的错误提示。
防刷机制：除了验证码，你还可以在 send_sms.php 中增加IP频率限制，例如同一个IP一分钟内只能发送一次验证码,防止恶意刷取短信。

通过以上步骤,你就可以成功地为DedeCMS的自定义表单添加一个功能完善的短信验证码模块了。

dede自定义表单短信验证码