Episerver表单：能否通过提交事件添加重复文件名自定义验证？

完全可以通过表单初始化模块绑定提交事件来实现重复文件名验证，无需修改现有的文件上传元素组件。以下是具体实现步骤：

1. 创建自定义验证模块 #

编写一个JavaScript模块，监听表单渲染完成事件，然后绑定提交前的验证逻辑：

define([], function () {
    return {
        init: function () {
            // 监听Episerver表单渲染完成事件
            document.addEventListener('epi-forms-rendered', function (event) {
                const targetForm = event.target;
                // 仅处理Episerver表单元素
                if (!targetForm || !targetForm.classList.contains('epi-forms-form')) return;

                // 绑定表单提交拦截逻辑
                targetForm.addEventListener('submit', function (submitEvent) {
                    const fileInputs = targetForm.querySelectorAll('input[type="file"]');
                    const uploadedFileNames = [];
                    let hasDuplicate = false;
                    let duplicateFileName = '';

                    // 遍历所有文件上传控件，检查文件名重复
                    fileInputs.forEach(input => {
                        if (input.files.length === 0) return;

                        Array.from(input.files).forEach(file => {
                            // 统一转小写实现不区分大小写的重复校验，可根据需求调整
                            const normalizedName = file.name.toLowerCase();
                            if (uploadedFileNames.includes(normalizedName)) {
                                hasDuplicate = true;
                                duplicateFileName = file.name;
                            } else {
                                uploadedFileNames.push(normalizedName);
                            }
                        });
                    });

                    // 检测到重复文件名时阻止提交并提示错误
                    if (hasDuplicate) {
                        submitEvent.preventDefault();
                        
                        // 创建符合Episerver表单风格的错误提示
                        const errorElement = document.createElement('div');
                        errorElement.className = 'epi-forms-error-message epi-forms__error-message';
                        errorElement.textContent = `发现重复文件名：${duplicateFileName}，请修改后重新提交。`;
                        
                        // 将错误提示插入表单顶部（可根据布局调整插入位置）
                        targetForm.insertBefore(errorElement, targetForm.firstChild);

                        // 自动移除提示（可选）
                        setTimeout(() => errorElement.remove(), 5000);
                    }
                });
            });
        }
    };
});

2. 注册模块到Episerver #

将上述脚本保存为Scripts/CustomFileValidation.js，然后在模块的module.config中配置客户端资源，让Episerver加载这个模块：

<?xml version="1.0" encoding="utf-8"?>
<module>
  <dependencies>
    <dependency name="EPiServer.Forms" />
  </dependencies>
  <clientResources>
    <add name="epi-forms" path="Scripts/CustomFileValidation.js" resourceType="Script" />
  </clientResources>
</module>

关键注意事项 #

• 多文件上传支持：代码中遍历了每个上传控件的所有文件，适配单文件和多文件上传场景
• 大小写处理：示例中统一转小写校验，若需要严格区分大小写，移除toLowerCase()即可
• 服务端二次校验：客户端验证可被绕过，建议在表单提交的服务端处理逻辑中再做一次重复文件名检查，确保数据安全
• 样式适配：错误提示使用了Episerver表单默认的错误类名，保持界面风格一致

内容的提问来源于stack exchange，提问作者user21538182