javascript - ASP MVC 4 客户端验证在 IE 中不起作用(在 Chrome 中起作用)

Question

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

Answer 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 获得

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