如何在设置最小值和最大值后不接受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，它超过了最大值，但按下回车键后它仍然可以接受，它正在验证，但如果输入值超过了最大，那么它应该超过最大值。

Answer 1

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

Answer 2

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

这应该能解决问题！

这里有一个codepen.io链接！

Answer 3

您可以阅读HTML5约束验证

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