dede自定义表单如何设置必填项？-DEDE建站-盈思创科技

纯前端验证（推荐，用户体验好）

这种方法通过在提交表单时使用 JavaScript 进行验证，如果用户没有填写必填项，会立即提示，并且不会刷新页面,用户体验非常好。

（图片来源网络，侵删）

操作步骤：

第1步：创建自定义表单

登录 DedeCMS 后台。
进入【核心】 -> 【自定义表单】。
点击【增加新字段】，添加你需要的表单字段（如：姓名、电话、邮箱等）。
假设我们创建了两个字段：
- name (文本类型，字段名为 name)
- tel (文本类型，字段名为 tel)
保存并生成自定义表单模板，系统会生成一个模板文件，路径通常是 /templets/default/diy_form.htm。

第2步：修改表单模板文件

找到并打开你刚刚生成的模板文件（/templets/default/diy_form.htm）。

关键修改点：

（图片来源网络，侵删）

为需要验证的 input 添加 id 和 class： 为了方便 JavaScript 识别，给每个需要验证的 <input> 或 <textarea> 添加一个唯一的 id，可以添加一个 class（required）来统一标记。

修改前：
```
<input type="text" name="name" size="30" class="input-text" />
<input type="text" name="tel" size="30" class="input-text" />
```
修改后：
```
<input type="text" id="name_input" name="name" size="30" class="input-text required" placeholder="请输入您的姓名" />
<input type="text" id="tel_input" name="tel" size="30" class="input-text required" placeholder="请输入您的电话" />
```
- id="name_input": 给姓名输入框一个唯一ID。
- class="required": 添加 required 类,用于JavaScript识别。
- placeholder: 提供输入提示,提升用户体验。

添加 JavaScript 验证代码： 在 <form> 标签结束之前，添加 <script> 标签,并写入验证逻辑。

（图片来源网络，侵删）

<script type="text/javascript">
function checkForm() {
    // 获取所有带有 'required' 类的输入框
    var requiredInputs = document.getElementsByClassName('required');
    var isValid = true;
    for (var i = 0; i < requiredInputs.length; i++) {
        // 如果值为空，则标记为无效并提示
        if (requiredInputs[i].value == '') {
            alert(requiredInputs[i].placeholder || '此为必填项，请填写！');
            requiredInputs[i].focus(); // 让输入框获取焦点
            isValid = false;
            break; // 发现一个错误就停止检查
        }
    }
    // 如果所有必填项都通过了验证，则提交表单
    if (isValid) {
        // 提交表单
        // document.getElementById('diyform').submit(); // 如果不需要其他验证，可以直接提交
        return true; // 返回 true 让表单正常提交
    } else {
        return false; // 返回 false 阻止表单提交
    }
}
</script>

修改表单的 onsubmit 事件： 找到你的 <form> 标签，添加 onsubmit="return checkForm()"。

修改前：

<form action="/plus/diy.php" enctype="multipart/form-data" method="post">

修改后：

<form action="/plus/diy.php" enctype="multipart/form-data" method="post" onsubmit="return checkForm()">

完整模板示例 (diy_form.htm)：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">自定义表单</title>
</head>
<body>
    <h2>在线报名</h2>
    <form action="/plus/diy.php" enctype="multipart/form-data" method="post" onsubmit="return checkForm()">
        <!-- 必须的隐藏域 -->
        <input type="hidden" name="action" value="post" />
        <input type="hidden" name="diyid" value="1" /> {!-- 这里填写你的自定义表单ID --}
        <input type="hidden" name="do" value="2" />
        <!-- 表单字段 -->
        <p>
            <label for="name_input">姓名：</label>
            <input type="text" id="name_input" name="name" size="30" class="input-text required" placeholder="请输入您的姓名" />
        </p>
        <p>
            <label for="tel_input">电话：</label>
            <input type="text" id="tel_input" name="tel" size="30" class="input-text required" placeholder="请输入您的电话" />
        </p>
        <p>
            <label for="content_input">留言：</label>
            <textarea id="content_input" name="content" rows="5" cols="50" class="input-text"></textarea>
        </p>
        <p>
            <button type="submit">提交</button>
        </p>
    </form>
    <!-- JavaScript 验证代码 -->
    <script type="text/javascript">
    function checkForm() {
        var requiredInputs = document.getElementsByClassName('required');
        var isValid = true;
        for (var i = 0; i < requiredInputs.length; i++) {
            if (requiredInputs[i].value == '') {
                alert(requiredInputs[i].placeholder || '此为必填项，请填写！');
                requiredInputs[i].focus();
                isValid = false;
                break;
            }
        }
        return isValid;
    }
    </script>
