Bootstrap Datepicker禁用未来日期后仍可手动输入未来日期问题咨询
你需要同时补全JavaScript侧的输入拦截逻辑、以及ViewModel侧的后端校验,二者不是二选一的关系,各自负责不同场景的校验职责。
JavaScript侧配置补全
你当前初始化代码中的maxDate: '+0d'配置仅作用于日历面板的点选场景,不会拦截键盘手动输入的内容,确实存在配置遗漏。需要补全输入解析、失焦校验的相关逻辑,参考代码如下:
$('.datepicker').datepicker({ dateFormat: "mm/dd/yy", changeMonth: true, changeYear: true, firstDay: 1, maxDate: '+0d', forceParse: true, // 强制解析用户输入的字符串,不符合格式的内容会自动回滚到上一个合法值 beforeShow: function(input) { // 可选:限制键盘只能输入数字、日期分隔符和基础控制键,减少无效输入 $(input).off('keydown').on('keydown', function(e) { const allowedKeyCodes = [8,9,37,39,46,191]; // 退格、Tab、方向键、删除、斜杠分隔符 const isNumberKey = (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105); if (allowedKeyCodes.includes(e.keyCode) || isNumberKey) return true; e.preventDefault(); }) }, onClose: function() { // 日期面板关闭/输入框失焦时,校验输入值是否超出上限 const inputDate = $(this).datepicker('getDate'); const today = new Date(); today.setHours(0,0,0,0); if (inputDate && inputDate > today) { $(this).datepicker('setDate', today); // 自动修正为今日,也可改为清空输入+错误提示 alert('日期不能晚于今日'); } } });
ViewModel侧数据注解配置
前端JS校验只能提升正常用户的使用体验,无法防范恶意请求(用户可禁用JS、直接修改前端代码、构造自定义请求绕过前端校验),因此后端必须做兜底校验。
由于你的EndOfWeek属性是string类型,无法直接使用原生日期范围校验特性,可自定义轻量校验特性实现:
using System.ComponentModel.DataAnnotations; using System.Globalization; // 自定义校验特性:判断日期不晚于当日 public class NoFutureDateAttribute : ValidationAttribute { public override bool IsValid(object value) { if (value == null || string.IsNullOrWhiteSpace(value.ToString())) return true; // 空值校验交给Required特性处理 // 日期格式和前端datepicker配置保持一致 if (DateTime.TryParseExact(value.ToString(), "MM/dd/yy", CultureInfo.InvariantCulture, DateTimeStyles.None, out DateTime inputDate)) return inputDate.Date <= DateTime.Today; return false; } } // ViewModel属性标注 [NoFutureDate(ErrorMessage = "结束日期不能晚于今日")] public string EndOfWeek { get; set; }
提示:如果不想自定义校验特性,也可以在表单提交对应的Action方法中手动解析
EndOfWeek字段做范围判断,只要保证后端校验逻辑不缺失即可。
内容的提问来源于stack exchange,提问作者Ram P
相关产品推荐
相关产品推荐

