Spring MVC表单实现YouTube视频预览确认提交功能需求

没问题，我帮你把这个需求实现出来，下面是完整的解决方案，包含所有需要的改动：

关键改动说明 #

我们需要完成三个核心任务：

• 添加用户不可见的AdminConfirmation隐藏字段
• 实现提交前的视频预览弹窗
• 拦截表单默认提交逻辑，改为确认后再提交

完整代码示例 #

<div class="panel-body">
    <div class="row">
        <div class="form-group">
            <form:form action="saveVideoWithConfirmation" modelAttribute="video" method="POST" id="videoForm">
                <br><br>
                <hr>
                Enter youtube video url : 
                <form:input path="url" id="videourl" onchange="updateVideoPreview()"/>
                <br>
                Do you want approval from client for this video? 
                Yes <form:checkbox path="clientApproval" value="yes"></form:checkbox>
                
                <!-- 新增隐藏的AdminConfirmation字段，用户不可见 -->
                <form:hidden path="AdminConfirmation" id="adminConfirmation"/>
                
                <!-- 将默认提交按钮改为普通按钮，避免直接提交表单 -->
                <button type="button" id="submitBtn">Submit</button>
            </form:form>
        </div>
    </div>
</div>

<!-- 视频预览弹窗，默认隐藏 -->
<div id="videoPreviewModal" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 2rem; border-radius: 8px; box-shadow: 0 0 15px rgba(0,0,0,0.2); z-index: 9999;">
    <h3>Preview Your YouTube Video</h3>
    <iframe id="myIframe" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <div style="margin-top: 1.5rem; display: flex; gap: 1rem;">
        <button id="confirmBtn" style="padding: 0.5rem 1.5rem; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer;">Confirm & Submit</button>
        <button id="cancelBtn" style="padding: 0.5rem 1.5rem; background: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer;">Cancel</button>
    </div>
</div>

<script type="text/javascript">
// 更新视频预览的iframe链接
function updateVideoPreview() {
    var url = document.getElementById('videourl').value;
    var videoId = extractYouTubeVideoId(url);
    if (videoId) {
        document.getElementById('myIframe').src = `https://www.youtube.com/embed/${videoId}?rel=0&showinfo=0`;
    }
}

// 提取YouTube视频ID，支持常见的链接格式
function extractYouTubeVideoId(url) {
    const regex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
    const match = url.match(regex);
    return (match && match[2].length === 11) ? match[2] : null;
}

// 提交按钮点击事件：验证URL并显示预览弹窗
document.getElementById('submitBtn').addEventListener('click', function() {
    const url = document.getElementById('videourl').value;
    const videoId = extractYouTubeVideoId(url);
    
    if (!videoId) {
        alert('Please enter a valid YouTube video URL!');
        return;
    }
    
    // 更新预览视频并显示弹窗
    updateVideoPreview();
    document.getElementById('videoPreviewModal').style.display = 'block';
});

// 确认按钮：设置AdminConfirmation值并提交表单
document.getElementById('confirmBtn').addEventListener('click', function() {
    // 给隐藏字段赋值，这里可以根据业务需求设置对应的值
    document.getElementById('adminConfirmation').value = 'confirmed';
    // 手动提交表单
    document.getElementById('videoForm').submit();
});

// 取消按钮：隐藏弹窗
document.getElementById('cancelBtn').addEventListener('click', function() {
    document.getElementById('videoPreviewModal').style.display = 'none';
});
</script>

细节说明 #

1. 隐藏字段处理：通过<form:hidden>标签添加AdminConfirmation，用户看不到这个字段，提交时会和其他表单数据一起发送到控制器。
2. URL验证：新增的extractYouTubeVideoId函数能处理多种YouTube链接格式，确保只有有效链接才会显示预览。
3. 弹窗交互：点击提交按钮后先验证URL，有效则显示弹窗；确认后给隐藏字段赋值再提交，取消则关闭弹窗回到表单。
4. 样式优化：给弹窗加了基础的样式，让它看起来更友好，你可以根据自己的页面风格调整CSS。

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