简单Javascript 文本框验证错误

Question

我正在尝试检查输入到文本框中的字符长度是否小于 6，如果是，我希望它的背景为红色。不幸的是，我似乎无法弄清楚这个简单问题哪里出了问题。

var textBox = getElementsByName('random');
function checkLength() {
  if (textBox.value.length < 6) {
    textBox.style.backgroundColor = "red";
  }
}

<input type="text" name="random" onfocus="checkLength();">

Answer 1

您的代码中存在一些问题：

您需要将 <script> 代码放在末尾，以便在您访问其中的元素之前加载并准备好 DOM。
getElementsByName('random') 需要 document.getElementsByName('random')，这实际上是 return 一个列表，因此您需要从列表中获取第一个元素。
也顺理成章，你需要去掉红色背景一次的文字输入的长度超过 6，如果将函数附加到 oninput 事件会更好。

<input type="text" name="random" oninput="checkLength();">
<script type="text/javascript">
  var textBox = document.getElementsByName('random')[0];
  function checkLength() {
    if (textBox.value.length < 6) {
      textBox.style.backgroundColor = "red";
    } else {
      textBox.style.backgroundColor = "white";
    }
  }
 </script>

Answer 2

首次加载页面时，名称为 random 的元素不存在。

您需要在页面加载后初始化 textBox 全局。

您可以通过替换

来做到这一点

var textBox = document.getElementsByName("random")[0]

和

var textBox;
window.onload = function() {
    textBox = document.getElementsByName("random")[0]
}

Answer 3

试试这个

// add an id of "random" to your input
function checkLength() {
  const textBox = document.getElementById("random")
  if (textBox.value.length < 6) {
    textBox.style.backgroundColor = "red";
  } else {
    textBox.style.backgroundColor = "white";
  }
}

工作示例：http://jsbin.com/caseqekusi/1/edit?html,js,output

注意：如果你想让方框马上变成红色，你就得稍微修改一下，有问题请告诉我。

Answer 4

我建议也使用 oninput，这样它会在您输入时更新并在您达到一定长度后立即将字段标记为 "valid"。

您也可以使用 document.activeElement 删除 var textbox = ...。它使您的函数可重用于其他输入字段。加载代码时不再重要。

function checkLength() {
  // Get current focused element
  const textBox = document.activeElement;
  if ( !textBox.value || textBox.value.length < 6 ) {
    textBox.style.backgroundColor = "red";
  }
  else {
    textBox.style.backgroundColor = "#fff";
  }
}

<input type="text" name="random" onfocus="checkLength()" oninput="checkLength()">

简单Javascript 文本框验证错误

Simple Javascript text box verification error

html

javascript

css

email-verification