HTML时间表单序列化与格式验证问题求助（C#后端）

一、先修复核心代码错误 #

你提交代码里的表单选择器写错了：$("editForm") 应该是 $("#editForm")（缺少ID选择器的#），这是控制台输出为空的直接原因。另外别忘了阻止表单默认提交行为，否则Ajax请求会被页面刷新中断。修正后的提交代码：

$("#editForm").on("submit", function(event) {
    event.preventDefault();
    console.log($("#editForm").serializeObject());
    $.ajax({
        url: "/Items/SaveItem/",
        type: "POST",
        data: $("#editForm").serializeObject(),
        success: function(data) {
            if (data.message == "OK") {
                success("Item has been successfully saved!");
            }
        }
    });
});

二、强制HH:MM格式输入的两种可行方案 #

方案1：使用原生input type="time"控件 #

原生时间控件本身就会限制用户输入HH:MM格式，且能被jQuery序列化方法正常识别，之前的问题大概率是配置或选择器错误。调整后的表单代码：

<form id="editForm">
  <table>
    <tr>
      <th>From Time: </th>
      <td style="background-color:white;">       
        <input type="time" id="FROMTIME" name="FROMTIME" value="@Model.FROMTIME" 
               asp-for="FROMTIME" required step="60" form="editForm" />
      </td>
    </tr>
    <tr>
      <th>To Time: </th>
      <td style="background-color:white;">
        <input type="time" id="TOTIME" name="TOTIME" value="@Model.TOTIME" 
               asp-for="TOTIME" required step="60" form="editForm" />
      </td>
    </tr>
  </table>
</form>

• step="60"：确保控件只允许选择整分钟，严格匹配HH:MM格式
• 后端直接用TimeSpan类型接收即可，ASP.NET会自动完成参数绑定

方案2：文本输入框+正则验证 #

如果坚持用文本输入框，通过HTML原生属性和JS辅助来约束格式：

<form id="editForm">
  <table>
    <tr>
      <th>From Time: </th>
      <td style="background-color:white;">       
        <input type="text" id="FROMTIME" placeholder="HH:MM" name="FROMTIME" 
               value="@Model.FROMTIME" asp-for="FROMTIME" required 
               pattern="^([01]\d|2[0-3]):([0-5]\d)$" title="请输入HH:MM格式的时间" form="editForm" />
      </td>
    </tr>
    <tr>
      <th>To Time: </th>
      <td style="background-color:white;">
        <input type="text" id="TOTIME" placeholder="HH:MM" name="TOTIME" 
               value="@Model.TOTIME" asp-for="TOTIME" required 
               pattern="^([01]\d|2[0-3]):([0-5]\d)$" title="请输入HH:MM格式的时间" form="editForm" />
      </td>
    </tr>
  </table>
</form>

• pattern属性：用正则^([01]\d|2[0-3]):([0-5]\d)$强制验证小时（00-23）和分钟（00-59）的格式
• 可选JS辅助限制输入（防止非法字符）：

$("#FROMTIME, #TOTIME").on("input", function() {
    // 只保留数字和冒号
    this.value = this.value.replace(/[^0-9:]/g, '');
    // 输入到第2位时自动添加冒号
    if (this.value.length === 2 && !this.value.includes(':')) {
        this.value += ':';
    }
});

三、确保serializeObject方法可用 #

jQuery本身没有原生的serializeObject方法，需要自己实现：

$.fn.serializeObject = function() {
    var obj = {};
    var arr = this.serializeArray();
    $.each(arr, function() {
        if (obj[this.name]) {
            if (!obj[this.name].push) {
                obj[this.name] = [obj[this.name]];
            }
            obj[this.name].push(this.value || '');
        } else {
            obj[this.name] = this.value || '';
        }
    });
    return obj;
};

嫌麻烦的话也可以直接用jQuery原生的serialize()方法，它会生成URL编码的字符串，后端同样能正常接收：

data: $("#editForm").serialize(),

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