Angular Form验证示例-IGI

时间：2020-02-23 14:29:30 　来源:igfitidea点击:

在这篇文章中，我们将看到Angular表单验证的工作原理。
之前我们研究了Angular Form和控件。

Angular Form验证

AngularJS使轻松处理客户端表单验证变得很容易。
在下一部分中，我们将研究一些Angular表单验证示例。

Angular Form验证–输入

以下是一些可用于输入字段的基本Angular Form验证选项。

必填项

将必需HTML5标记添加到输入字段可验证该字段是否为空。
这样可以确保该字段具有一定的价值。
以下语法用于必需的输入。

<input type="text" required

AngularJS提供了一个" ng-required"指令来做同样的事情。
使用此伪指令，您可以灵活地设置输入字段是否应具有值。

以下语法用于确保输入字段不应为空。
如果您不想限制它，我们可以将其设置为false。

<input type="text" ng-required="true"

最小长度

指令ng-minlength用于验证输入值的最小长度。
这将确保输入值的长度不小于使用ng-minlength指令设置的值。

<input type="text" ng-minlength=10

最大长度

指令ng-maxlength用于验证输入值的最大长度。
这将确保输入值的长度不超过使用ng-max length指令设置的值。

<input type="text" ng-maxlength=20

模式

ng-pattern指令用于确保输入匹配正则表达式模式，使用以下语法。

<input type="text" ng-pattern="[a-zA-Z]"

电子邮件

我们可以将输入类型设置为电子邮件，以确保输入字段是有效的电子邮件ID。

<input type="email" name="email" ng-model="user.email"

数字

我们可以将输入类型设置为数字，以确保输入字段是数字。

<input type="number" name="age" ng-model="user.age"

网址

我们可以将输入类型设置为url以确保输入字段是url。

<input type="url" name="homepage" ng-model="user.url"

角形验证属性

Angular在表单上提供属性以跟踪其所有控件和嵌套表单以及它们的状态，例如有效/无效或者脏/原始。
下表描述了有助于我们验证表单的那些属性和相应的Angular类。

属性	类别	说明
$ valid	ng-valid	布尔值如果所有包含的表单和控件均有效，则为True。
$ invalid	ng-invalid	布尔值，如果包含控件或窗体的至少一个无效，则为True。
$ pristine	ng-pristine	Boolean如果用户尚未与表单交互，则为true。
$ dirty	ng-dirty	Boolean如果用户已经与表单进行了交互，则为true。
$ touched	ng-touched	布尔值如果输入模糊，则为True。
$ submitted	ng-submit	布尔值，如果用户提交了表单，即使该表单无效，也为True。

使用CSS类进行Angular Form验证

在处理表单时，angularJS根据状态将特定的类添加到表单中。
为了允许样式以及控件样式化，ngModel添加了以下CSS类：

ng-valid
ng-invalid
ng-pristine
ng-dirty
ng-touched
ng-untouched
ng-pending

下面的示例使用以下CSS来显示每个表单控件的有效性。

<style type="text/css">
		.css-form input.ng-invalid.ng-touched {
			background-color: #FA787E;
		}

		.css-form input.ng-valid.ng-touched {
			background-color: #78FA89;
		}
	</style>

您必须在输入字段中添加required属性，否则它将无法正确验证。
您还应该包含" novalidate"属性，以禁用浏览器的本机表单验证。

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>AngularJS Form Validation</title>
	</head>

	<body ng-app="formApp">
		<div ng-controller="FormController">

			<form name="form" novalidate class="css-form">
				Name : <input type="text" ng-model="employee.name" required<br 

				E-mail : <input type="email" ng-model="employee.email" required <br 

				Role : <input type="radio" ng-model="employee.role" value="development" Development
				<input type="radio" ng-model="employee.role" value="testing" Testing<br </br>

				<input type="button" ng-click="reset()" value="Reset" 

				<input type="submit" ng-disabled="form.$invalid" ng-click="save(employee)" value="Submit" 
			</form>

			<p>Employee Form = {{employee | json}}</p>
			<p>Master = {{master | json}}</p>
		</div>

	<style type="text/css">
		.css-form input.ng-invalid.ng-touched {
			background-color: #FA787E;
		}

		.css-form input.ng-valid.ng-touched {
			background-color: #78FA89;
		}
	</style>

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
	<script type="text/javascript" src="app.js"></script>
</body>
</html>

如果表单输入无效，我们将禁用提交按钮。
以下代码显示了我们如何在应用程序中使用它。

<input type="submit" ng-disabled="form.$invalid" ng-click="save(employee)" value="Submit"

以下脚本定义了我们的应用程序中使用的控制器。

app.js

var app = angular.module('formApp', []);

	app.controller('FormController', function($scope) {
		$scope.master = {};

		$scope.save= function(employee) {
			$scope.master = angular.copy(employee);
		};

		$scope.reset = function() {
			$scope.employee = angular.copy($scope.master);
		};

		$scope.reset();
	});

您将在浏览器中看到以下输出。
在该示例中，employee.name和employee.email都是必需的，但是只有在输入没有焦点时才呈现红色背景。

使用$error属性进行Angular Form验证

AngularJS提供了另一个名为$error的属性，它是一个对象哈希，包含对带有失败验证器的控件或者表单的引用，其中其键是验证令牌(错误名称)，而值是具有给定错误名称的失败验证器的控件或者表单的数组。
以下列表显示了内置验证令牌：

email
max
maxlength
min
minlength
number
pattern
required
url
date
datetimelocal
time
week
month

以下Angular表单验证示例显示了使用$error属性的表单验证。
以下语法用于通过$error属性来验证输入字段-formName.inputFieldName。
$error.validateToken