html中的电话字段验证，允许数字和文本，但不允许@

Question

该代码仅允许使用数字-优先选择允许输入破折号和/或方括号，例如ext等文本。 但不是电子邮件地址。

您能帮我编辑此代码吗？ 非常感激。

  <input type="text" maxlength="40" onkeypress="return event.charCode >= 48 && event.charCode <= 57" required name="phone" id="phonecontactselection">

Answer 1

您需要一个仅检查@字符的函数来避免它，因此：

function avoidEmailPartCharacter(event) {
  const code = event.keyCode || event.which;
  if (code === 64) {
    event.preventDefault();
  }
}

然后将函数传递给输入keypress处理程序，如下所示：

<input type="type" keypress={avoidEmailPartCharacter(this)} />

它应该可以解决问题

Answer 2

最好将这种out模板逻辑移到专用函数中，但是， 如果确实需要使其内联 ，则可以按如下所示将输入字符与正则表达式进行匹配：

 <input type="text" maxLength="40" onkeypress="return !!String.fromCharCode(event.which || event.charCode).match(/[\\dext\\[\\]\\-]/)" required name="phone" id="phonecontactselection" > 

Answer 3

您可以使用test和一个字符类，并列出允许匹配的字符。

在这种情况下，请匹配[ ， ] ，字符az ，点或连字符之一：

[\][a-z.-]

 <input type="text" maxlength="40" onkeypress="return /[\\][az.-]/.test(String.fromCharCode(event.which || event.keyCode));" required name="phone" id="phonecontactselection" >