下面是“AngularJS表单验证实例详解”的完整攻略：

AngularJS表单验证实例详解

在AngularJS中，表单验证是非常重要的内容。通过表单验证可以确保用户输入的数据符合我们的预期，以及防止一些非法操作。下面是AngularJS表单验证的详细步骤。

1. 导入AngularJS框架

首先，我们需要在HTML页面中导入AngularJS框架。我们可以通过以下方式导入：

<script src="https://cdn.bootcss.com/angular.js/1.7.2/angular.min.js"></script>

2. 创建表单

接下来，我们需要创建一个表单。可以通过以下方式创建：

<form name="myForm" ng-app="" ng-submit="submitForm()" novalidate>
  <input type="email" name="email" ng-model="user.email" required>
  <input type="password" name="password" ng-model="user.password" minlength="6" required>
  <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>

在上面的代码中，我们使用了ng-app指令来告诉AngularJS该如何处理这个页面中的标签。然后使用ng-submit指令来指定表单提交时应该执行的函数。novalidate指令表示禁用浏览器的默认表单验证。

我们还为每个输入框指定了一个name属性和ng-model指令来绑定输入框的值。其中，name属性用于在表单验证中标识该输入框，ng-model用于双向绑定输入框的值。

3. 定义表单验证规则

接下来，我们需要定义表单验证规则。可以通过以下方式定义：

function MyController($scope){
  $scope.submitForm = function(){
    if($scope.myForm.$valid){
      // 表单验证成功
    }
  };
}

在上面的代码中，我们通过一个MyController来管理表单。其中，$scope.myForm.$valid表示表单是否验证通过。如果验证通过，我们就可以在该函数中进行后续的操作。

我们还可以通过以下方式定义更加详细的表单验证规则：

<input type="text" name="username" ng-model="user.username"
       ng-minlength="4" ng-maxlength="8" unique-username>

<div ng-messages="myForm.username.$error" style="color:red">
  <div ng-message="required">请输入用户名</div>
  <div ng-message="minlength">用户名长度太短</div>
  <div ng-message="maxlength">用户名长度太长</div>
  <div ng-message="uniqueUsername">用户名已存在</div>
</div>

在上面的代码中，我们为输入框指定了ng-minlength和ng-maxlength指令来限制输入框的最小长度和最大长度。同时，我们自定义了一个指令unique-username来验证用户名是否唯一。在该指令中，我们可以通过$http服务向服务器端发起请求来判断用户名是否唯一。

我们还使用了ng-messages指令来显示所有的表单验证错误信息。在该指令中，我们可以通过myForm.username.$error来获取该输入框所有的错误信息。

4. 使用第三方表单验证库

除了AngularJS自带的表单验证之外，我们还可以使用一些第三方的表单验证库，例如ngMessages和angular-validation等。这些库都提供了更加丰富、灵活的表单验证功能。以下是一个使用ngMessages库的示例：

<script src="https://cdn.bootcss.com/angular-messages/1.7.2/angular-messages.min.js"></script>

<form name="myForm" ng-app="" ng-submit="submitForm()" novalidate>
  <input type="email" name="email" ng-model="user.email" required>
  <div ng-messages="myForm.email.$error">
    <div ng-message="required">请输入电子邮件地址</div>
    <div ng-message="email">请输入有效的电子邮件地址</div>
  </div>
  <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>

在上面的代码中，我们首先导入了ngMessages库。然后在输入框后面使用ng-messages指令来显示所有的错误信息。在该指令中，我们可以通过myForm.email.$error来获取该输入框所有的错误信息。同时，我们可以使用ng-message指令来指定每种错误类型应该显示的错误信息。

结语

以上就是AngularJS表单验证的详细攻略。希望这能够对你有所帮助。如果你还有什么疑问，请在留言中提出。