Razor Pages 中基于客户端验证的条件表单提交指南

哈喽！今天心血来潮给大家带来了《Razor Pages 中基于客户端验证的条件表单提交指南》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

本教程详细阐述了如何在 ASP.NET Core Razor Pages 应用中实现基于客户端 JavaScript 验证的条件表单提交。通过修改 HTML 按钮类型、统一 JavaScript 验证函数的返回值，并利用 jQuery 的 submit() 方法，确保表单仅在所有前端验证规则均通过时才向服务器发送数据，从而提升用户体验和数据完整性。

理解 Razor Pages 中的表单提交机制

在 ASP.NET Core Razor Pages 中，当一个 元素被点击时，浏览器会默认尝试提交其所属的

。如果表单上绑定了 onsubmit 事件处理器，该处理器会在提交前执行。同样，如果按钮上绑定了 onclick 事件，它也会在表单提交流程开始前触发。

原始代码中，提交按钮的定义为

Sign Up。这里的关键在于 type="submit"。即使 onclick="validate()" 函数被调用，如果 validate() 函数本身没有明确阻止默认行为（例如通过 event.preventDefault() 或返回 false），表单仍然会尝试提交。原始的 validate() 函数仅进行控制台日志输出，并未阻止默认提交，导致即使存在验证错误，表单依然会被发送到服务器。

此外，原始 JavaScript 中部分验证函数（如 checkpass1() 和 checkpass2()）的返回值逻辑与其他函数（如 fname()）不一致。例如，fname() 在验证失败时返回 true，而在成功时返回 false；而 checkpass1() 在验证失败时返回 false，在成功时返回 true。这种不一致性会使主 validate() 函数的逻辑判断变得复杂且容易出错。

核心解决方案：阻止默认行为并手动控制提交

要实现严格的条件提交，我们需要采取以下策略：

1. 阻止按钮的默认提交行为：将提交按钮的 type 从 submit 改为 button。这样，点击按钮时将只触发 onclick 事件，而不会自动提交表单。
2. 统一验证函数返回值：确保所有客户端验证函数都遵循相同的约定，例如：验证失败时返回 true（表示存在错误），验证成功时返回 false（表示无错误）。
3. 在主验证函数中集中判断并提交：在 validate() 函数中，执行所有个体验证，并根据它们的返回值判断表单的整体有效性。只有当所有验证都通过时，才通过 JavaScript 代码手动提交表单。

实施步骤

步骤 1: 调整 HTML 结构

首先，我们需要修改 标签和提交 标签。

1. 为 元素添加 id: 这使得我们可以在 JavaScript 中通过 ID 轻松引用表单。
2. 修改

的 type 属性: 将 type="submit" 改为 type="button"。

修改后的 HTML 代码片段：

<form id="signUpForm" class="mb-3" method="post">
    <!-- ... 其他表单元素 ... -->
    <div class="col-12 d-grid">
        <button onclick="validate()" class="btn btn-primary rounded-pill" type="button" id="submitButton">Sign Up</button>
    </div>
</form>

注意：这里我们将表单 ID 命名为 signUpForm，以避免与 JavaScript 中的 count 变量混淆。

步骤 2: 统一 JavaScript 验证逻辑

为了使 validate() 函数的逻辑清晰和可靠，我们需要确保所有独立的验证函数都遵循相同的返回值约定：当验证失败（存在错误）时返回 true，当验证成功（无错误）时返回 false。

根据这个约定，我们需要修正 checkpass1() 和 checkpass2() 函数。

修正后的 checkpass1() 函数：

const checkpass1 = () => {
    const a = document.getElementById("signUpPassword").value;
    const new1 = document.getElementById("i6");
    const new2 = new1.getElementsByTagName("span");
    const specialChars = /[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/;

    if (a.length < 8) {
        new2[0].innerHTML = "Password length must be at least 8 characters";
        new2[0].style.color = "red";
        return true; // 验证失败，返回 true
    } else if (a.length > 12) {
        new2[0].innerHTML = "Password length must not exceed 12 characters";
        new2[0].style.color = "red";
        return true; // 验证失败，返回 true
    } else if (!specialChars.test(a)) {
        new2[0].innerHTML = "Password must contain at least 1 special character";
        new2[0].style.color = "red";
        return true; // 验证失败，返回 true
    } else {
        new2[0].innerHTML = "";
        return false; // 验证成功，返回 false
    }
}

修正后的 checkpass2() 函数：

const checkpass2 = () => {
    const a = document.getElementById("signUpConfirmPassword").value;
    const b = document.getElementById("signUpPassword").value;
    const new1 = document.getElementById("i7");
    const new2 = new1.getElementsByTagName("span");

    if (a !== b) { // 使用 !== 进行严格比较
        new2[0].innerHTML = "Password does not match";
        new2[0].style.color = "red";
        return true; // 验证失败，返回 true
    } else {
        new2[0].innerHTML = "";
        return false; // 验证成功，返回 false
    }
}

其他如 fname(), lname(), checkcountry(), checkMobile(), checkEmail() 等函数已经符合“失败返回 true，成功返回 false”的约定，无需修改。

3. 优化主验证函数 validate()

现在，我们可以修改 validate() 函数来收集所有验证结果，并根据结果决定是否提交表单。我们将使用一个布尔标志来跟踪是否存在任何验证错误。

const validate = () => {
    let hasError = false; // 标志，用于跟踪是否存在任何验证错误

    // 运行所有验证函数。如果任何一个函数返回 true（表示有错误），则将 hasError 设置为 true。
    // 这里使用短路逻辑，但为了确保所有错误信息都显示，最好逐一调用。
    if (fname()) hasError = true;
    if (lname()) hasError = true;
    if (checkcountry()) hasError = true;
    if (checkMobile()) hasError = true;
    if (checkEmail()) hasError = true;
    if (checkpass1()) hasError = true; // 调用修正后的函数
    if (checkpass2()) hasError = true; // 调用修正后的函数

    if (hasError) {
        console.log("Error: Form not submitted due to validation failures.");
        // 不执行提交操作，表单停留在当前页面，用户可以看到错误信息
    } else {
        console.log("Validation successful. Submitting form.");
        // 所有验证通过，使用 jQuery 提交表单
        // 确保页面已引入 jQuery 库，例如 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        $("#signUpForm").submit();
    }
};

完整的