</body>
</html>

后端 PHP 验证（更安全，防止绕过）

前端验证可以被用户轻易地通过禁用 JavaScript 来绕过，为了确保数据完整性，后端验证是必须的，这个方法是在表单提交处理文件 plus/diy.php 中添加验证逻辑。

操作步骤：

第1步：定位并备份 diy.php

通过 FTP 或服务器文件管理器，找到并下载 plus/diy.php 文件。
务必备份这个文件,以防修改出错。

第2步：修改 diy.php 文件

打开 diy.php 文件，找到处理表单数据的代码段，通常在 if($do == 2) 的大约第130-150行左右，你会看到类似 $addvar = array(); 的代码。

修改前：

// ... 前面的代码 ...
if($do == 2)
{
    $addvar = array();
    $fp = fopen($cfg_cmspath."/data/".$diy->table.".txt", 'a+');
    if(!empty($diy->itemsets))
    {
        // ... 处理字段集的代码 ...
    }
    else
    {
        foreach($diy->item as $field=>$item)
        {
            if($item->item == 'text' || $item->item == 'textarea' || $item->item == 'number')
            {
                // 核心在这里，直接获取POST过来的值
                $addvar[$field] = FilterSearch(${$item->name});
                if(empty($addvar[$field])) $addvar[$field] = '';
            }
            // ... 其他字段类型处理 ...
        }
    }
    // ... 后续写入数据库和文件的代码 ...
}
// ... 后面的代码 ...

修改后： 我们将在 foreach 循环中，针对特定字段添加 empty() 判断，如果为空,就设置一个错误变量并终止执行。

// ... 前面的代码 ...
if($do == 2)
{
    $addvar = array();
    $error_msg = ''; // 定义一个错误信息变量
    // ... (字段集处理部分保持不变) ...
    foreach($diy->item as $field=>$item)
    {
        if($item->item == 'text' || $item->item == 'textarea' || $item->item == 'number')
        {
            $addvar[$field] = FilterSearch(${$item->name});
            if(empty($addvar[$field])) $addvar[$field] = '';
            // ====== 在这里添加必填项验证 ======
            // 假设 'name' 和 'tel' 是必填项
            if ($field == 'name' && empty($addvar[$field])) {
                $error_msg = '姓名不能为空！';
            }
            if ($field == 'tel' && empty($addvar[$field])) {
                $error_msg = '电话不能为空！';
            }
            // =================================
        }
        // ... 其他字段类型处理 ...
    }
    // 如果存在错误信息，则输出并终止
    if (!empty($error_msg)) {
        ShowMsg($error_msg, '-1'); // ShowMsg是DedeCMS的提示函数，-1表示返回上一页
        exit();
    }
    // ... 后续写入数据库和文件的代码 ...
}
// ... 后面的代码 ...

代码解释：

$error_msg = '';：初始化一个变量来存储错误信息。
if ($field == 'name' && empty($addvar[$field]))：判断当前字段是否为我们设定的必填项（如 name）,并且其值是否为空。
ShowMsg($error_msg, '-1');：如果验证失败，调用 DedeCMS 内置的 ShowMsg 函数弹出提示框,并返回上一页。
exit();：终止脚本执行,后续的数据库写入等操作不会被执行。

总结与建议

方法	优点	缺点	适用场景
前端验证	用户体验好，响应快，减轻服务器压力	可以被用户禁用 JS 绕过	强烈推荐，必须与后端验证结合使用。
后端验证	安全可靠，无法绕过，是数据校验的最后一道防线	用户体验稍差（需要提交后才知道错误），增加了服务器负担	必须实现，是保证数据完整性的核心。

最佳实践：

将 方法一（前端验证） 和 方法二（后端验证） 结合起来使用。

前端验证：给用户即时的反馈，让他们在提交前就能修正错误,提升友好度。
后端验证：作为一道坚固的防线，确保即使有用户绕过了前端验证，提交的数据也是合法的,保证后台收到的数据是完整的。

dede自定义表单如何设置必填项？

纯前端验证（推荐，用户体验好）

操作步骤：

后端 PHP 验证（更安全，防止绕过）

操作步骤：

总结与建议

相关文章

目录[+]