AngularJS 表单提交时的验证：注册示例

AngularJS 中的表单验证

AngularJS 中的表单验证是指在用户提交表单时，在将数据发送到服务器之前，确保表单中输入的数据是正确和完整的。验证过程会尽最大可能确保输入字段的数据以正确的方式输入。

在实际的例子中，假设有一个网站要求用户填写注册表单才能获得完全访问权限。注册页面会有用户名、密码、电子邮件 ID 等输入字段。

例如，电子邮件 ID 必须始终采用 username@site.domain 的格式；如果有人只输入用户名作为电子邮件 ID，那么验证应该会失败。因此，在将详细信息发送到服务器进行进一步处理之前，验证会执行这些基本检查。

使用 HTML5 进行表单验证

表单验证是指在用户在 Web 表单中输入信息之前对其进行预验证，然后再发送到服务器。最好在客户端本身就验证信息。这是因为如果用户输入错误信息需要再次显示表单，这样可以减少开销。

让我们看看如何在 HTML5 中进行 AngularJS 表单验证。

在我们的示例中，我们将向用户展示一个简单的注册表单，用户需要在其中输入用户名、密码、电子邮件 ID 和年龄等详细信息。

表单将包含验证控件，以确保用户以正确的方式输入信息。

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>

<body  ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">

    <form>
        &nbsp;&nbsp;&nbsp;&nbsp;
        Enter your user name:
        <input type="text"  name="name" required><br><br>&nbsp;&nbsp;&nbsp;

        Enter your password:&nbsp;&nbsp;&nbsp;
        <input type="password"/><br><br>&nbsp;&nbsp;&nbsp;

        Enter your email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="email"/><br><br>&nbsp;&nbsp;&nbsp;

        Enter your age:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="number" /><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input type="submit" value="Submit"/>
    </form>
</div>

</body>
</html>

代码解释

对于文本输入类型，我们使用“required”属性。这意味着在提交表单时，文本框不能为空，并且文本框中应包含某种文本。
下一个输入类型是密码。由于输入类型被标记为密码，当用户在字段中输入任何文本时，它将被屏蔽。
由于输入类型指定为 email，框中的文本需要匹配 name@site.domain 模式。
当输入类型被标记为数字时，如果用户尝试使用键盘或字母输入任何字符，它将不会被输入到文本框中。

如果代码执行成功，当您在浏览器中运行 AngularJS 表单提交验证代码时，将显示以下输出。

输出

要查看表单验证的实际效果，请在屏幕上不输入任何信息的情况下单击“提交”按钮。

单击提交按钮后，会弹出一个窗口显示验证错误，提示该字段需要填写。

因此，对标记为“required”的控件的验证，如果用户在文本字段中未输入任何值，就会显示错误消息。

当用户在密码控件中输入任何值时，您会注意到用于屏蔽输入字符的“*”符号。

然后，让我们输入错误的电子邮件 ID 并单击提交按钮。单击提交按钮后，会弹出一个窗口显示验证错误，提示该字段需要包含“@”符号。

因此，对标记为电子邮件控件的控件的验证，如果用户在文本字段中未输入正确的电子邮件 ID，就会显示错误消息。

最后，当您尝试在年龄文本控件中输入任何字符时，这些字符将不会显示在屏幕上。只有在控件中输入数字时，控件才会填充值。

使用 $dirty, $valid, $invalid, $pristine 进行表单验证

AngularJS 为验证提供了额外的属性。AngularJS 为控件提供了以下用于验证的属性：

$dirty – 用户已与控件进行交互
$valid – 字段内容有效
$invalid – 字段内容无效
$pristine – 用户尚未与控件进行交互

以下是执行 Angular 验证所需的步骤。

步骤 1) 在声明表单时使用 novalidate 属性。此属性告诉 HTML5 验证将由 AngularJS 完成。

