在设置min和max值后，如何不接受html输入框中超出范围的值

Question

      <label for="interest-rate">Interest Rate</label>
      <input
        type="number"
        id="interestRate"
        name="loancalc"
        placeholder="0"
        min="0"
        max="30"
        class="validateMinMax"
        oninput="this.form.interestRangeRate.value = this.value"

        ;
      /><span class="input-group-text">%</span>
      <br />
      <input
        type="range"
        name="loancalc"
        id="interestRangeRate"
        min="0"
        max="30"
        oninput="this.form.interestRate.value=this.value"
        ;
      />

在输入框中，如果输入大于最大值的40，但按下enter按钮后仍在接受，则验证，但如果输入值大于最大值，则应传递最大值。

Answer 1

您应该添加submit操作数据的附加验证。这就是html输入的工作方式。您可以尝试使用自定义number input库来处理它。

Answer 2

将oninput="this.form.interestRate.value=this.value替换为oninput="checkValue(this);

这应该能修好它！

这里是一个codepen.io链接！

Answer 3

你可以读一下HTML5约束验证

<input  type="number" id="interestRate" pattern="[0-30]"  />
<script>
    document.getElementById('interestRate').validity.patternMismatch;
</script>