1

我正在尝试在一个简单的 MVC 4 应用程序上使用 jQuery 验证插件——我在 MVC 3 中所做的事情没有问题，但我根本无法让它工作。

我希望验证在以下情况下触发：

1 - 我的控制失去焦点。

2-表单提交。

任何关于我错过的想法将不胜感激！

_Layout.cshtml 中的脚本引用

<!-- language-all: lang-html -->
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - AWC Web Console</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

</head>

带有验证 JS 的 Index.cshtml 标记应用于 Doc 就绪功能 

    <script type="text/javascript">

        $(document).ready(function () {

        alert("doc ready");

        // JQuery client validation
        $("#prodIdFilterForm").validate(
            {
                onsubmit: true,
                rules: {
                    productId_str: {required: true, minlength: 10, number:true }
                },
                messages: { productId_str: "product Id must be entered" },
                // Force validation when control looses focus 
                onfocusout: function (element) {
                    alert("onfocusout");   // not entering this block !
                    $("#productId_str").removeAttr('style');
                    $("#productId_str").valid();   // fire validation
                    $(element).valid();
                }
                ,
                showErrors: function (errorMap, errorList)
                {
                    if (errorList.length > 0)
                    {
                        for (var i = 0; i < errorList.length; i++)
                        {
                            $("#" + errorList[i].element.id).css({ 'background-color': '#FFDFDF' });
                        }
                    }
                }
            }   
            );

    });  // DocReady

</script>

表单标记的主体 

@{
     ViewBag.Title = "Messages";
     Layout = "~/Views/Shared/_Layout.cshtml";
}


@using ( Html.BeginForm("SelectProduct", "WMSMessages", Model, FormMethod.Post, new {  @id = "prodIdFilterForm"} ) )
{
   <fieldset class="filtering">
      <legend>SelectExtensions Product</legend>
      <div>
         <b>Product Id:</b>
         @Html.TextBoxFor(model => model.productId_str, new { @id ="productId_str"}  )

         <div class="filterSubmitBox">
            <input type="submit" value="Show Messages" />
         </div>   
      </div>
   </fieldset>
}
4

1 回答 1

9

对于客户端验证，微软使用 jquery.validate.unobtrusive.js 文件。 客户端验证 asp.net mvc

启用客户端验证

要在 ASP.NET MVC 3 中启用客户端验证，您必须设置两个标志并且必须包含三个 JavaScript 文件。

打开应用程序的 Web.config 文件。验证 ClientValidationEnabled 和 UnobtrusiveJavaScriptEnabled 在应用程序设置中是否设置为 true。根 Web.config 文件中的以下片段显示了正确的设置：

 <appSettings>
  <add key="ClientValidationEnabled" value="true"/> 
  <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
 </appSettings>

将 UnobtrusiveJavaScriptEnabled 设置为 true 会启用不显眼的 Ajax 和不显眼的客户端验证。当您使用不显眼的验证时，验证规则将转换为 HTML5 属性。HTML5 属性名称只能由小写字母、数字和破折号组成

例如，如果您说电子邮件的必需属性及其错误消息。它会将数据属性附加到这样的元素。

 <input data-val="true"
        data-val-required="Email is required (we promise not to spam you!)."
        id="Email" name="Email" type="text" value="" />

将 ClientValidationEnabled 设置为 true 会启用客户端验证。通过在应用程序 Web.config 文件中设置这些键，您可以为整个应用程序启用客户端验证和不显眼的 JavaScript。您还可以使用以下代码在单个视图或控制器方法中启用或禁用这些设置：

欲了解更多信息：

  1. Asp.net MVC 验证
  2. MVC 客户端验证
于 2013-03-01T10:08:25.120 回答