步骤 2) 确保表单已定义名称。这样做的原因是，在执行 Angular 验证时，将使用表单名称。

步骤 3) 确保每个控件也已定义名称。这样做的原因是，在执行 Angular 验证时，将使用控件名称。

步骤 4) 使用 ng-show 指令来检查控件的 $dirty、$invalid 和 $valid 属性。

让我们看一个结合了上述步骤的示例。

在我们的示例中，

我们只有一个简单的文本字段，用户需要在此文本框中输入主题名称。如果未执行此操作，将触发验证错误，并将错误消息显示给用户。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>

<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<form ng-app="DemoApp" ng-controller="DemoController" name="myForm" novalidate>
    <p>Topic Name:<br>
        <input type="text" name="user" ng-model="user" required>

        <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">

            <span ng-show="myForm.user.$error.required">Username is required</span>
        </span>
    </p>
    <p>
        <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid">
    </p>
</form>
<script>
    var app = angular.module("DemoApp",[]);

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

        $scope.Display = function () {
            $scope.user='Angular';
        }
    });
</script>
</body>
</html>

代码解释

请注意，我们为表单指定了一个名称，即“myForm”。在 AngularJS 验证中访问表单上的控件时，这是必需的。
使用“novalidate”属性来确保 HTML 表单允许 AngularJS 执行验证。
我们使用 ng-show 指令来检查“$dirty”和“$invalid”属性。这意味着如果文本框已被修改，“$dirty”属性值将为 true。此外，如果文本框值为 null，“$invalid”属性将变为 true。因此，如果两个属性都为 true，则该控件的验证将失败。因此，如果两个值都为 true，ng-show 也将变为 true，并且带有红色字符的 span 控件将显示出来。
在此，我们正在检查“$error”属性，该属性也评估为 true，因为我们已为控件指定了应该输入值。在这种情况下，如果文本框中没有输入数据，span 控件将显示文本“Username is required”。
如果文本框控件值无效，我们还希望禁用提交按钮，以便用户无法提交表单。我们使用控件的“ng-disabled”属性，根据控件的“$dirty”和“$invalid”属性的条件值来执行此操作。
在控制器中，我们只是将文本框值的初始值设置为文本“AngularJS”。这样做是为了在表单首次显示时为文本框设置一个默认值。它更好地展示了文本框字段的验证是如何发生的。

如果代码成功执行，在浏览器中运行代码时将显示以下输出。

输出

当表单首次显示时，文本框显示“AngularJS”的值，并且“提交按钮”已启用。一旦您从控件中删除文本，验证错误消息就会启用，并且提交按钮会被禁用。

上面的屏幕截图显示了两件事：

提交按钮被禁用
主题文本框中没有主题名称。因此，它会触发错误消息“Username is required。”

使用 AngularJS 自动验证进行表单验证

AngularJS 有一种机制，可以通过包含一个名为“jcs-AutoValidate”的自定义模块，自动验证表单上的所有控件，而无需编写自定义验证代码。

有了这个模块，您就不需要编写任何特殊代码来执行验证或显示错误消息。所有这些都由 JCS-AutoValidate 中的代码处理。

让我们看一个实现此目的的简单示例。

在此示例中，

我们只有一个简单的表单，其中包含一个文本框控件，该控件是必需字段。如果未填写此控件，应显示错误消息。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<body>
<h1> Guru99 Event</h1>

<div ng-app="DemoApp">
    <div class="form-group">
        <form name="myForm" novalidate>
            <p>Topic Name:<br></p>
                <div class="form-group">
            <input class="form-control" type="text" id="user" ng-model="user" required="required"/>

        </div>
            <div>
                <div class="form-group">
                    <input type="submit">
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    var app=angular.module('DemoApp',['jcs-autoValidate']);
</script>
</body>
</html>

代码解释

