用min和max可限制number输入框范围，但仅作提示和基础校验；需配合type="number"、step及JavaScript实时修正，并必须服务端二次校验。

用 min 和 max 属性就能限制 type="number" 输入框的数值范围，但要注意它们只起提示和基础校验作用，不能完全阻止非法输入。

基础写法：直接加 min 和 max

这是最常用的方式，浏览器会禁用上下箭头越界、标记越界输入为无效（:invalid），并在提交时拦截部分非法值：

• —— 限制 0 到 100 的整数
• —— 支持两位小数，步长对齐精度
• 属性值必须是数字字符串，比如 min="5" 合法，min=5（无引号）或 min="5px" 无效

常见失效原因与修复

如果设置了 min/max 却没效果，大概率是以下几种情况：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 漏写 type="number" —— 若写成 type="text" 或没写 type，min/max 完全被忽略
• 初始 value 超出范围 —— 比如 会触发验证错误，建议用 defaultValue 或 JS 动态赋值
• 用户粘贴或手动输入越界值 —— 浏览器不实时拦截，仅在失焦或提交时提示，需配合 JavaScript 补强

增强控制：配合 step 与 JavaScript

单靠 HTML 属性不够可靠，尤其涉及小数或严格截断时：

• step 不仅影响按钮增减，还参与表单验证：设 step="0.01" 时，1.005 会被认为非法（无法被 0.01 整除）
• 监听 input 事件做实时修正，例如限制 0–100、两位小数：
  
  然后用 JS 获取 parseFloat(e.target.value)，判断范围并用 toFixed(2) 格式化
• 注意光标位置：直接赋值会重置光标，应先记录 selectionStart/End，再恢复

服务端必须二次校验

无论前端怎么限制，用户都能通过开发者工具修改、绕过表单提交或构造请求发送任意值：

• FormData.get() 或 input.value 拿到的永远是字符串，需服务端转为数字并重新验证范围
• 不要信任 valueAsNumber —— 它可能返回 NaN（空值或非法字符时）
• 推荐服务端逻辑：解析失败 → 报错；解析成功但超出 min/max → 拒绝；允许空值需单独定义规则

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！