Die Überprüfung der Telefonnummernlänge mithilfe von JQuery funktioniert nicht

Question

Ich versuche, die Länge der Telefonnummer mithilfe von JQuery zu validieren. Wenn der Benutzer anfängt, etwas von sich selbst einzugeben, sollte es angezeigt werden. Ich habe den folgenden Code ausgeführt:

function validatePhone(phone) {
  if (phone.value.length <= 10 && phone.value.length >= 5) {
    let
    var = 'Yes';
    return var;
  } else {
    let
    var = 'No';
    return var;
  }
}

function validate() {
  let result1 = $("#result1");
  let phone = $("#phone").val();
  result1.text("");


  if (validatePhone(phone)) {
    result1.text(var);
    result1.css("color", "green");
  }
  return false;
}
jQuery(function($) {
  $("#phone").on("input", validate);
});

<input type="number" class="form-control"  id="phone" name="phone">
<span class="label">Phone Number<span style="color:red">*</span> <span id="result1"></span></span>

Aber das funktioniert nicht. Kann mir jemand sagen, was hier falsch ist, vielen Dank im Voraus

Answer 1

我稍微清理了你的代码，基本上没问题，但你有一些小的语法错误和逻辑错误。我还建议使用 label 标签。如果您愿意，代码可以写得更短！

function validatePhone(phone) {
  if (phone.length <= 10 && phone.length >= 5) {
    return true;
  } else {
    return false;
  }
}

function validate() {
  let result1 = $("#result1");
  let phone = $("#phone").val();
  result1.text("");


  if (validatePhone(phone)) {
    result1.text("great!");
    result1.css("color", "green");
  } else {
    result1.text("please input phone number");
    result1.css("color", "red");
  }
}

jQuery(function($) {
  $("#phone").on("input", validate);
});

HTML

Phone Number *

我还建议你看看 css:valid 规则！ https://developer.mozilla.org/en-US/docs /Web/CSS/:有效