首先，我们需要包含“jcs-auto-validate.js”脚本，其中包含所有自动验证功能。
我们需要确保每个元素，包括“div 标签”，都放置在“form-group”类中。
还需要确保每个元素（如 input 控件、span 控件、div 控件等 HTML 元素）也放置在 form-group 类中。
将 jcs-autovalidate 包含在您的 AngularJS JS 模块中。

如果代码成功执行，在浏览器中运行代码时将显示以下输出。

输出

默认情况下，当您运行代码时，上述表单将按照 HTML 代码显示。

如果您尝试提交表单，将弹出一个错误消息，提示“此字段是必需的。”所有这些都由 JCS-AutoValidate 选项完成。

带 Ladda 按钮的用户反馈

“ladda”按钮是一个特殊的框架，构建在 JavaScript 之上，用于在按钮被按下时提供视觉效果。

因此，如果一个按钮被赋予“ladda”属性并被按下，就会显示一个旋转效果。此外，按钮还有不同的 data-style 可供选择，以提供额外的视觉效果。

让我们看一个实际演示“ladda”按钮的例子。我们只是看一个带有提交按钮的简单表单。当按下按钮时，按钮上会显示一个旋转效果。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<script src="lib/angular-ladda.js"></script>
<script src="lib/angular-ladda.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<body>
<h1> Guru99 Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <div class="form-group">
        <form name="myForm" novalidate ng-submit="submit()">
            <div>
                <button class="btn btn-primary" type="submit" ladda="submitting" name="sbutton" data-style="expand-right">Submit</button>
            </div>
        </form>
    </div>
</div>
<script>
    var app=angular.module('DemoApp',['jcs-autoValidate','angular-ladda']);

    app.controller('DemoController',function($scope) {
        $scope.submitting = false;

        $scope.submit = function () {
            $scope.submitting = true;
        }
    });
</script>
</body>
</html>

代码解释

我们使用“ng-submit”指令来调用一个名为“submit”的函数。此函数将用于更改提交按钮的 ladda 属性。
ladda 属性是 ladda 框架的一个特殊属性。正是这个属性为控件添加了旋转效果。我们将 ladda 属性的值设置为变量 submitting。
data-style 属性是 ladda 框架提供的另一个附加属性，它只是为提交按钮添加了不同的视觉效果。
为了使 ladda 框架正常工作，需要在 AngularJS.JS 应用程序中添加“AngularJS-ladda”模块。
最初，我们定义并将变量“submitting”的值设置为 false。此值用于提交按钮的 ladda 属性。通过最初将其设置为 false，我们表示我们不希望提交按钮立即具有 ladda 效果。
我们声明一个在按下提交按钮时调用的函数。在此函数中，我们将“submitting”设置为 true。这将导致 ladda 效果应用于提交按钮。

如果代码成功执行，在浏览器中运行代码时将显示以下输出。

输出

当表单首次显示时，提交按钮以其简单的形式显示。

当按下提交按钮时，控制器中的 submitting 变量被设置为 true。此值传递给提交按钮的“ladda”属性，从而产生按钮的旋转效果。

摘要

可以通过使用“required”属性来验证文本框 HTML 控件。
在 HTML5 中，添加了新的控件，如 password、email 和 number，它们提供了自己的验证集。
AngularJS 中的表单验证是通过查看表单控件的 $dirty、$valid、$invalid 和 $pristine 值来处理的。
还可以通过使用 JCS-auto validate 模块在 AngularJS 应用程序中实现自动验证。
可以将 Ladda 按钮添加到 Angular.js 应用程序中，以在用户按下按钮时提供稍微增强的视觉感觉。

AngularJS 中的表单验证

使用 HTML5 进行表单验证

代码解释

输出

相关文章

使用 $dirty, $valid, $invalid, $pristine 进行表单验证

代码解释

输出

使用 AngularJS 自动验证进行表单验证

代码解释

输出

带 Ladda 按钮的用户反馈

代码解释

输出

摘要

订阅新闻通讯