Как включить кнопку, когда пользователь вводит правильный адрес электронной почты или 10-значный номер мобильного телефона?

Question

как включить кнопку, когда пользователь вводит правильный адрес электронной почты или 10-значный номер мобильного телефона?

вот мой код https://stackblitz.com/edit/angular-p5knn6?file=src%2Findex.html

<div class="login_div">
  <form action="">
    <input type="text" name="email"
           autocomplete ="off"
           placeholder="Enter the Email or Number"
           [(ngModel)]="userenterValue"
           required
           pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">
    <input type="submit" value="Continue" class="btn disbled" disabled="disabled">
  </form>
</div>

Я добавил pattern, который проверяет только email. Но пользователь может также ввести 10-значный номер *

Можем ли мы добавить этот шаблон также?

Answer 1

Вы можете использовать оператор bitwise or (|) для объединения нескольких наборов шаблонов.

Попробуйте следующее:

pattern="(\d{10})|(^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$)"/>

Пример рабочего кода:

var input = document.querySelector('[name=email]');
var patt = new RegExp(input.getAttribute('pattern'));
input.oninput = function(event) {
  if(patt.test(this.value)){
    document.querySelector('#btnSubmit').disabled = false;
  }
  else{
    document.querySelector('#btnSubmit').disabled = true;
  }
}

<div class="login_div">
  <form action="">
    <input type="text" name="email"
       autocomplete ="off"
       placeholder="Enter the Email or Number"
       [(ngModel)]="userenterValue"
       required
       pattern="(\d{10})|(^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$)"/>
    <input type="submit" id="btnSubmit" value="Continue" class="btn disbled" disabled="disabled">
  </form>
</div>

Answer 2

Вы можете добавить оператор или к вашему шаблону: ("|" символ трубы)

^ \ W + ([.-] \ W +?) @ \ W + ([.-] \ W +?) + (\ ш {2,3}.) | \ Д {1, 10} $

Это будет соответствовать, если любая сторона трубы верна