Проверка поля Tel в html, чтобы разрешить цифры и текст, но не @

Question

Этот код допускается только из цифр - предпочтение должно быть позволено вводить тире и / или скобки, даже текст, например, ext. но не адрес электронной почты.

Не могли бы вы помочь мне отредактировать этот код? Очень ценится.

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

Answer 1

Предпочтительно переместить такую ​​логику из шаблона в выделенную функцию, однако, , если вам действительно нужно сделать ее встроенной , можно сопоставить входной символ с регулярным выражением следующим образом:

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

Answer 2

Вы можете использовать test и класс символов и перечислить символы, которым вы позволите соответствовать.

В этом случае соответствует один из [, ], символ a-z, точка или дефис:

[\][a-z.-]

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

Answer 3

Вам нужна функция для проверки только на символ @, чтобы избежать ее, поэтому:

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

затем вы передаете функцию обработчику ввода keypress, например:

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

это должно сработать