如果字符超出文本框更改为红色 bg，如何将最小值设置为 2，最大值设置为 10 个字符？

Question

我有下面的代码。我希望我的最大字符输入为 10，最小为 2。但是当我输入的最小字符为 2 甚至小于 10 个字符时，我尝试了，我的文本框仍然变为红色。我不能在这里 HTML maxlength 或 minlength。

这个条件if (fname.value.match(/\S/)) 在它应该检查空格时检查文本框是否不为空。我尝试使用!= ""，但是当我输入一些内容时，它会在我调试时被跳过。

function validation() {

  var fname = "";
  var add = "";
  var message = "";
  // retrieving ids
  fname = document.getElementById('fname');
  add = document.getElementById('add');
  // white to red
  if (fname.value.match(/\S/)) {
    fname.style.backgroundColor = "white";
  }
  if ((fname != '') || (fname.value >= 10 || fname.value <= 2)) {
    fname.style.backgroundColor = "red";
  }
  // white to red
  if (add.value.match(/\S/)) {
    add.style.backgroundColor = "white";
  }
  if ((add != '') || (add.value >= 10 || add.value <= 2)) {
    add.style.backgroundColor = "red";
  }

  if (fname.value == "") {
    alert("Firstname is empty! Enter your firstname to resume");
    return false;
  }

  if (add.value == "") {
    alert("Address is empty! Enter your address to resume");
    return false;
  }
}

<form onsubmit="return validation()">

  Firstname:<br>
  <input type="text" name="fname" id="fname">
  <br> Address:
  <br>
  <input type="text" name="add" id="add">
  <br><br>

  <input type="submit" onClick="validation(); return false;" value="Submit">
</form>

Answer 1

您应该检查值的长度是否在 2 到 10 之间，而不是值本身。像这样：

function validation() {
  var fname = document.getElementById('fname');
  var add = document.getElementById('add');
  
  if (2 <= fname.value.length && fname.value.length <= 10) { // if there is input between 2 and 10 characters, then set the background to white
    fname.style.backgroundColor = "white";
  }else {                                                    // otherwise, ...
    fname.style.backgroundColor = "red";
    alert("name is not valid!");
    return false;
  }
  
  
  if (2 <= add.value.length && add.value.length <= 10) {     // if there is input between 2 and 10 characters, then set the background to white
    add.style.backgroundColor = "white";
  }
  else {                                                     // otherwise, ...
    add.style.backgroundColor = "red";
    alert("addres is not valid!");
    return false;
  }
  
  return true;
}

<form onsubmit="return validation()">

  Firstname:<br>
  <input type="text" name="fname" id="fname">
  <br> Address:
  <br>
  <input type="text" name="add" id="add">
  <br><br>

  <input type="submit" onClick="validation(); return false;" value="Submit">
</form>