HTML中如何对只读的number类型输入字段进行数值验证？

问题根因 #

• HTML原生min属性的校验规则仅对用户手动交互的非只读输入框生效，被标记readonly的输入框会被浏览器跳过原生表单校验，同时自动填充的赋值逻辑不会主动触发范围校验，所以负数会被正常填入。
• 你当前代码还存在一个不规范写法：外层div重复定义了两个style属性，后面的margin-left:200px会被前面的样式覆盖失效，可合并为style="float:left;margin-left: 200px;"。

修复方案 #

1. 自动填充阶段直接限制取值（最优先） #

在给该输入框赋值的自动填充JS逻辑中增加范围限制，从源头避免负数写入：

// adminTimeVal为你自动填充拿到的原始数值
const adminTimeInput = document.getElementById('admin_time')
adminTimeInput.value = Math.max(0, Number(adminTimeVal))

2. 表单提交前补充校验 #

给表单增加提交事件监听，提交前二次校验字段合法性，避免特殊场景绕过填充逻辑：

document.querySelector('form').addEventListener('submit', function(e) {
  const adminTime = Number(document.getElementById('admin_time').value)
  if (adminTime < 0) {
    e.preventDefault()
    // 可自定义错误提示，适配你当前用的Bootstrap样式
    document.getElementById('admin_time').classList.add('is-invalid')
  }
})

3. 后端增加校验兜底（必须做） #

前端校验都可被用户手动绕过，从你代码中的@error语法判断你用的是Laravel框架，可在后端请求验证逻辑中增加最小值规则：

$request->validate([
    'admin_time' => 'required|integer|min:0',
    // 其余字段校验规则
]);

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