javascript - 如果联系电话号码为空且不包含 11 位数字

Question

id 就像我的“无效联系号码”，用于显示文本字段是否为空或者是否不包含 11 位数字(如果文本字段有内容)

HTML:

<label id="number_label">
<b>Contact Number</b>
</label>

<input type="text" placeholder="Contact Number" class="form-control" id="contact" name="contact">

Javascript:

var contact = document.getElementById("contact").value;

  if (!contact || (contact.val().length >=12 || contact.val().length <=10) ) {
    document.getElementById("number_label").innerHTML = "<span style='color: red;'>Invalid contact number (must contain 11 digits)</span>";
  } else {
    document.getElementById("number_label").innerHTML = "Contact Number";
  }

if 语句中的“number_label”id 应更改文本并显示错误。

Answer 1

It isn't working

您正在对 contact(String)调用 .val()，这是不好的。 .val() 是一个 jQuery 方法，旨在在元素本身上调用。

the form just loads the "Invalid contact number" and reloads the page going back to the beginning

如果您尝试限制表单发布，请确保函数中应限制此行为的任何路径都返回 false。

var label = document.getElementById("number_label");

function validate() {

  var contact = document.getElementById("contact").value;
  if (!contact || contact.length !== 11) {
    label.innerHTML = "<span style='color: red;'>Invalid contact number (must contain 11 digits)</span>";
    return false;
  } else {
    label.innerHTML = "<b>Contact Number</b>";
  }

}

<label id="number_label">
    <b>Contact Number</b>
</label>

<input type="text" placeholder="Contact Number" class="form-control" id="contact" name="contact">
<button onclick="validate()">Validate</button>