disabled/readonly状态下input的checkValidity始终返回true是否符合预期？

当表单控件处于disabled或readonly状态时，原生checkValidity()方法返回true是完全符合规范的，具体原因如下：

• 禁用（disabled）控件：HTML表单验证逻辑会直接忽略所有禁用的控件，它们不会参与任何验证规则的检查——无论是否满足required等条件，checkValidity()都会返回true。
• 只读（readonly）控件：虽然只读控件保留了值，但规范明确规定required这类验证规则不会作用于只读控件，因此调用checkValidity()也会返回true。

如果需要对这类控件强制进行有效性检查，可以通过以下方式实现：

• 临时移除disabled/readonly属性，调用checkValidity()完成验证后再恢复属性；
• 手动编写逻辑检查控件的值是否符合要求，不依赖原生表单验证方法。

你的代码示例 #

JavaScript代码

let v1 = $("#i1")[0].checkValidity();
$("#l1")[0].innerHTML = "Validity Before Disabling field:<b>" + v1 + "</b";
$("#i1").prop("readonly", true);
let v2 = $("#i1")[0].checkValidity();
$("#l2")[0].innerHTML = "Validity After  Disabling field:<b>" + v2 + "</b";

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <body>
    <div>
    <form>
    Input: <input id="i1" name="i1" required>
    </form>
    <br>
    <label id="l1"></label><br>
    <label id="l2"></label>
    </div>
  </body>
</html>

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