javascript - 为什么禁用表单提交会影响 min 和 max 属性？

Question

我正在使用 min 和 max 属性对 HTML 表单进行一些验证。如果单击提交按钮一次以防止在重新加载页面之前提交多个表单，我还想阻止表单提交。

这是禁用按钮的内联代码:

<input type="submit" name="name" value="REGISTER" onclick="this.disabled=true;this.form.submit();">

这是数字输入字段代码:

<input type="number" name="endNo" placeholder="END" min="5" max="20">

如果我为提交按钮包含内联 JS，最小和最大验证将不起作用。删除后，它似乎工作得很好。为什么会发生这种情况，我如何才能同时满足这两个条件，在单击后禁用按钮，同时仍然验证数字输入字段的最小值和最大值？

我正在使用谷歌浏览器。

Answer 1

表单元素上的 submit 方法做了它所 promise 的，它只是提交表单，不做验证。您可以使用 checkValidity 方法手动进行验证。

<input type="submit" name="name" value="REGISTER" 
    onclick="if(this.form.checkValidity()){this.disabled=true;this.form.submit();}">