使用 Html.ValidationMessage 的 jQuery 的 ASP.NET MVC 客户端验证？

Posted 2023-05-09

【中文标题】使用 Html.ValidationMessage 的 jQuery 的 ASP.NET MVC 客户端验证？

【英文标题】：ASP.NET MVC Client Validation with jQuery using Html.ValidationMessage?

【发布时间】：2010-10-14 06:59:38

【问题描述】：

我正在尝试利用 html.ValidationMessage() 元素来使用 jQuery 编写非常自定义的客户端验证。这甚至可能吗？我的服务器端验证使用 HTML.ValidationMessage() 显示，我想知道如何访问该元素以在表单提交之前使用 jQuery 显示自定义消息。

我知道有一些插件可以做这些事情，但我真的希望完全控制我的验证。

这是我目前拥有的一些 javascript 代码。基本上它在提交时将验证“类”添加到输入元素，但不确定如何访问 Html.ValidationMessage 以输出“需要电子邮件”之类的内容。

    <script type="text/javascript">
    $(document).ready(function() 
        $("input[type=submit]").click(function() 

            var valid = true;

            // email blank
            if ($("input[name='email']").val().length < 1) 
                $("input[name='email']").addClass("input-validation-error");
                valid = false;
            

            return valid;
        )
    );

</script>

视图中的代码：

       <p>
            <label for="email">
                Email:</label>
            <%= Html.TextBox("email") %>
            <%= Html.ValidationMessage("email") %>
        </p>

【参考方案1】：

您可以编写大量代码来执行此操作。或者您可以使用xVal，它是免费的，并且可以做到这一点，还有更多。在您的 .NET 类型上添加值注释，在您的 aspx 中添加一些简单的东西，然后您就可以免费获得 jQuery 验证。此外，它还附带了流行框架的提供程序，并且它非常可定制，以防您需要更复杂的验证。

我认为没有必要在这里重新发明***。

【讨论】：

从 xVal 站点更新：“重要提示：xVal 建议仅与 ASP.NET MVC 1.0 一起使用如果您使用的是 ASP.NET MVC 2.0 或更高版本，则该框架具有内置支持直接从模型元数据生成客户端验证逻辑。如果您愿意，您仍然可以使用 xVal，但不会积极开发或支持它。"

对；在 MVC 2.0+ 中你不需要这个。我的答案很旧，并且基于 MVC 1！

是的，不是批评，只是想帮助那些最终来到这里不知道变化的人

【参考方案2】：

只在客户端使用 jquery 表单 validation plugin 会不会是一个想法？在视图代码中很容易实现。您在输入框中添加一些标签并在标题中添加几行 javascript，您就完成了。当然，您仍然必须编写任何“非常自定义”的代码。

【参考方案3】：

如果您将消息静态放置在页面中并将其显示设置为“无”，您可以在更改输入字段的类的同时显示该消息。

    <p>
        <label for="email">
            Email:</label>
        <%= Html.TextBox("email") %><span style="display:none" class="email-error">Email required</span>
        <%= Html.ValidationMessage("email") %>
    </p>

然后在你的 JS 中添加这一行下面的部分更改：

        if ($("input[name='email']").val().length < 1) 
            $("input[name='email']").addClass("input-validation-error");
            valid = false;
        

到这里：

        if ($("input[name='email']").val().length < 1) 
            $("input[name='email']").addClass("input-validation-error");
            $("span.email-error").show();
            valid = false;
        

您可能需要一些 CSS 来相应地定位这些内容，但从功能上讲，它应该可以满足您的需求。

编辑：

为了避免额外的标记替换：

$("span.email-error").show();

与：

$("input[name='email']").after('<span style="display:none" class="email-error">Email required</span>');

【讨论】：

感谢您的回答。这里唯一的问题是实现这一目标所需的额外标记。

如果您不想添加额外的标记，实际上可以在 jQuery 中插入该 span 标签。

【参考方案4】：

创建一个 HtmlHelper，它是一个 ValidatedTextBox。我已经在我的模型上使用反射完成了这项工作，创建了一个带有验证的完全动态的 jQuery 集成，但更简单的版本会像这样工作（这可能会工作，但目前未经测试）。一个很好的起点：

public static MvcForm BeginClientValidatedForm(this HtmlHelper helper, string formId)

    HttpResponseBase response = helper.ViewContext.HttpContext.Response;
    if (helper.ViewData.ModelState.IsValid)
    
        response.Write("<ul class=\"validation-summary-errors\"></ul>\n\n");
    

    response.Write(ClientValidationHelper.GetFormValidationScript(formId));
    response.Write("\n");

    // Inject the standard form into the httpResponse.
    var builder = new TagBuilder("form");
    builder.Attributes["id"] = formId;
    builder.Attributes["name"] = formId;
    builder.Attributes["action"] = helper.ViewContext.HttpContext.Request.Url.ToString();
    builder.Attributes["method"] = HtmlHelper.GetFormMethodString(FormMethod.Post);
    response.Write(builder.ToString(TagRenderMode.StartTag));

    return new MvcForm(response);

以及对应的“GetFormValidationScript”：

public static string GetFormValidationScript(string formId)
  
    string scriptBlock =
    @"<script type=""text/javascript"">
    $(document).ready(function() 
      $(""#0"").validate(
        meta:""rules"",
        onkeyup:false,
        onfocusout:false,
        onclick:false,
        errorClass:""input-validation-error"",
        errorElement:""li"",
        errorLabelContainer:""ul.validation-summary-errors"",
        showErrors: function(errorMap, errorList) 
            $(""ul.validation-summary-errors"").html("""");
            this.defaultShowErrors();
      ";

      // etc...this is the standard jQuery.validate code.

      return string.Format(scriptBlock, formId);


  

public static string ClientValidatedTextbox(this HtmlHelper htmlHelper, string propertyName, IDictionary<string, object> htmlAttributes, string validationType)

    var cssClassBuilder = new StringBuilder();
    cssClassBuilder.Append("text ");
    if (htmlAttributes == null)
    
        htmlAttributes = new Dictionary<string, object>();
    
    else if(htmlAttributes.ContainsKey("class"))
    
        cssClassBuilder.Append(htmlAttributes["class"]);
    

    switch validationType
    
      case "email":
        cssClassBuilder.Append(" rules: email: true, messages: email: 'A valid email is required.'  ");
        break;
    

    htmlAttributes["class"] = cssClassBuilder.ToString();

    return htmlHelper.TextBox(propertyName, htmlAttributes);