0

我认为尝试进行自己的表单验证会很好。我对测试电话号码的代码没问题。我使用 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);
  }
}
4

1 回答 1

0

在您的函数中，首先onchange检查尾随破折号。如果该字段刚刚更改并且有一个尾随破折号，则用户只是删除了以下字符，您应该为它们删除破折号。删除破折号后，无需执行任何其他操作即可返回。由于在用户再次更改字段之前不会再次触发事件，因此您的代码不会插入另一个破折号，因为在字段中有 6 个或 8 个字符之前不会再次调用它。onchange

当然，这是过于简单化了。在某些情况下，用户可以编辑字符串的中间并将事情搞砸。我建议a）使用库或b）使用一些正则表达式，而不仅仅是检查字段长度。

于 2013-03-18T04:43:49.713 回答