是否可以确保用户'；s输入不'；不超过JavaScript中的特定范围？

因此，我目前有一个设置，其中有输入框，采取数字。范围是0-100。我想把这个值保持在这个范围内，所以如果它被设置为，200，它只会限制在100，或者在负数的情况下限制在0

我想用if语句是可能的。但是我看到它工作的唯一方式是通过多个

if

/

else if

语句。所以我想知道是否有其他方法来实现这个目标

我的代码：

函数updateStats（）{
var hp=document.getElementById（“hpValue”）.value；
var mp=document.getElementById（“mpValue”）.value；
var-strength=document.getElementById（“strengthValue”）.value；
var defence=document.getElementById（“defenceValue”）.value；
var speed=document.getElementById（“speedValue”）.value；
var luck=document.getElementById（“luckValue”）.value；
document.getElementById（“hpBar”）.style.width=hp+“%”；
document.getElementById（“mpBar”）.style.width=mp+“%”；
document.getElementById（“strBar”）.style.width=strength+“%”；
document.getElementById（“defBar”）.style.width=defence+“%”；
document.getElementById（“speedBar”）.style.width=speed+“%”；
document.getElementById（“luckBar”）.style.width=luck+“%”；
}

表格{
边界塌陷：塌陷；
}
桌子
th，
运输署{
边框：1px纯黑；
}
.斯塔巴斯伯格{
背景色：#808080；
文本对齐：左对齐；
高度：20px；
宽度：350px；
-webkit外观：无；
边界：无；
字体大小：粗体；
/*将进度条设置为相对*/
位置：相对位置；
}
.斯塔巴什{
背景颜色：绿色；
高度：20px；
}
斯塔巴先生{
背景颜色：紫色；
高度：20px；
}
statbarsSTR先生{
背景色：红色；
高度：20px；
}
.statbarsDEF{
背景色：深蓝色；
高度：20px；
}
.StatBarspd{
背景色：粉蓝色；
高度：20px；
}
斯塔巴斯勒克先生{
背景颜色：卡其色；
高度：20px；
}
输入：无效{
边框：3倍纯红；
}

字符等级：B
斯达
水平仪
值（在0-100之间）
惠普
使用
。要设置范围，可以使用属性
min
和
max

例如：


要防止用户键入高于最大值或低于最小值的值，可以使用以下脚本：

function checkMinMax(event) {
var value = this.value,
    min = this.getAttribute('min'),
    max = this.getAttribute('max');

if(value < min)
    this.value = min;
else if(value > max)
    this.value = max;
}

window.addEventListener('load', function() {
    document.getElementById('yourinput').addEventListener('keyup', checkMinMax);
});

函数checkMinMax（事件）{
var值=此.value，
min=此.getAttribute（'min'），
max=this.getAttribute（'max'）；
如果（值<最小值）
该值=最小值；
否则如果（值>最大值）
该值=最大值；
}
addEventListener（'load'，function（））{
document.getElementById（'yourinput'）。addEventListener（'keyup'，checkMinMax）；
});
首先，让我们澄清很多重复

const map = {
    hpValue: 'hpBar',
    mpValue: 'mpBar',
    strengthValue: 'strBar',
    defenseValue: 'defBar',
    speedValue: 'speedBar',
    luckValue: 'luckBar'
};
for (let fieldId in map)
    document.getElementById(map[fieldId]).style.width = document.getElementById(fieldId).value+'%';

现在，在函数之外，我们可以监听
输入
事件并相应地采取行动

document.addEventListener('input', evt => {
    if (!evt.target.matches('table input')) return;
    let intVal = parseInt(evt.target.value);
    if (isNaN(intVal)) return evt.target.value = '';
    if (intVal < 0) return evt.target.value = 0;
    if (intVal > 100) return evt.target.value = 100;
});

document.addEventListener（'input'，evt=>{
如果（！evt.target.matches（'table input'））返回；
让intVal=parseInt（evt.target.value）；
if（isNaN（intVal））返回evt.target.value=''；
如果（intVal<0）返回evt.target.value=0；
如果（intVal>100）返回evt.target.value=100；
});

.
您可以使用正则表达式来测试输入的值是否是介于0和100之间的数字

if (document.getElementById("hpValue").value.match(/^(\d{1,2}|100)$/)){
  // value was a number between 0 and 100
}

您可以创建一个可恢复的函数来测试该值：

function isValidRange(inputValue){
   return inputValue.match(/^(\d{1,2}|100)$/);
}

// usage:
if(isValidRange(document.getElementById("hpValue").value)){
   // value was a number between 0 and 100
}

使用evilgenious448指出的输入type='number'是一个很好的提示，但效果不佳，因为您可以通过键盘插入更大的值

您可以使用Jquery库

首先，向所有输入添加一个公共类，即
class=“inpt”

然后，一次检索所有输入字段并应用if语句

$(document).on("change", ".inpt", function() {
    $(".inpt").each(function(){
        if ($(this).val() > 100) $(this).val(100);
        if ($(this).val() < 0) $(this).val(0);
    });
});

$（document）.on（“change”，“.inpt”，function（））{
$（“.inpt”）.each（函数（）{
如果（$（this.val（）>100）$（this.val（100）；
if（$（this.val（）<0）$（this.val（0）；
});
});
使用以下代码进行多输入框验证（最小值和最大值）：

例如：

<input type="number" min="0" max="100" onkeyup="myFunction(event, 0, 100)">

<input type="number" min="100" max="200" onkeyup="myFunction(event, 100, 200)">

<script>
    function myFunction(e, minValue, maxValue){
        let number = e.target.value;
        if(number > maxValue){
            // check if number is greater than max value
            e.target.value = maxValue;
        }else if(number < minValue){
            //check if number is less than min value
            e.target.value = minValue;
        }
    }
</script>


函数myFunction（e、minValue、maxValue）{
设数字=e.目标值；
如果（数字>最大值）{
//检查数字是否大于最大值
e、 target.value=最大值；
}else if（数字<最小值）{
//检查数字是否小于最小值
e、 target.value=minValue；
}
}
Try:Math.max（Math.min（value，100），0）您可以使用具有最大长度属性的输入吗
-这不会阻止用户键入他们想要的任何内容，但它确实让您可以访问内置的有效性检查，使其变得像
if（inputElement.Validity.valid）{…}
一个旁注一样简单，以防万一。虽然Javascript可以引导用户更正值，接收服务器端脚本不能依赖Javascript检查，提交后需要重新测试值。这将防止用户键入为您编辑的min/max？@Slateboard之外的值，并防止键入min/MaxEx之外的值如果要使用正则表达式，为什么不使用模式attrbute？MDN参考：正则表达式检查是客户端最后要做的事情之一，因为它们通常要慢得多，我不认为页面用户会注意到使用正则表达式和不使用正则表达式之间有几毫秒的差异，这当然不是否决这个答案的理由。这对我来说非常有效。它看起来也好多了。谢谢。我不太赞成在事件处理程序中使用
return evt.target.value=0
，我觉得这可能有点太接近
return false这可能会取消事件。。。