如何使用 JavaScript 验证没有数据注释的 C# 表单

没有数据注释的 C# 客户端验证

此解决方案在 C# ASP.NET Core 环境中提交表单之前使用 JavaScript 进行前端验证。它通过检查文本区域是否已填充并在未填充时阻止表单提交来提供表单验证。

function validateForm(event) {
  const form = document.getElementById('MyForm');
  let textAreas = form.querySelectorAll('textarea');
  let allFilled = true;
  for (let i = 0; i < textAreas.length; i++) {
    if (textAreas[i].value.trim() === "") {
      allFilled = false;
      break;
    }
  }
  if (!allFilled) {
    alert("All fields are required.");
    event.preventDefault();
    return false;
  }
  return true;
}

使用 ASP.NET Core 在 C# 中进行服务器端验证

此方法侧重于通过利用 ASP.NET Core 模型绑定系统在 C# 中使用后端验证来确保字段不留空。表单提交在服务器上进行验证。

[HttpPost]
public IActionResult SaveForm(ModelExample model)
{
  if (string.IsNullOrEmpty(model.Name) ||
      string.IsNullOrEmpty(model.Name2) ||
      string.IsNullOrEmpty(model.Name3))
  {
    ModelState.AddModelError("", "All fields must be filled.");
    return View(model);
  }
  // Continue processing
  return RedirectToAction("Success");
}

使用自定义错误消息改进 JavaScript 验证

这种方法通过为每个特定字段提供更详细的错误消息来扩展客户端验证，使表单验证更加用户友好。

function validateForm(event) {
  const form = document.getElementById('MyForm');
  let textAreas = form.querySelectorAll('textarea');
  let allValid = true;
  for (let i = 0; i < textAreas.length; i++) {
    if (textAreas[i].value.trim() === "") {
      textAreas[i].classList.add('is-invalid');
      allValid = false;
    } else {
      textAreas[i].classList.remove('is-invalid');
    }
  }
  if (!allValid) {
    event.preventDefault();
    alert("Please fill in all required fields.");
    return false;
  }
  return true;
}

后端表单验证的单元测试

此单元测试通过验证空字段在响应中返回模型错误来检查后端表单验证是否正常工作。

[Fact]
public void TestFormValidation() {
  var controller = new MyController();
  var model = new ModelExample { Name = "", Name2 = "Valid", Name3 = "" };
  var result = controller.SaveForm(model);
  Assert.True(controller.ModelState.ContainsKey(""));
  Assert.Equal("All fields must be filled.",
                controller.ModelState[""].Errors[0].ErrorMessage);
}

有关 JavaScript 和 C# 表单验证的常见问题

1. 的作用是什么 event.preventDefault() 在表单验证中？
2. event.preventDefault() 当验证失败时，停止表单提交并重新加载页面。它确保页面保持当前状态，以便用户更正表单。
3. 如何在 JavaScript 中选择多个元素？
4. 您可以使用 querySelectorAll() 方法来选择多个元素，例如文本区域或输入字段。它返回一个匹配元素的列表，您可以对其进行迭代。
5. 检查表单中是否有空字段的最佳方法是什么？
6. 要检查空字段，请使用 .value.trim() === ""。此方法可确保空字符串和仅包含空格的字符串都被检测为空。
7. 异步验证有什么好处？
8. 异步验证允许实时检查，例如在不提交表单的情况下验证电子邮件地址或用户名，通过提供即时反馈来增强用户体验。
9. 使用 JavaScript 验证时可以跳过服务器端验证吗？
10. 不，不应跳过服务器端验证。即使使用 JavaScript 验证，验证服务器上的数据以防止潜在的绕过或恶意数据提交也至关重要。

使用 JavaScript 进行表单验证的要点

总之，在 C# 应用程序中使用 JavaScript 实现客户端验证可以防止常见的提交错误并增强用户体验。通过检查所有文本区域是否已填充并正确处理表单行为，您可以在到达服务器之前确保数据的准确性。

此外，将其与服务器端验证相结合可确保稳健的数据处理，因为可以绕过客户端脚本。这种双重方法提供了性能改进和安全性，为形成验证挑战提供了完整的解决方案。