ASP.NET中GridView表头日期搜索文本框仅允许输入数字与斜杠的实现

我太懂这种痛点了——自带的TextMode="Date"看着方便，实则受浏览器原生控件限制，样式难统一不说，还没法灵活适配你要的多种输入格式。咱们自己动手搞个更靠谱的版本：

1. 前端输入限制：仅允许数字和斜杠 #

先在ASPX页面里定义你的输入框：

<asp:TextBox ID="txtDateSearch" runat="server" CssClass="date-search-input" placeholder="示例：01、01/13或01/13/2018"></asp:TextBox>

然后写一段JavaScript过滤非法输入，还能自动帮用户补全斜杠，提升输入体验：

// 监听输入事件，过滤非法字符+自动补斜杠
document.querySelector('.date-search-input').addEventListener('input', function(e) {
  // 只保留数字和斜杠
  let cleanValue = e.target.value.replace(/[^0-9/]/g, '');
  // 输入到第2位自动加/（比如输入01变成01/）
  if (cleanValue.length === 2 && !cleanValue.includes('/')) {
    cleanValue += '/';
  }
  // 输入到第5位自动加/（比如输入01/13变成01/13/）
  else if (cleanValue.length === 5 && cleanValue.charAt(2) === '/' && !cleanValue.includes('/', 3)) {
    cleanValue += '/';
  }
  e.target.value = cleanValue;
});

// 键盘按键拦截，防止非法字符输入
document.querySelector('.date-search-input').addEventListener('keydown', function(e) {
  // 允许的按键：数字（主键盘+小键盘）、斜杠、退格、Tab、回车、方向键、删除
  const allowedKeys = [48,49,50,51,52,53,54,55,56,57, 96,97,98,99,100,101,102,103,104,105,
                       111,191, 8,9,13,37,39,46];
  if (!allowedKeys.includes(e.keyCode)) {
    e.preventDefault();
  }
});

2. 格式验证：确保输入符合要求 #

光限制输入还不够，得验证最终内容是不是你要的三种格式。可以在搜索按钮点击时做校验：

function validateDateInput(inputVal) {
  // 三种合法格式的正则表达式
  const validPatterns = [
    /^(0[1-9]|1[0-2])$/, // 单月份：01-12
    /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])$/, // 月日：MM/DD（注：未严格校验月份对应天数，比如2月30号，需要的话可扩展）
    /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/ // 年月日：MM/DD/YYYY
  ];
  // 检查是否匹配任意一种格式
  return validPatterns.some(pattern => pattern.test(inputVal.trim()));
}

// 搜索按钮点击时验证
document.querySelector('#btnSearch').addEventListener('click', function(e) {
  const dateVal = document.querySelector('.date-search-input').value;
  if (!validateDateInput(dateVal)) {
    alert('请输入合法格式：比如01、01/13或01/13/2018');
    e.preventDefault(); // 阻止搜索提交
  }
});

3. 后端（ASP.NET）的安全校验与逻辑处理 #

别光靠前端验证，后端也要再做一次校验（防止前端被绕过），然后根据输入格式构建查询条件：

protected void btnSearch_Click(object sender, EventArgs e)
{
    string dateInput = txtDateSearch.Text.Trim();
    // 后端正则验证格式
    bool isValid = System.Text.RegularExpressions.Regex.IsMatch(dateInput, 
        @"^(0[1-9]|1[0-2])$|^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])$|^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$");
    
    if (!isValid)
    {
        lblError.Text = "请输入合法的日期格式：例如01、01/13或01/13/2018";
        return;
    }

    // 根据输入格式构建查询条件
    string queryCondition = string.Empty;
    if (dateInput.Length == 2)
    {
        // 按月份查询
        queryCondition = $"MONTH(YourDateColumn) = {dateInput}";
    }
    else if (dateInput.Length == 5)
    {
        // 按月日查询
        string[] parts = dateInput.Split('/');
        queryCondition = $"MONTH(YourDateColumn) = {parts[0]} AND DAY(YourDateColumn) = {parts[1]}";
    }
    else if (dateInput.Length == 10)
    {
        // 按完整日期查询
        DateTime fullDate = DateTime.ParseExact(dateInput, "MM/dd/yyyy", System.Globalization.CultureInfo.InvariantCulture);
        queryCondition = $"YourDateColumn = '{fullDate.ToString("yyyy-MM-dd")}'";
    }

    // 后续执行查询并绑定GridView的逻辑...
}

小补充 #

如果需要更严格的日期合法性校验（比如过滤2月30号、4月31号这类错误），可以在JavaScript里用Date对象解析验证，或者在后端用DateTime.TryParseExact来判断。

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