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的{{1}}。但是用户也可以输入10位数字

我们可以添加这种模式吗？

Answer 1

您可以在模式中添加或声明：（＆＃34; |＆＃34;管道符号）

^ \ W +（[.-] \ W +？）的 @ \ W +（[.-] \ W +？） +（\ W {2,3}）| \ d {1 ，10} $

如果管道的任一侧为真，这将匹配

Answer 2

您可以使用bitwise or (|)运算符组合多组模式。

尝试以下方法：

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

工作代码示例：

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

当用户输入正确的电子邮件或10位数的手机号码时如何启用按钮？

2 个答案: