javascript表单验证电话号码

Question

我认为尝试进行自己的表单验证会很简洁。 我可以通过代码来测试电话号码。 我正在使用JavaScript仅允许数字输入，并检测数字位数。 如果数字是3或7，我想添加一个破折号。 之所以将其设置为7，是因为在我输入第一个破折号之后，该破折号包含在字符串中，而第二个破折号位于字符串中的位置8。 现在可以正常工作，但是如果用户输入了错误的数字并且出现了破折号，则当用户尝试对其进行退格时，它会看到字符串长度回到3或7，并自动将破折号放回该位置，而不是允许用户一次返回一个空格以更正错误。 如果他们按住退格键，它将删除。 我试过使用split和substring，无法弄清楚如何工作，所以它可以正常工作。

的HTML

<form>
  <input type = 'text' name = 'txtPhone' id = 'txtPhone' onkeypress = 'return numbersOnly(event)' onkeyup = 'validateForm(this.id)'/>
</form>

的JavaScript

function numbersOnly(e){
  var unicode = (e.charCode) ? e.charCode : e.keyCode;
  if (unicode == 8
   || unicode == 9
   || (unicode >= 48 && unicode <= 57)
  )}
    return true;
  }else{
    return false;
  }
}

function validateForm(id){
  var id = document.getElementById(id);
  var unicode = (event.charCode) ? event.charCode : event.keyCode;
  // first add slashes after third and sixth digit
  if (id.value.length == 3
   || id.value.length == 7
  ){
    var newValue = id.value += "-";
    id.value = newValue;
  }
  // if backspace is pressed, remove the dash
  if (unicode == 8){
    var value = document.getElementById(id).value;
    value = value.substring(0, value.length - 1);
  }
}

Answer 1

在你onchange功能，检查是否有尾随冲刺第一 。 如果该字段刚刚更改，并且有一个连字符，则用户只需删除以下字符，则应为他们删除破折号。 删除破折号后，不做任何其他操作即可返回。 由于在用户再次更改字段之前不会再次触发onchange事件，因此您的代码不会插入另一个破折号，因为在字段中包含6个或8个字符之前不会再次调用该破折号。

当然，这过于简单了。 在某些情况下，用户可以编辑琴弦的中部并拧紧东西。 我建议要么a）使用一个库，要么b）使用一些正则表达式，而不只是检查字段长度。