JavaScript 如何限制一个数字的最小/最大值

给定HTML文档。任务是，在通过input元素从用户那里获取一个数字作为输入时，验证该数字是否在指定范围内。如果不是，则将其更改为在范围内。这里使用JavaScript讨论了两种方法。

方法1

从输入元素获取输入并使用 Number()方法 将其转换为数字。
使用 IF-ELSE条件语句 来验证数字是否在范围内。
如果数字小于最小值，则将其设为最小值；否则，如果数字大于最大值，则将其设为最大值；否则，数字本身就在范围内。

示例1： 示例实现了上述方法。

<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> 
    </script> 
</head> 
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
    <p id="GFG_UP"> 
    </p> 
    Enter a Number: 
    <input id="num" /> 
    <br> 
    <br> 
    <button onclick="GFG_Fun();"> 
        click here 
    </button> 
    <p id="GFG_DOWN"> 
    </p> 
    <script> 
        var up = document.getElementById('GFG_UP'); 
        var down = document.getElementById('GFG_DOWN'); 
        up.innerHTML = 
        "Click on the button to check if the types number"+ 
        " is in range or not.<br>Min Value - 0 <br> Max Value - 100"; 
          
        function GFG_Fun() { 
            var input = document.getElementById('num'); 
            var n = input.value; 
            n = Number(n); 
            if (n < 0) { 
                 $('#GFG_DOWN').html('Type number between 0-100');                 input.value = 0;             } else if (n>100) {$ ('#GFG_DOWN').html('Type number between 0-100'); 
                input.value = 100; 
            } else { 
                $('#GFG_DOWN').html('You typed the valid Number.'); 
                input.value = n; 
            } 
        } 
    </script> 
</body>

输出：

JavaScript 如何限制一个数字的最小/最大值

方法2

从输入元素获取输入，并使用 Number()方法 将其转换为数字。
使用 Math.max和Math.min方法 验证其是否在范围内？
如果数字小于最小值，则给它最小值，否则。
如果数字大于最大值，则给它最大值，否则数字就在范围内。

示例2： 此示例实现了上述方法。

<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> 
    </script> 
</head> 
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
    <p id="GFG_UP"> 
    </p> 
    Enter a Number: 
    <input id="num" /> 
    <br> 
    <br> 
    <button onclick="GFG_Fun();"> 
        click here 
    </button> 
    <p id="GFG_DOWN"> 
    </p> 
    <script> 
        var up = document.getElementById('GFG_UP'); 
        var down = document.getElementById('GFG_DOWN'); 
        up.innerHTML = 
        "Click on the button to check if the types number "+ 
            "is in range or not.<br>Min Value - 0 <br> Max Value - 100"; 
          
        function GFG_Fun() { 
            var input = document.getElementById('num'); 
            var n = input.value; 
            n = Number(n); 
            n = Math.min(100, Math.max(0, n)); 
            $('#GFG_DOWN').html('Number ranged to <br>N = ' + n); 
        } 
  </script> 
</body>

输出：

JavaScript 如何限制一个数字的最小/最大值