ASP MVC 4 客户端验证在 IE 中不起作用（在 Chrome 中起作用）答案

【问题标题】：ASP MVC 4 client side validation not working in IE (works in Chrome)ASP MVC 4 客户端验证在 IE 中不起作用（在 Chrome 中起作用）
【发布时间】：2014-11-08 05:31:16
【问题描述】：

我在 Stack Overflow 上看到过类似的问题，但没有具体针对此案例。无论出于何种原因，ASP.Net MVC 4 客户端验证在 Chrome 中运行良好，但在 IE9 中不会触发。

Web.config

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

查看

可以在这两个字段中输入任何内容，并将它们发送回服务器。例如55/55/5555 将在 Chrome 中触发错误并阻止表单发布，但在 IE 中表单会将数据发送回服务器并导致站点崩溃...

以下是应用于每个字段的 jquery 输入掩码和 Razor 语法。

$('#EffectiveDate').mask('99/99/9999');
$('#Birthdate').mask("99/99/9999");

<div class="M-editor-label">
    @Html.LabelFor(model => model.EffectiveDate, new {@class="required"})
</div>
<div class="M-editor-field">          
    @Html.TextBoxFor(model => model.EffectiveDate, new { maxlength = 10 })
    @Html.ValidationMessageFor(model => model.EffectiveDate)
</div>
<div class="M-editor-label">
    @Html.LabelFor(model => model.Birthdate, new {@class="required"})
</div>
<div class="M-editor-field">
    @Html.EditorFor(model => model.Birthdate)
    <br />
    @Html.ValidationMessageFor(model => model.Birthdate)
</div>

Layout.cshtml

这里是渲染的脚本部分

<script src="/Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.10.4.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
<script src="/Scripts/typeahead.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.dataTables.js" type="text/javascript"></script>

<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

<script src="/Scripts/jquery.numeric.js" type="text/javascript"></script>
<script src="/Scripts/jquery.fancybox.js" type="text/javascript"></script>
<script src="/Scripts/jquery.fancybox.pack.js" type="text/javascript"></script>

型号

    [DisplayName("Effective Date")]
    [DisplayFormat(DataFormatString = "{0:d}", ApplyFormatInEditMode = true)]
    public DateTime? EffectiveDate { get; set; }

    [DisplayName("Date of Birth")]
    [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
    public DateTime? Birthdate { get; set; }

【问题讨论】：

将 modernizr 移动到 <head> 部分中的所有脚本之前。
仍然没有运气，同样的结果

标签： javascript jquery asp.net-mvc asp.net-mvc-4

【解决方案1】：

请查看工作示例https://dotnetfiddle.net/fEER2v

问题在于日期本地化和 jQuery 验证插件。最简单的修复方法是覆盖 date 验证器。这是使用 moment.js javascript 库的示例代码：

  $.validator.methods.date = function (value, element) {
       return value === "" || moment(value, "MM/DD/YYYY", true).isValid();
  };

也可以通过NuGet获得

当然你需要一些优化，比如从元素属性中获取日期格式。

【讨论】：