Question

我使用javascript检查用户输入的高度长度，但是我面临的问题是，即使javascript也仅检查输入的第一个数字并引发错误。仅举一个例子，如果我必须输入45的高度，输入4后我会得到一个错误的高度必须在6-36之间，它不能让我输入5，而当我尝试删除移动并且输入变为空时，它再次抛出误差高度必须在6-36之间。请帮助我找到问题。

<input type="number" id="message1" name="height" oninput="function_two()">

function function_two() {
    var FrameHeight = document.getElementsByName('height')[0].value;
    if (FrameHeight <= 36 && FrameHeight >= 6) 
        return true;
    else 

    alert("Height must be between 6-36");
  }

Answer 1

您使用了错误的事件（input），该事件在向字段提供任何输入时都会触发。使用change事件，该事件在值更改且字段失去焦点时触发。

此外，将JavaScript与HTML分开。使用现代的，基于标准的做法来处理事件，而不要使用内联HTML事件属性which should not be used。

有关解决方案的其他调整，请参见以下评论，以使代码更高效和/或将其更新为现代标准。

// Get your DOM reference just once. .querySelector() is preferred
// over .getElementsByName, .getElementsByTagName, .getElementsByClassName
// as the former returns a static node list and the latter(s) return 
// live node lists that hurt performance.
let nameInput = document.querySelector("input[name='height']");

// And set up event handlers in JavaScript, not HTML
nameInput.addEventListener("change", rangeCheck);

// Name functions with descriptive names as to what they do.
// Don't use the word "function" in a function name.
function rangeCheck() {
    // In a DOM event handler, you can just use "this" as a reference
    // to the DOM element that triggered the event.
    var FrameHeight = this.value;
    // Just test for the bad values and act accordingly
    if (FrameHeight < 6 || FrameHeight > 36) {
      alert("Height must be between 6-36");
    }
}

<input type="number" id="message1" name="height">

Answer 2

该代码应如何知道要添加的位数？这样就触发了验证？此刻，该函数在用户每次输入时即每次用户键入时都被调用。

我建议您使用change作为事件，在用户更改输入后离开输入时触发该事件，或者将类型更改为range。这样，您无需进行验证。

我建议您使用<input type="range" min="6" max="36" step="1" /> 如果你可以的话。请注意，并非所有浏览器都支持它，因为它是HTML5元素。

Answer 3

像您这样的声音有一些问题，因此有两种可能的解决方法

如果您希望错误出现在第一个字符之后，但仍希望能够继续输入字符直到满足要求，请尝试通过将错误添加到页面的某处而不是使用警报来显示错误。

如果只想在输入完毕后检查该值，则可以使用onchange代替oninput，尽管这意味着用户将必须使输入散焦。

如果您想在某人完成输入但不必使输入散焦时检查该值，则应使用防抖功能来检查。 Underscorejs有一个不错的选择，或者您可以编写自己的一个。

Answer 4

功能正常。 4小于6，因此会引发错误。最好的前进方法是在用户完成键入后运行功能。为此，请将html部分编辑为onchange。

<input type="number" id="message1" name="height" onchange="function_two()"> 


function function_two() {
 var FrameHeight = this.value;
  if( trim (value ) == '' ){
     return false;
   }
  if (FrameHeight < 6 || FrameHeight > 36) { 
     alert("Height must be between 6-36");
   } 
}

Answer 5

@TinyGiant谢谢。有效

onchange="function_two()"

Answer 6

我认为重点关注事件会帮助https://api.jquery.com/focusout/

Answer 7

您正在验证输入的每个击键，因此您可能需要结合使用oninput和onblur来验证整个值和击键的发生。

尝试这样的事情：

<html>
<head>
<style>
    input.invalid {
        background-color: red;
    }
</style>
<script>
    function validateInput(inputElement) {
       var frameHeight = inputElement.value
       if (isValidHeight(frameHeight)) {
           inputElement.className = ""
       } else {
          inputElement.className = "invalid"
       }
    }

    function validateFrameHeight(inputElement) {
        var frameHeight = inputElement.value
        if(!isValidHeight(frameHeight)) {
            alert("Height must be between 6-36");
        }
    }

    function isValidHeight(frameHeight) {
        return frameHeight <= 36 && frameHeight >= 6
    }
</script>
</head>
<body>

    <input class="invalid" type="number" id="message1" name="height" oninput="validateInput(this)" onblur="validateFrameHeight(this)">

</body>

输入完成后运行javascript

7 个答案: