HTML表单约束的JavaScript-数字问题

HTML Form constrain by JavaScript--number issue

本文关键字：数字 问题 JavaScript- 表单 约束 HTML      更新时间：2023-09-26

我正在编写一个表单来请求输入权重范围的下限和上限，并返回权重范围内的对象。为了防止用户输入下限>上限(如:下限=5，上限=2)，我使用下面的javascript。测试时，当上限和下限均小于10时，表单生成预期结果。
但是，当我试穿时，它返回"下限大于上限"错误消息
此外，当我尝试lower=2和upper=30时，它再次工作。(我正在使用Chrome进行测试)似乎它只是比较下和上输入的第一个数字。不确定是否由不正确的输入类型或Javascript引起。有人能帮忙解决这个问题吗?由于

HTML5表单:

<label>Please enter lower limit: <input type="number" name="weightl" 
step="0.00000000001" min="0" id="weightl" autofocus required   
placeholder="Accepts decimal places"/></label>
<label>Please enter upper limit:<input type="number" name="weightu"
step="0.00000000001" min="0" id="weightu" autofocus required 
placeholder="Accepts decimal places"/></label>
<input type="submit" value="submit"/>
<input type="reset" value="Reset">
JAVASCRIPT: 

 <script type="text/javascript">
window.onload = function () {
document.getElementById("weightl").onchange = validateWeight;
document.getElementById("weightu").onchange = validateWeight;
}
function validateWeight(){
var up=document.getElementById("weightu").value;
var low=document.getElementById("weightl").value;
if(low>up)
document.getElementById("weightu").setCustomValidity("Upper limit has to be equal or greater than lower limit");
else
document.getElementById("weightu").setCustomValidity('');  
}
</script>

你在比较字符串，而不是数字。

if (+low > +up)

是解决这个问题的一种方法。

表单字段的"value"属性总是一个字符串。JavaScript字符串比较不会仅仅因为字符串看起来像数字就自动将其视为数字。在变量引用前加上+强制转换为数字。还有其他方法:

if (Number(low) > Number(up))

或

if (parseFloat(low) > parseFloat(up))

等。

相关文章：