如何在用户输入正确邮箱或10位手机号时启用按钮？

安全阿岳

2026-5-27

解决Angular中输入邮箱/手机号验证后启用按钮的问题

我来帮你搞定这个问题哈！你的需求是当用户输入正确的邮箱或者10位手机号时自动启用提交按钮，咱们基于你的Angular代码来调整：

步骤1：更新输入框的验证规则

首先，你原来的pattern只匹配了邮箱格式，得把10位手机号的规则加进去，用正则的|分隔两种匹配模式：

<input 
  type="text" 
  name="email" 
  autocomplete="off" 
  placeholder="Enter the Email or Number" 
  [(ngModel)]="userenterValue" 
  required 
  pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$|^[0-9]{10}$"
>

这个正则的意思是：要么匹配标准邮箱格式，要么匹配刚好10位的数字（手机号）。

步骤2：给表单添加模板引用变量

要获取表单的验证状态，得给<form>加个模板引用变量，比如#loginForm="ngForm"，这样Angular就能跟踪表单的有效性：

<form action="" #loginForm="ngForm">

步骤3：绑定按钮的禁用状态

把提交按钮的disabled属性绑定到表单的有效性，当表单有效时（输入符合规则且不为空），按钮自动启用：

<input 
  type="submit" 
  value="Continue" 
  class="btn disabled" 
  [disabled]="!loginForm.valid"
>

另外注意你原来的class拼写错啦，是disabled不是disbled哦~

完整修改后的代码

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