如果联系电话号码为空并且没有11位数字

Question

我喜欢我的“无效联系电话”，以显示文本字段是否为空或者是否包含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

它不起作用

你在.val()（一个contact）上打电话给String，这是不好的。 .val()是一个jQuery方法，意味着要在元素本身上调用。

表单只是加载“无效的联系人号码”并重新加载页面返回到开头

如果您尝试限制发布表单，请确保您的函数中应该限制此表单的任何路径都有return 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>

Answer 2

您的代码有一些错误。 val（）不是元素的函数。

if (!contact || (contact.**val()**.length >=12 || contact.**val()**.length <=10) ) {

跟随一个小提琴修复了代码。 link

Answer 3

您可以运行一个获取输入值的函数，然后运行您编写的代码来验证长度。我稍微修改了一下，但这里是：

function validateNumber(e) {
  var contactNumber = e.value;
  if (contactNumber && contactNumber.length == 11) {
    document.getElementById("number_label").innerHTML = "Contact Number";
  } else {
    document.getElementById("number_label").innerHTML = "<span style='color: red;'>Invalid contact number (must contain 11 digits)</span>";
  }
}

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

<input onkeyup="validateNumber(this)" type="text" placeholder="Contact Number" class="form-control" id="contact" name="contact">