ASP.NET MVC5 实现dd/MM/yyyy格式日期的客户端验证问题

我来帮你搞定这个MVC5的日期客户端验证问题！你遇到的部分场景有效、部分无效的情况，大概率是因为jQuery Validation默认的日期验证规则和你自己加的正则冲突了，或者正则没覆盖所有无效日期的情况。下面给你一套完整的解决方案，确保所有无效输入都会被拦截：

第一步：配置视图模型 #

首先在你的视图模型里，给可选日期字段加上合适的数据注解。这里推荐两种方式，选一种就行：

方式1：结合正则和内置注解 #

如果想用正则，一定要写全覆盖所有有效/无效的日期场景（比如月份不能超过12，不同月份的天数限制等）：

public class YourViewModel
{
    [Display(Name = "可选日期")]
    // 允许空值，用Nullable<DateTime>（简写DateTime?）
    public DateTime? OptionalDate { get; set; }

    // 添加正则验证，覆盖dd/MM/yyyy的所有有效格式
    [RegularExpression(@"^(?:(?:0[1-9]|1\d|2[0-8])\/(?:0[1-9]|1[0-2])\/(?:19|20)\d{2})|(?:(?:29|30)\/(?:0[13-9]|1[0-2])\/(?:19|20)\d{2})|(?:31\/(?:0[13578]|1[02])\/(?:19|20)\d{2})$", 
        ErrorMessage = "请输入有效的dd/MM/yyyy格式日期，或留空")]
    // 可选：添加DisplayFormat让编辑模式下显示格式提示
    [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
}

方式2：自定义验证属性（更灵活） #

如果觉得正则太繁琐，可以写一个自定义验证属性，同时支持服务端和客户端验证：

public class DdMmYyyyDateAttribute : ValidationAttribute, IClientValidatable
{
    public override bool IsValid(object value)
    {
        // 空值直接通过验证
        if (value == null) return true;

        // 尝试用dd/MM/yyyy格式解析日期
        return DateTime.TryParseExact(
            value.ToString(), 
            "dd/MM/yyyy", 
            System.Globalization.CultureInfo.InvariantCulture, 
            System.Globalization.DateTimeStyles.None, 
            out _);
    }

    // 注册客户端验证规则
    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        var rule = new ModelClientValidationRule
        {
            ErrorMessage = ErrorMessage ?? "请输入有效的dd/MM/yyyy格式日期，或留空",
            ValidationType = "ddmmyyydate" // 自定义验证类型标识
        };
        yield return rule;
    }
}

然后在视图模型里使用这个属性：

public class YourViewModel
{
    [Display(Name = "可选日期")]
    [DdMmYyyyDate(ErrorMessage = "请输入有效的dd/MM/yyyy格式日期，或留空")]
    public DateTime? OptionalDate { get; set; }
}

第二步：修复客户端验证逻辑 #

MVC5默认用的jQuery Validation，它的内置date验证规则是按照浏览器区域或者MM/dd/yyyy格式来的，和我们需要的dd/MM/yyyy不兼容，这就是你之前部分场景失效的核心原因！

针对方式1（正则）：重写默认date验证 #

在你的视图（或全局JS文件）里添加以下代码，覆盖jQuery Validation的默认日期验证：

// 重写jQuery Validation的date验证规则，适配dd/MM/yyyy格式
$.validator.methods.date = function (value, element) {
    // 空值直接通过
    if (!value) return true;
    // 用和视图模型一致的正则验证
    const dateRegex = /^(?:(?:0[1-9]|1\d|2[0-8])\/(?:0[1-9]|1[0-2])\/(?:19|20)\d{2})|(?:(?:29|30)\/(?:0[13-9]|1[0-2])\/(?:19|20)\d{2})|(?:31\/(?:0[13578]|1[02])\/(?:19|20)\d{2})$/;
    return dateRegex.test(value);
};

针对方式2（自定义属性）：注册客户端验证适配器 #

同样在视图（或全局JS文件）里添加以下代码，让客户端识别我们的自定义验证属性：

// 添加自定义验证方法
$.validator.addMethod("ddmmyyydate", function (value, element) {
    if (!value) return true;
    // 用正则或直接解析日期都可以，这里用正则更高效
    const dateRegex = /^(?:(?:0[1-9]|1\d|2[0-8])\/(?:0[1-9]|1[0-2])\/(?:19|20)\d{2})|(?:(?:29|30)\/(?:0[13-9]|1[0-2])\/(?:19|20)\d{2})|(?:31\/(?:0[13578]|1[02])\/(?:19|20)\d{2})$/;
    return dateRegex.test(value);
});

// 注册非侵入式验证适配器
$.validator.unobtrusive.adapters.add("ddmmyyydate", [], function (options) {
    options.rules["ddmmyyydate"] = true;
    options.messages["ddmmyyydate"] = options.message;
});

第三步：确保基础配置正确 #

1. 启用客户端验证：检查Web.config里的配置，确保这两个开关是开启的：

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

2. 脚本加载顺序：在布局页(_Layout.cshtml)里按顺序加载脚本，不能乱：

<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<!-- 把我们的自定义JS代码放在上面三个脚本之后 -->
<script src="~/Scripts/custom-validation.js"></script> <!-- 或者直接写在视图里 -->

第四步：视图里的代码 #

最后在视图里使用EditorFor或TextBoxFor生成输入框，同时显示验证消息：

<div class="form-group">
    @Html.LabelFor(m => m.OptionalDate, new { @class = "control-label" })
    @Html.EditorFor(m => m.OptionalDate, new { @class = "form-control", placeholder = "dd/MM/yyyy" })
    @Html.ValidationMessageFor(m => m.OptionalDate, "", new { @class = "text-danger" })
</div>

这样配置后，不管用户输入乱码、无效月份（比如13/01/2023）、无效天数（比如31/04/2023）还是格式错误（比如2023/01/01），客户端都会立刻提示错误并阻止表单提交，空值则完全允许提交。

内容的提问来源于stack exchange，提问作者user2739418