AngularJS学习笔记之表单验证功能实例详解-前端开发

这篇文章将详细讲解如何使用AngularJS实现表单验证功能。下面将分步说明该过程：

这篇文章将详细讲解如何使用AngularJS实现表单验证功能。下面将分步说明该过程：

1. 引入AngularJS

首先，我们需要在我们的HTML文件中引入AngularJS的库文件。可以使用CDN或下载到本地并放在项目中。

通过CDN引入AngularJS库文件:

<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>

通过本地文件引入AngularJS库文件:

<script src="/path/to/angular.min.js"></script>

2. 创建一个AngularJS应用

接下来，我们需要创建一个AngularJS应用，并将该应用绑定到网页中一个HTML元素上。代码如下：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>表单验证功能实例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
    <script>
        var app = angular.module("myApp", []);
    </script>
</head>
<body>
    <div ng-controller="myCtrl">
        <!--表单-->
    </div>
</body>
</html>

3. 添加表单

接下来，我们需要添加表单元素，用于用户输入数据。具体的表单元素如下：

<div ng-controller="myCtrl">
    <form name="myForm">
        <label>
            用户名：
            <input type="text" name="username" ng-model="user.username" required>
        </label>
        <br/>
        <label>
            密码：
            <input type="password" name="password" ng-model="user.password" minlength="6" maxlength="20" required>
        </label>
        <br/>
        <button type="submit" ng-disabled="myForm.$invalid" ng-click="submit()">提交</button>
    </form>
</div>

这里我们创建了一个用户名输入文本框和一个密码输入框，同时使用了AngularJS提供的表单验证指令，可以防止用户输入无效的信息。其中，required指定该字段必须填写，minlength,maxlength分别指定了密码为6-20个字符，ng-disabled指定了在表单验证不通过时，禁用提交按钮。

4. 控制器模块

接下来，我们需要实现表单的提交功能以及错误提示功能。为此，我们创建一个控制器模块，并在模块中实现相关的功能。代码如下：

<div ng-controller="myCtrl">
    <form name="myForm">
        <label>
            用户名：
            <input type="text" name="username" ng-model="user.username" required>
        </label>
        <br/>
        <label>
            密码：
            <input type="password" name="password" ng-model="user.password" minlength="6" maxlength="20" required>
        </label>
        <br/>
        <button type="submit" ng-disabled="myForm.$invalid" ng-click="submit()">提交</button>
    </form>
</div>

<script>
    var app = angular.module("myApp", []);

    app.controller("myCtrl", function($scope) {

        // 初始化表单数据模型
        $scope.user = {
            username: "",
            password: ""
        };

        // 提交表单时执行的函数
        $scope.submit = function() {
            alert("表单已提交！");

            // 提交代码...
        }
    });
</script>

在这个模块中，我们首先初始化了表单的数据模型，并提供了与提交按钮相关的函数。在这个函数中，我们适当情况下弹出了一个提示框，然后可以继续实现表单的提交功能。

5. 错误提示信息

最后，我们可以通过内置的directive来添加一些错误提示信息，以帮助用户更好地理解和使用此表单验证功能。

<div ng-controller="myCtrl">
    <form name="myForm">
        <label>
            用户名：
            <input type="text" name="username" ng-model="user.username" required>
            <span style="color:red" ng-show="myForm.username.$error.required">用户名不能为空！</span>
        </label>
        <br/>
        <label>
            密码：
            <input type="password" name="password" ng-model="user.password" minlength="6" maxlength="20" required>
            <span style="color:red" ng-show="myForm.password.$error.required">密码不能为空！</span>
            <span style="color:red" ng-show="myForm.password.$error.minlength">密码长度不能小于6个字符！</span>
            <span style="color:red" ng-show="myForm.password.$error.maxlength">密码长度不能大于20个字符！</span>
        </label>
        <br/>
        <button type="submit" ng-disabled="myForm.$invalid" ng-click="submit()">提交</button>
    </form>
</div>

这里我们使用内置的directive加入了几个错误提示信息，以便帮助用户更好地使用表单功能。其中，利用了AngularJS表单$pristine和$invalid属性来实现在表单未被修改或者输入错误的情况下显示错误提示信息的功能。

示例1：实现用户名必填，密码长度范围为6-20个字符

示例2：实现手机号必填，手机号符合格式的条件要求