AJAX表单的流畅验证

本文关键字：验证 表单 AJAX | 更新日期: 2023-09-27 18:10:31

我正在ASP.net MVC中创建一个操作/视图，我想使用AJAX/jQuery POST。我在视图模型中使用Fluent Validation进行验证。

当我这样做时，是否可能有客户端验证?为了使用流畅验证触发客户端验证，脚本应该是什么样子?

我是否创建一个常规的表单，并使用jquery创建一个提交事件并调用一些东西，或者我只是Ajax.BeginForm()代替?

AJAX表单的流畅验证

我使用数据注释的jQuery不显眼的验证，但看起来你需要和我一样的设置(下面的前两个选项)加上另一个步骤:

  • 在视图或web.config中启用客户端验证
  • 在您的视图或web.config中启用不显眼的验证
  • 将FluentValidationModelValidatorProvider添加到ModelValidatorProviders集合

对于前两个选项，请参见启用客户端验证。关于最后一个，请参阅流畅验证:与ASP集成。净MVC。

如果您想通过AJAX提交表单，您可以使用$('#form_selector').valid()触发对整个表单的验证，或者使用$('#input_selector').valid()触发对单个输入的验证。如果验证成功，则调用valid()返回true(如果验证失败则返回false)。

Fluent Validation是一个服务器端验证库。因此，Fluent Validation支持一些基本的客户端验证(如required、maxlength等)。你不能在客户端使用所有的服务器端规则。

如果你想为Fluent Validation添加完全的客户端支持，你需要在你的项目中再添加一个库。表单帮助器可以解决你的问题。

https://github.com/sinanbozkus/FormHelper

你需要像这样创建你的表单:

var formConfig = new FormConfig(ViewContext)
{
    FormId = "ProductForm",
    FormTitle = "New Product",
    BeforeSubmit = "ProductFormBeforeSubmit", // optional
    Callback = "ProductFormCallback" // optional,
};
// <form id="@formConfig.FormId" asp-controller="Home" asp-action="Save"
// ...
@await Html.RenderFormScript(formConfig)

之后，你需要添加[FormValidator]属性到你的动作。

[HttpPost, FormValidator]
public IActionResult Save(FormViewModel viewModel)

现在所有的Fluent Validation规则都在客户端工作。

相关文章：