AngularJS 提交时表单验证：注册示例
詹姆斯·哈特曼
AngularJS 中的表单验证
表格验证 AngularJS 中的验证是确保表单中输入的数据是否正确和完整的过程。当用户提交表单时，首先进行验证，然后才将详细信息发送到服务器。验证过程尽可能确保以正确的方式输入输入字段的详细信息。
举一个真实的例子，我们假设一个网站要求填写注册表才能获得完全访问权限。注册页面将包含用户名、密码、电子邮件 ID 等输入字段。
例如，电子邮件 ID 的格式始终为 用户名@站点.域名；如果有人在电子邮件 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>
Enter your user name:
<input type="text" name="name" required><br><br>
Enter your password:
<input type="password"/><br><br>
Enter your email:
<input type="email"/><br><br>
Enter your age:
<input type="number" /><br><br>
<input type="submit" value="Submit"/>
</form>
</div>
</body>
</html>
代码说明
- 对于文本输入类型，我们使用“required”属性。这意味着提交表单时文本框不能为空，并且文本框中应该存在某种文本。
- 下一个输入类型是密码。由于输入类型被标记为密码，当用户在字段中输入任何文本时，它将被屏蔽。
- 由于输入类型指定为电子邮件，因此框中的文本需要与模式匹配 名称@站点.域名.
- 当输入类型标记为数字时，如果用户尝试使用键盘或字母输入任何字符，则该字符将不会输入到文本框中。
如果代码成功执行，则在浏览器中运行代码进行提交时的 AngularJS 表单验证时将显示以下输出。
输出
要查看表单验证的实际效果，请单击“提交”按钮，而无需在屏幕上输入任何信息。
单击提交按钮后，将弹出一个窗口，显示需要填写该字段的验证错误。
因此，如果用户未在文本字段中输入任何值，则对标记为必需的控件进行验证会导致显示错误消息。
当用户在密码控件中输入任何值时，您会注意到用于屏蔽输入字符的“*”符号。
然后让我们输入错误的电子邮件 ID 并单击提交按钮。单击提交按钮后，将出现一个弹出窗口，显示验证错误，该字段需要包含 @ 符号。
因此，如果用户没有在文本字段中输入正确的电子邮件 ID，则对标记为电子邮件控件的控件的验证将导致显示错误消息。
最后，当您尝试在年龄文本控件中输入任何字符时，该字符都不会输入到屏幕上。只有当在控件中输入数字时，控件才会填充一个值。
使用 $dirty、$valid、$invalid、$pristine 进行表单验证
AngularJS 提供其附加属性以进行验证。AngularJS 为控件提供了以下属性以用于验证目的
- $脏 – 用户已经与控件交互
- $有效 – 字段内容有效
- $无效 – 字段内容无效
- $原始 – 用户尚未与控件进行交互
以下是执行 Angular 验证需要遵循的步骤。
步骤1） 声明表单时使用 no verify 属性。此属性告诉 HTML5 验证将由 AngularJS 完成。
步骤2） 确保表单已定义名称。这样做的原因是，在执行 Angular 验证时将使用表单名称。
步骤3） 确保每个控件也有一个定义的名称。这样做的原因是，在执行 Angular 验证时将使用控件名称。
步骤4） 使用 吴秀 指令来检查控件的 $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 控件将显示文本“需要用户名”。
- 如果文本框控件值无效，我们还希望禁用提交按钮，以便用户无法提交表单。我们使用控件的“ng-disabled”属性，根据控件的“$dirty”和“$invalid”属性的条件值执行此操作。
- 在控制器中，我们只是将文本框值的初始值设置为文本“AngularJS”。这样做只是为了在表单首次显示时为文本框设置一些默认值。它更好地展示了文本框字段的验证方式。
如果代码成功执行，则在浏览器中运行代码时将显示以下输出。
输出
表单首次显示时，文本框显示“AngularJS”的值，并且“提交按钮”处于启用状态。一旦从控件中删除文本，验证错误消息就会启用，并且“提交”按钮将被禁用。
上面的截图显示了两件事
- 提交按钮被禁用
- 主题文本框中没有主题名称。因此，它会触发错误消息“需要用户名”。
使用 AngularJS Auto Validate 进行表单验证
AngularJS 中有一个功能可以自动验证表单上的所有控件，而无需为验证编写自定义代码。这可以通过包含名为“jcs-AutoValidate”的自定义模块来实现。
有了这个模块，您不需要放置任何特殊代码来执行验证或显示错误消息。这一切都由 JCS-AutoValidate 内部的代码处理。
让我们看一个如何实现这一点的简单例子。
在这个例子中，
我们将创建一个简单的表单，其中有一个文本框控件，它是必填字段。如果未填写此控件，则应显示错误消息。
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/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”类中。
- 还需要确保每个元素（它是 HTML 元素，例如输入控件、span 控件、div 控件等等）例如输入控件也放置在 form-group 类中。
- 将 jcs-autovalidate 包含在你的 AngularJS JS 模块中。
如果代码成功执行，则在浏览器中运行代码时将显示以下输出。
输出
默认情况下，当您运行代码时，上述表单将按照 HTML 代码显示。
如果您尝试提交表单，则会弹出错误消息，提示“此字段是必填项”。所有这些都是由 JCS-AutoValidate 选项完成的。
用户对 Ladda 按钮的反馈
“ladda”按钮是一个特殊的框架，用于在 JavaScript 按下按钮时呈现视觉效果。
因此，如果按钮被赋予“ladda”属性并被按下，就会显示旋转效果。此外，按钮有不同的数据样式可供选择，以提供额外的视觉效果。
让我们看一个例子，看看“ladda”按钮是如何运作的。我们将看到一个带有提交按钮的简单表单。按下按钮时，按钮上将显示旋转效果。
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/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>
代码说明
- 我们正在使用“提交”指令来调用名为“submit”的函数。此函数将用于更改提交按钮的 ladda 属性。
- ladda 属性是 ladda 框架的一个特殊属性。正是这个属性为控件添加了旋转效果。我们将 ladda 属性的值设置为变量 submitting。
- data-style 属性再次是 ladda 框架提供的附加属性，它只是为提交按钮添加了不同的视觉效果。
- 需要将“AngularJS-ladda”模块添加到 AngularJS.JS 应用程序中以使 ladda 框架正常工作。
- 最初，我们定义一个名为“提交”的变量并将其值设置为 false。此值是为提交按钮的 ladda 属性设置的。通过最初将其设置为 false，我们表示我们目前还不希望提交按钮具有 ladda 效果。
- 我们声明一个函数，当按下提交按钮时调用该函数。在这个函数中，我们将“提交”设置为 true。这将导致 ladda 效果应用于提交按钮。
如果代码成功执行，则在浏览器中运行代码时将显示以下输出。
输出
当表单首次显示时，提交按钮以其简单形式显示。
当按下提交按钮时，控制器中的提交变量将设置为 true。此值将传递给提交按钮的“ladda”属性，从而产生按钮的旋转效果。
总结
- 可以使用“required”属性来验证文本框 HTML 控件。
- 在 HTML5 中，添加了新的控件，例如密码、电子邮件和数字，它们提供自己的一组验证。
- AngularJS 中的表单验证是通过查看表单控件的 $dirty、$valid、$invalid 和 $pristine 值来完成的。
- AngularJS 应用程序中的自动验证也可以通过使用 JCS-auto verify 模块来实现。
- 可以将 Ladda 按钮添加到 Angular.js 应用程序中，以便在按下按钮时给用户带来增强的视觉感。
