无需jQuery Validate：实现表单动态错误提示显隐与默认行为阻止

没问题，我来帮你搞定这两个场景的表单验证，不用插件也完全能实现，下面是完整的示例代码和详细说明：

1. 完整表单代码 #

我先把你给出的HTML补全，加上表单主体、错误提示元素和验证脚本：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 简单的错误提示样式，可根据需求调整 -->
    <style>
        .error-message {
            color: #dc3545;
            font-size: 0.875rem;
            margin-top: 0.25rem;
            display: none;
        }
        .form-group {
            margin-bottom: 1.5rem;
        }
    </style>
</head>
<body>
    <form id="targetForm">
        <!-- 复选框组 -->
        <div class="form-group">
            <label>请选择至少一项服务：</label>
            <div>
                <input type="checkbox" name="services" value="web"> 网站开发
                <input type="checkbox" name="services" value="app"> 应用开发
                <input type="checkbox" name="services" value="design"> UI设计
            </div>
            <div class="error-message" id="serviceError">请至少选择一项服务</div>
        </div>

        <!-- 邮箱与确认邮箱 -->
        <div class="form-group">
            <label for="userEmail">注册邮箱：</label>
            <input type="email" id="userEmail" name="userEmail" required>
        </div>
        <div class="form-group">
            <label for="confirmUserEmail">确认邮箱：</label>
            <input type="email" id="confirmUserEmail" name="confirmUserEmail" required>
            <div class="error-message" id="emailMatchError">两次输入的邮箱不匹配</div>
        </div>

        <button type="submit">提交表单</button>
    </form>

    <script>
        // 获取表单及核心元素
        const form = document.getElementById('targetForm');
        const serviceError = document.getElementById('serviceError');
        const userEmail = document.getElementById('userEmail');
        const confirmUserEmail = document.getElementById('confirmUserEmail');
        const emailMatchError = document.getElementById('emailMatchError');

        // 监听表单提交事件
        form.addEventListener('submit', function(e) {
            let isFormValid = true;

            // 验证复选框组：至少选中一个
            const checkedServices = document.querySelectorAll('input[name="services"]:checked');
            if (checkedServices.length === 0) {
                serviceError.style.display = 'block';
                isFormValid = false;
            } else {
                serviceError.style.display = 'none';
            }

            // 验证邮箱匹配
            if (userEmail.value.trim() !== confirmUserEmail.value.trim()) {
                emailMatchError.style.display = 'block';
                isFormValid = false;
            } else {
                emailMatchError.style.display = 'none';
            }

            // 验证不通过时阻止表单提交
            if (!isFormValid) {
                e.preventDefault();
            }
        });

        // 可选：实时验证邮箱匹配，提升用户体验
        confirmUserEmail.addEventListener('input', function() {
            if (userEmail.value.trim() !== confirmUserEmail.value.trim()) {
                emailMatchError.style.display = 'block';
            } else {
                emailMatchError.style.display = 'none';
            }
        });

        // 可选：点击复选框时自动隐藏错误提示
        document.querySelectorAll('input[name="services"]').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const checked = document.querySelectorAll('input[name="services"]:checked');
                if (checked.length > 0) {
                    serviceError.style.display = 'none';
                }
            });
        });
    </script>
</body>
</html>

2. 核心验证逻辑说明 #

• 复选框组验证：通过document.querySelectorAll('input[name="services"]:checked')获取所有选中的复选框，判断数量是否为0，为0则显示错误提示，否则隐藏。
• 邮箱匹配验证：对比两个邮箱输入框的内容（用trim()去除首尾空格，避免空格导致的误判），不相等则显示错误提示，相等则隐藏。
• 阻止提交：只要有一项验证不通过，就调用e.preventDefault()阻止表单的默认提交行为，确保错误修正后才能提交。
• 实时体验优化：给确认邮箱输入框添加input事件，用户输入时就实时验证；给复选框添加change事件，选中后立即隐藏错误提示，让用户及时得到反馈。

3. 样式说明 #

我加了简单的CSS样式，让错误提示默认隐藏，显示时用红色字体，你可以根据自己的页面风格调整颜色、字体大小等样式属性。

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