实现表单验证后显示带有链接的弹出提示框教程

<form method="post" name="f1" id="applicationForm">
  <h2 style="padding-left:50px">申请表单</h2>
  <table>
    <tr>
      <td><label for="uname">姓名</label></td>
      <td><input type="text" id="uname" name="username" required></td>
    </tr>
    <tr>
      <td><label for="date">出生日期</label></td>
      <td><input type="date" id="date" name="date" required></td>
    </tr>
    <tr>
      <td><label>性别</label></td>
      <td>
        <label><input type="radio" value="female" name="gender" required> 女</label>
        <label><input value="male" type="radio" name="gender"> 男</label>
      </td>
    </tr>
    <tr>
      <td></td>
      <td><button type="submit" id="submitBtn">提交</button></td>
    </tr>
  </table>
</form>

<div id="myModal" class="modal">
  <div class="modal-content">
    <h2>申请已接受</h2>
    <span class="close">&times;</span>
    <div class="modal-body">
      <p>返回首页 <a href="home.html">首页</a></p>
    </div>
  </div>
</div>

/* 模态框容器 */
.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: 80%; /* 宽度 */
  max-width: 500px; /* 最大宽度 */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.4s;
}

/* 关闭按钮 */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* 动画效果（可选） */
@keyframes animatetop {
  from {top: -300px; opacity: 0}
  to {top: 0; opacity: 1}
}

// 获取DOM元素引用
const applicationForm = document.getElementById("applicationForm");
const submitBtn = document.getElementById("submitBtn");
const myModal = document.getElementById("myModal");
const closeBtn = document.getElementsByClassName("close")[0];

// 1. 模态框关闭逻辑（页面加载时绑定）
// 点击关闭按钮时隐藏模态框
if (closeBtn) {
    closeBtn.onclick = function() {
        myModal.style.display = "none";
    };
}

// 点击模态框外部区域时隐藏模态框
window.onclick = function(event) {
    if (event.target === myModal) {
        myModal.style.display = "none";
    }
};

// 2. 表单提交和验证逻辑
// 阻止表单默认提交行为，并执行自定义验证
applicationForm.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交（页面刷新）

    // 获取表单字段值
    const username = applicationForm.username.value.trim();
    const dateOfBirth = applicationForm.date.value;
    const genderRadios = applicationForm.gender;
    let selectedGender = '';
    for (let i = 0; i < genderRadios.length; i++) {
        if (genderRadios[i].checked) {
            selectedGender = genderRadios[i].value;
            break;
        }
    }

    // 执行验证
    if (username === "") {
        alert('请输入姓名');
        applicationForm.username.focus();
        return; // 停止执行，不显示模态框
    }

    if (dateOfBirth === "") {
        alert('请输入您的出生日期');
        applicationForm.date.focus();
        return;
    }

    if (selectedGender === "") {
        alert('请选择性别');
        // 可以将焦点设置到第一个性别选项，或保持不变
        // applicationForm.gender[0].focus();
        return;
    }

    // 如果所有验证都通过，则显示模态框
    myModal.style.display = "block";
});

// 替代方案：如果按钮是 onclick="return valid()"，可以这样实现 valid 函数
/*
function valid() {
    // 获取表单引用
    const f1 = document.forms["f1"]; // 或者 document.getElementById("applicationForm");

    // 获取表单字段值
    const username = f1.username.value.trim();
    const dateOfBirth = f1.date.value;
    const genderRadios = f1.gender;
    let selectedGender = '';
    for (let i = 0; i < genderRadios.length; i++) {
        if (genderRadios[i].checked) {
            selectedGender = genderRadios[i].value;
            break;
        }
    }

    // 执行验证
    if (username === "") {
        alert('请输入姓名');
        f1.username.focus();
        return false; // 验证失败，阻止表单提交
    }

    if (dateOfBirth === "") {
        alert('请输入您的出生日期');
        f1.date.focus();
        return false;
    }

    if (selectedGender === "") {
        alert('请选择性别');
        return false;
    }

    // 如果所有验证都通过，则显示模态框
    myModal.style.display = "block";
    return false; // 验证成功，但阻止表单的默认提交行为（因为我们已经通过JS处理了）
}

// 如果使用这种方式，HTML按钮需要改为：
// <button type="button" id="submitBtn" onclick="return valid()">提交</button>
// 注意：如果使用 type="submit" 且 onclick 返回 false，它也会阻止提交。
// 但更推荐使用 addEventListener('submit') 来处理。
*/