为什么禁用表单提交会影响最小和最大属性？

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执行其承诺的操作，它只是提交表单，不进行验证。您可以使用该checkValidity方法手动进行验证。

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