Question

我正在尝试验证两个电话号码。第一次电话号码验证工作正常；但是，如果第一个电话号码无效，然后我去了第二个电话号码，则在输入任何数据之前，将触发第二个电话号码验证，并且我将循环“无效电话号码1c”，直到关闭选项卡

例如，我在第一个电话号码中输入“ 99999999”，然后按Tab。显示消息“请使用区号作为座机号码”，然后显示“无效电话号码1c”的连续循环。

如果我输入一个无效的电话号码然后转到除第二个电话号码之外的另一个字段，我只会收到一条错误消息（例如，在第一个电话号码中输入“ 99999999”，然后单击另一个文本输入字段（例如，州）。

$("#telephone1").blur(function() {
  validatePhoneNumber($(this).val(), this.id);
});

$("#telephone2").blur(function() {
  validatePhoneNumber($(this).val(), this.id);
});

function validatePhoneNumber(phone_number, id) {
  var formatted = "";
  //remove all non-digits
  phone_number = phone_number.replace(/\D/g, '');
  //if number starts with 61, replace 61 with 0
  if (phone_number.match(/^61/)) {
    phone_number = "0" + phone_number.slice(2);
  }

  if (phone_number.match(/^04/)) {
    if (phone_number.length === 10) {
      var formatted = phone_number.replace(/(\d{4})(\d{3})(\d{3})/g, "$1 $2 $3");
    } else {
      alert('Invalid phone number 1a');
    }
  } else if (phone_number.match(/^02|03|07|08/)) {
    if (phone_number.length === 10) {
      var formatted = phone_number.replace(/(\d{2})(\d{4})(\d{4})/g, "($1) $2 $3");
    } else {
      alert('Invalid phone number 1b');
    }
  } else if (phone_number.length === 8) {
    alert('Please use Area Code for landline numbers');
  } else {
    alert('Invalid phone number 1c');
  }
  //update
  $('#' + id).val(formatted);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group row">
  <label for="telephone1" class="text-right col-lg-2 col-md-2 col-sm-2 col-xs-2 col-form-label">Telephone:</label>
  <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
    <input type="text" id="telephone1" name="telephone1" placeholder="Telephone 1">
  </div>
</div>

<div class="form-group row">
  <label for="telephone2" class="text-right col-lg-2 col-md-2 col-sm-2 col-xs-2 col-form-label"></label>
  <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
    <input type="text" id="telephone2" name="telephone2" placeholder="Telephone 2">
  </div>
</div>

Answer 1

我认为这只是将alert用于错误消息，将onblur用于验证并在元素之间进行制表的组合。如果没有输入任何值，我建议使用onchange代替或让函数退出。这样，您就不会收到警报的垃圾邮件。此外，blur事件可能由于多种原因而被调用，正如他们在文档中提到的那样，而change会在元素失去焦点时检查值的变化

HTML-jQuery blur（function（）在条目上触发，然后循环

1 个答案: