AngularJS表单验证异常排查：邮箱与密码验证失效

我来帮你搞定这个表单验证失效的问题，先从几个关键的修复点入手：

1. 确保表单拥有name属性 #

AngularJS的表单验证完全依赖表单的name属性来生成状态跟踪对象，所以首先要给你的表单标签加上name和novalidate（禁用HTML5原生验证，避免和AngularJS验证冲突）：

<form name="form" novalidate>
  <!-- 你的邮箱、密码字段都要放在这个表单内部 -->
</form>

2. 补全邮箱字段的错误提示逻辑 #

你提供的代码里ng-show的表达式被截断了，需要明确区分不同的错误类型（必填、格式错误），完整的邮箱字段代码应该是这样：

<div class="field_w3ls">
  <div class="field-group">
    <input type="text" name="email" placeholder="Email" id="email" 
           class="form-control" ng-model="email" 
           ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" required />
    <!-- 邮箱为空的错误提示 -->
    <span ng-show="form.email.$dirty && form.email.$error.required" class="text-danger">
      请填写邮箱地址
    </span>
    <!-- 邮箱格式不正确的错误提示 -->
    <span ng-show="form.email.$dirty && form.email.$error.pattern" class="text-danger">
      请输入有效的邮箱格式（比如xxx@xxx.com）
    </span>
  </div>
</div>

3. 完善密码字段的验证 #

你代码里的密码字段缺少ng-model和对应的错误提示，补上之后的完整代码：

<div class="field_w3ls">
  <div class="field-group">
    <input type="password" name="password" placeholder="密码" id="password-field" 
           class="form-control" ng-model="password" required />
    <span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
    <!-- 密码为空的错误提示 -->
    <span ng-show="form.password.$dirty && form.password.$error.required" class="text-danger">
      请填写密码
    </span>
  </div>
</div>

额外注意事项 #

• 确保你的控制器里正确初始化了绑定的变量，比如：

  app.controller('YourController', function($scope) {
    $scope.email = '';
    $scope.password = '';
  });
  

• 用$dirty判断字段是否被用户修改过，避免页面刚加载就弹出错误提示，提升用户体验
• 你的邮箱正则表达式是有效的，可以正常匹配标准邮箱格式

内容的提问来源于stack exchange，提问作者Nitin Karande