dede自定义表单如何设置字段非空验证？-DEDE建站-盈思创科技

利用 HTML5 的 required 属性，并结合一点 jQuery 来增强用户体验，比如在提交失败时给出明确的错误提示。

下面我将为你提供两种方法,一种是简单直接的，一种是功能更完善的。

简单直接法（使用 HTML5 `required` 属性）

这是最简单的方法,直接在前端模板中修改即可，无需修改 PHP 代码。

适用场景：只需要阻止空数据提交，对错误提示的样式和位置没有要求。

操作步骤：

登录 DedeCMS 后台。
进入“自定义表单”管理：在左侧菜单中找到 核心 -> 内容模型 -> 自定义表单。
找到你的表单：在列表中点击你想要修改的那个表单的“管理”或“修改”按钮。
修改表单模板：
- 在表单管理页面,找到“模板”相关的选项，点击进入模板编辑，通常这里会显示一个类似 plus/diyform.htm 的模板文件。
- 点击“修改模板”按钮，进入模板编辑界面。

添加 required 属性：

在模板代码中,找到你需要设置为“必填”的表单输入项，比如文本框 <input>、文本域 <textarea> 或下拉框 <select>。
在该标签内直接添加 required 属性。

示例：

修改前（文本框）:

<input type="text" name="name" id="name" class="intxt" size="30" />

修改后（文本框）:

<input type="text" name="name" id="name" class="intxt" size="30" required />

修改前（文本域）:

<textarea name="content" id="content" rows="5" cols="80"></textarea>

修改后（文本域）:

<textarea name="content" id="content" rows="5" cols="80" required></textarea>

修改前（下拉框）:

<select name="type" id="type">
    <option value="">请选择</option>
    <option value="问题反馈">问题反馈</option>
    <option value="合作咨询">合作咨询</option>
</select>

修改后（下拉框）:

<select name="type" id="type" required>
    <option value="">请选择</option>
    <option value="问题反馈">问题反馈</option>
    <option value="合作咨询">合作咨询</option>
</select>

保存模板：点击“保存”按钮，更新模板文件。

效果：当用户尝试提交表单时，required 属性的字段为空，浏览器会自动阻止提交，并弹出默认的浏览器提示框（如：“请填写此字段。”）。

优点：

非常简单,只需修改 HTML。
无需额外代码,浏览器原生支持。

缺点：

错误提示是浏览器自带的,样式不统一，且不够美观。
用户体验不佳,用户可能不知道哪个字段出了问题。

功能完善法（结合 jQuery 实现自定义提示）

这种方法更专业,可以自定义错误提示的样式和位置，给用户更好的反馈。

操作步骤：

准备 jQuery 库：
- 确保你的页面已经加载了 jQuery 库，如果没加载，可以在模板的 <head> 部分添加以下代码（推荐使用 CDN）：
```
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
```
修改模板文件：
- 和方法一一样,进入你的自定义表单模板编辑界面 (plus/diyform.htm)。
修改 HTML 结构，增加错误提示元素：
- 在每个需要验证的字段旁边,添加一个 <span> 元素用于显示错误信息，并给这个 span 一个统一的 class，error-message，同时给它的 id 命名规则为 字段名-error，name-error。
示例：
```
<li>
    <label for="name"><strong>姓名：</strong></label>
    <input type="text" name="name" id="name" class="intxt" size="30" />
    <span id="name-error" class="error-message" style="color: red; display: none;">请输入您的姓名</span>
</li>
```

添加 jQuery 验证脚本：

在模板文件的末尾,在 </body> 标签之前，添加以下 jQuery 代码。

<script>
$(document).ready(function(){
    // 监听表单的提交事件
    $('#diyform').submit(function(e){
        // 先隐藏所有之前的错误提示
        $('.error-message').hide();
        let isValid = true;
        let requiredFields = ['name', 'content', 'type']; // 把需要验证的字段 id 放在这里
        // 遍历所有必填字段
        $.each(requiredFields, function(index, fieldId){
            let fieldValue = $('#' + fieldId).val();
            // 如果值为空，则显示错误提示
            if($.trim(fieldValue) == ''){
                $('#' + fieldId + '-error').show();
                isValid = false;
            }
        });
        // 如果验证失败，阻止表单提交
        if(!isValid){
            e.preventDefault(); // 阻止默认的提交行为
            return false;
        }
    });
});
</script>

代码解释：

$('#diyform')：假设你的表单 form 标签的 id 是 diyform，如果不是，请替换成你自己的 id。
requiredFields = ['name', 'content', 'type']：这个数组列出了所有需要验证为非空的表单字段的 id，你需要根据你的实际情况修改这个数组。
$.trim(fieldValue)：使用 $.trim() 去除用户输入内容两端的空格，防止用户只输入空格就通过验证。
e.preventDefault()：这是关键，它阻止了表单的默认提交行为，从而阻止了数据发送到服务器。

保存模板：点击“保存”按钮。

效果：当用户点击提交按钮时，jQuery 脚本会检查指定字段是否为空，如果为空，就在对应的 <span> 中显示错误信息，并且整个表单不会提交，只有所有必填项都填写完毕，表单才会正常提交。

优点：

用户体验好,错误提示明确、美观，可以定位到具体字段。
验证逻辑可控,可以添加更复杂的规则（如验证邮箱格式、手机号格式等）。

缺点：

需要修改 HTML 和添加 JavaScript 代码，比方法一稍复杂。

总结与建议

特性	方法一 (HTML5 `required`)	方法二 (jQuery)
实现难度	非常简单	简单
用户体验	一般，浏览器原生提示	优秀，自定义提示
功能扩展性	有限，仅支持非空	强大，可扩展各种验证规则
安全性	仅前端验证，不安全！	仅前端验证，不安全！

⚠️ 重要安全提醒：以上两种方法都属于前端验证，前端验证可以提升用户体验，但不能保证数据安全，因为用户可以禁用 JavaScript 或直接通过工具（如 Postman）向服务器发送恶意数据。

无论你使用哪种前端验证方法，都必须在服务器端也进行一次验证，在 DedeCMS 中，服务器端验证通常位于处理表单提交的 PHP 文件中（plus/diy.php），你需要修改这个文件，在将数据插入数据库之前，检查必填字段是否为空，如果为空则给出提示或直接终止程序。

对于大多数用户来说,推荐使用“方法二”，因为它提供了更好的用户体验，并且为以后添加更复杂的验证规则打下了基础，请务必记得配合后端验证以确保数据安全。

dede自定义表单如何设置字段非空验证？

简单直接法（使用 HTML5 `required` 属性）

功能完善法（结合 jQuery 实现自定义提示）

总结与建议

相关文章

目录[+]

简单直接法（使用 HTML5 required 属性）

功能完善法（结合 jQuery 实现自定义提示）

总结与建议

相关文章

目录[+]

简单直接法（使用 HTML5 `required` 属性）