详解AngularJS实现表单验证

AngularJS 是一个强大的JavaScript框架，被广泛用于构建 Web 应用程序，其中表单验证是重要功能之一。以下是实现表单验证的详细步骤：

步骤一：引入AngularJS

首先，在 HTML 中引入 AngularJS 库（CDN 方式或下载导入），这可以通过以下代码实现：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.min.js"></script>

步骤二：创建应用程序

接下来，创建一个 AngularJS 应用程序，并将其与我们的 HTML 绑定在一起：

<div ng-app="myApp" ng-controller="myCtrl">
  <form>
    // 表单内容将在此添加
  </form>
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope) {
    // 控制器逻辑将在此添加
  });
</script>

步骤三：实现表单验证

我们可以使用 ng-model 指令来定义表单字段，并使用 ng-required 指令来设置字段是否必填。

使用 $dirty 和 $invalid 属性来判断表单字段是否有效，当表单字段无效时，我们可以使用内建的样式类及 AngularJS 提供的 ng-show 和 ng-hide 指令来显示提示信息。

通过如下代码可以在整个表单中进行验证：

<form>
  <label>用户名</label>
  <input type="text" ng-model="username" ng-required="true" name="username" />
  <div ng-show="myForm.username.$dirty && myForm.username.$invalid">
    <p ng-show="myForm.username.$error.required">用户名是必填项</p>
  </div>

  <label>密码</label>
  <input type="password" ng-model="password" ng-required="true" name="password" />
  <div ng-show="myForm.password.$dirty && myForm.password.$invalid">
    <p ng-show="myForm.password.$error.required">密码是必填项</p>
  </div>
</form>

在以上代码中，myForm 是表单对象的名称，username 和 password 是表单字段的名称。

示例一：验证邮件地址

我们可以使用 ng-pattern 指令来定义一个有效的模式，并将模式映射到反向验证表达式。以下是一个验证邮件地址的示例：

<form>
  <label>邮箱地址</label>
  <input type="email" ng-model="email" ng-required="true" ng-pattern="/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/" />
  <div ng-show="myForm.email.$dirty && myForm.email.$invalid">
    <p ng-show="myForm.email.$error.required">邮件地址是必填项</p>
    <p ng-show="myForm.email.$error.pattern">请输入有效的邮件地址</p>
  </div>
</form>

示例二：验证密码强度

我们也可以使用自定义指令来实现密码强度的验证。以下是一个验证密码强度的示例：

<form>
  <label>密码</label>
  <input type="password" ng-model="password" ng-required="true" ng-minlength="8" password-strength />
  <div ng-show="myForm.password.$dirty && myForm.password.$invalid">
    <p ng-show="myForm.password.$error.required">密码是必填项</p>
    <p ng-show="myForm.password.$error.minlength">密码长度不能少于8个字符</p>
  </div>
</form>

<script>
  app.directive("passwordStrength", function() {
    return {
      require: "ngModel",
      link: function(scope, element, attrs, ngModel) {
        ngModel.$validators.passwordStrength = function(modelValue) {
          if (modelValue) {
            if (modelValue.length < 8) {
              return false;
            }
            if (!modelValue.match(/[A-Z]/)) {
              return false;
            }
            if (!modelValue.match(/[0-9]/)) {
              return false;
            }
          }
          return true;
        };
      }
    };
  });
</script>

在以上代码中，ng-minlength 指令用于限制密码最小长度不低于8个字符。自定义指令 passwordStrength 通过 ngModel.$validators 限制密码必须包含至少一个大写字母和数字，否则验证失败。

以上是详解 AngularJS 实现表单验证的完整攻略和两个示例说明。