js 提交确认

在JavaScript中，提交确认通常是指在用户执行提交操作（如表单提交）之前，通过弹出对话框或显示提示信息来确认用户是否真的想要执行该操作。这有助于防止用户意外提交表单或执行不希望的操作。

基础概念

提交确认通常使用JavaScript中的confirm()函数来实现。confirm()函数会弹出一个带有“确定”和“取消”按钮的对话框，并返回用户的选择。

类型

提交确认主要分为两种类型：

简单确认：使用confirm()函数弹出确认对话框。
自定义确认：通过自定义模态框或提示信息来实现更复杂的确认逻辑。

应用场景

提交确认常用于以下场景：

表单提交：在用户提交表单之前，确认用户是否真的想要提交。
删除操作：在执行删除操作之前，确认用户是否真的想要删除数据。
重要操作：在执行任何可能产生严重后果的操作之前，确认用户的意图。

示例代码

简单确认

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>提交确认示例</title>
</head>
<body>
    <form id="myForm">
        <input type="text" name="username" placeholder="请输入用户名">
        <button type="submit">提交</button>
    </form>

    <script>
        document.getElementById('myForm').addEventListener('submit', function(event) {
            const isConfirmed = confirm('您确定要提交表单吗？');
            if (!isConfirmed) {
                event.preventDefault(); // 阻止表单提交
            }
        });
    </script>
</body>
</html>

自定义确认

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义提交确认示例</title>
    <style>
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 300px;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <form id="myForm">
        <input type="text" name="username" placeholder="请输入用户名">
        <button type="submit">提交</button>
    </form>

    <div id="confirmModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <p>您确定要提交表单吗？</p>
            <button id="confirmYes">确定</button>
            <button id="confirmNo">取消</button>
        </div>
    </div>

    <script>
        const form = document.getElementById('myForm');
        const modal = document.getElementById('confirmModal');
        const span = document.getElementsByClassName('close')[0];
        const confirmYes = document.getElementById('confirmYes');
        const confirmNo = document.getElementById('confirmNo');

        form.addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交
            modal.style.display = 'block';
        });

        span.onclick = function() {
            modal.style.display = 'none';
        }

        confirmNo.onclick = function() {
            modal.style.display = 'none';
        }

        confirmYes.onclick = function() {
            modal.style.display = 'none';
            form.submit(); // 手动提交表单
        }
    </script>
</body>
</html>