如何为带有readonly属性的表单元素添加max值校验规则？

问题原因 #

HTML 原生表单的约束验证逻辑默认会跳过带有readonly、disabled、hidden属性的输入项，所以你给input加了readonly之后，设置的max属性自然不会被纳入提交校验范围。另外你现有代码还有个小问题：script标签放在input元素前面，执行时还没渲染出id为demo的元素，赋值会报错，需要把script移到input后面。

实现方案 #

方案1：监听表单提交事件自定义校验 #

不用依赖原生max校验，自己在表单提交时判断值是否符合要求，不符合就阻止提交：

<!DOCTYPE html>
<html>
<head>
  <title>Max for readonly</title>
</head>
<body>
  <form id="myForm">
    <input id="demo" type="number" max="10" readonly>
    <input type="submit">
  </form>

  <script>
    var x = 5;
    var y = 7;
    var sum = x + y;
    const demoInput = document.getElementById('demo')
    demoInput.value = sum;

    // 监听表单提交事件
    document.getElementById('myForm').addEventListener('submit', function(e) {
      const maxVal = Number(demoInput.getAttribute('max'))
      if (Number(demoInput.value) > maxVal) {
        e.preventDefault() // 阻止提交
        // 可自定义提示，也可以用原生校验提示
        demoInput.setCustomValidity('总和不能超过10')
        demoInput.reportValidity()
      }
    })
  </script>
</body>
</html>

方案2：替换readonly属性，实现不可编辑同时保留原生校验 #

如果想继续用原生的max校验，可以不用readonly，通过禁止输入操作实现不可编辑的效果，原生校验就会正常生效：

<input id="demo" type="number" max="10" onkeydown="return false" onpaste="return false">

这里的onkeydown="return false"禁止用户键盘输入，onpaste="return false"禁止粘贴，效果和readonly一致，同时不会被原生校验跳过。

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