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

我正试图利用HTML.ValidationMessage（）元素编写真正自定义的jQuery客户端验证。这可能吗？我的服务器端验证是使用HTML.ValidationMessage（）显示的，我想知道在表单提交之前如何使用jQuery访问该元素以显示自定义消息

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

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

$（文档）.ready（函数（）{
$（“输入[type=submit]”。单击（函数（）{
var valid=true；
//电子邮件空白
if（$（（“输入[name='email']））.val（）.length<1）{
$（“输入[name='email']”）addClass（“输入验证错误”）；
有效=错误；
}
返回有效；
})
});

和视图中的代码：

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

电邮：

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

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

与：

$（“输入[name='email']”）。在（'email required'）之后；

创建一个作为ValidatedTextBox的HtmlHelper。我在模型上使用反射实现了这一点，创建了一个带有验证的完全动态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);
}

公共静态MvcForm BeginClientValidatedForm（此HtmlHelper帮助程序，字符串formId）
{
HttpResponseBase response=helper.ViewContext.HttpContext.response；
if（helper.ViewData.ModelState.IsValid）
{
Write（“
\n\n”）；
}
Write（ClientValidationHelper.GetFormValidationScript（formId））；
响应。写入（“\n”）；
//将标准表单注入httpResponse。
var builder=新标记生成器（“表格”）；
builder.Attributes[“id”]=formId；
builder.Attributes[“name”]=formId；
builder.Attributes[“action”]=helper.ViewContext.HttpContext.Request.Url.ToString（）；
builder.Attributes[“method”]=HtmlHelper.GetFormMethodString（FormMethod.Post）；
Write（builder.ToString（TagRenderMode.StartTag））；
返回新的MvcForm（响应）；
}

以及相应的“GetFormValidationScript”：

公共静态字符串GetFormValidationScript（字符串formId）
{
字符串脚本块=
@"
$（文档）.ready（函数（）{{
$（“#{0}”）。验证({{
meta:“规则”，
onkeyup:false，
onfocusout:false，
onclick:false，
errorClass:“输入验证错误”，
errorElement:“li”，
errorLabelContainer:“ul.验证摘要错误”，
错误：功能（错误映射、错误列表）{{
$（“ul.validation summary errors”）.html（“”）；
this.defaultRors（）；
}}";
//这是标准的jQuery.validate代码。
返回string.Format（scriptBlock，formId）；
}
公共静态字符串ClientValidatedTextbox（此HtmlHelper HtmlHelper、字符串属性名称、IDictionary htmlAttributes、字符串验证类型）
{
var cssClassBuilder=新的StringBuilder（）；
cssClassBuilder.Append（“文本”）；
如果（htmlAttributes==null）
{
htmlAttributes=新字典（）；
}
else if（htmlAttributes.ContainsKey（“类”））
{
附加（htmlAttributes[“class”]）；
}
交换机验证类型
{
案例“电子邮件”：
追加（“{rules:{email:true，messages:{email:'需要有效的电子邮件。}”）；
打破
}
htmlAttributes[“class”]=cssClassBuilder.ToString（）；
返回htmlHelper.TextBox（propertyName，htmlAttributes）；
}

你可以编写大量的代码来完成这项工作。或者你可以使用免费的，完全可以做到这一点的，再加上更多。在你的.NET类型上添加值注释，在你的aspx中添加一些简单的东西，你就可以免费获得jQuery验证。此外，它还提供了流行框架的提供程序，并且在你需要的情况下，它是非常可定制的这需要更复杂的验证

---

我认为没有必要在这里重新设计轮子。

只在客户端使用jquery表单是一个好主意吗？它很容易在视图代码中实现。您可以向输入框添加一些标记，并在标题中添加几行javascript，就完成了。当然，您仍然需要编写任何可以说是“非常自定义”的代码。

谢谢对于您的答案。这里唯一的问题是完成此操作所需的额外标记。如果不想添加额外标记，您可以在jQuery中插入该span标记。从xVal站点更新：“重要提示：xVal建议仅与ASP.NET MVC 1.0一起使用。如果您使用的是ASP.NET MVC 2.0或更高版本，则该框架内置了直接从模型元数据生成客户端验证逻辑的支持。如果愿意，您仍然可以使用xVal，但不会积极开发或支持它。”。“是的，在MVC 2.0+中，你不需要这个。我的答案很老，是基于MVC 1！是的，不是批评，只是想帮助那些最终不知道变化的人。”

        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;
        }

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

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

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);
}

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);
}