17370845950

html5 的 `min` 和 `max` 属性仅对数值型或日期型输入（如 `type="number"`、`type="date"`）生效，无法用于 `type="text"` 的字符长度限制；需改用 `pattern` 正则属性配合 `title` 提供用户友好的错误提示。

在您的场景中， 之所以未触发验证，根本原因在于：min/max 属性对 type="text" 无效。浏览器仅将这两个属性应用于语义化数值类型（如 number、range）或时间类型（如 date、datetime-local），其作用是校验解析后的数值大小，而非字符串长度。例如：

您希望实现“客户编号必须为 5 位字符（含前导零）”，这本质是字符串长度约束，应使用 HTML5 的 pattern 属性：

• pattern="^.{5}$" 表示：从头到尾恰好匹配 5 个任意字符（. 匹配除换行符外的任意单字符）；
• title 属性会在验证失败时作为原生提示文案显示（无需 JavaScript）；
• 该验证会在表单提交时自动触发，与 required 协同工作。

✅ 关键修复建议（JavaScript 动态生成时）： 在 updatePage 函数中，替换原 custnum 字段的 min/max 设置逻辑，改为添加 pattern 和 title：

if (input.name === "custnum") {
  input.pattern = "^.{5}$";
  input.title = field.error || "Customer number must be exactly 5 characters.";
  // 移除 input.min / input.max —— 它们对 text 类型无意义
}

此外，请注意：

• 若需纯数字且不允许前导零，可改用 pattern="^[1-9][0-9]{4}$"；
• 若需严格数字+长度校验（同时兼容移动端数字键盘），推荐 type="tel" + pattern（避免 number 类型自动过滤前导零）；
• 始终保留服务端校验（如 ASP.NET Core 模型验证），因客户端验证可被绕过。

综上，min/max 不是万能的长度控制工具；面对文本长度约束，请坚定选择 pattern —— 它语义清晰、原生支持、无需额外 JS，且与动态渲染完全兼容。