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）使用一些正则表达式，而不仅仅是检查字段长度。

javascript表单验证电话号码

1 个答案: