Mengesahkan panjang nombor telefon menggunakan jquery tidak berfungsi

Question

Saya cuba mengesahkan panjang nombor telefon menggunakan jquery, apabila pengguna mula menaip sesuatu tentang diri mereka sendiri, ia sepatutnya ditunjukkan, saya melaksanakan kod berikut:

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>

Tetapi ini tidak berfungsi, bolehkah seseorang memberitahu saya apa yang salah di sini, terima kasih terlebih dahulu

Answer 1

Saya telah membersihkan sedikit kod anda dan ia pada asasnya baik, tetapi anda mempunyai beberapa ralat sintaks dan logik kecil. Saya juga mengesyorkan menggunakan tag label. Kod boleh ditulis lebih pendek jika anda mahu!

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 *

Saya juga mengesyorkan anda melihat css:valid peraturan! https://developer.mozilla.org/en-US/docs /Web/CSS/:valid