路科验证示例

In this post, we will see how Angular form validation works. Earlier we looked into angular form and controls.

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

角度形式验证 (Angular Form Validation)

AngularJS makes it easy to handle client-side form validations without much effort. In next sections we will look into some Angular form validation example.

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

角度形式验证–输入 (Angular Form Validation – input)

Following are some of the basic angular form validation options available for an input field.

以下是一些可用于输入字段的基本角度形式验证选项。

1. 需要 (required)

2. Adding required html5 tag to an input field validates whether the field is empty or not. This ensures that the field should have some value. The following syntax is used for required with input.

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

   <input type="text" required />

   AngularJS provides a ng-required directive to do the same thing. Using this directive you have the flexibility to set the input field should have a value or not.

   AngularJS提供了ng-required指令来执行相同的操作。 使用此伪指令，您可以灵活地设置输入字段是否应具有值。

   The following syntax is used to make sure that the input field should not be empty. We can set it to false if you do not want to restrict this.

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

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

3. 最小长度 (Minimum Length)

4. The directive ng-minlength is used to validate the minimum length of the input value.  This will make sure that the length of the entered value not less than the value set using ng-minlength directive.

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

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

5. 最大长度 (Maximum Length)

6. The directive ng-maxlength is used to validate the maximum length of the input value.  This will make sure that the length of the entered value is not more than the value set using ng-max length directive.

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

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

7. 模式 (Pattern)

8. The ng-pattern directive is used to ensure that an input matches a regex pattern, the following syntax is used.

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

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

9. 电子邮件 (Email)

10. We can set the input type to email to ensure that the input field is a valid email id.

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

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

11. 数 (Number)

12. We can set the input type to number to ensure that the input field is a number.

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

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

13. 网址 (URL)

14. We can set the input type to url to ensure that the input field is a url.

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

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

角形验证属性 (Angular Form Validation Properties)

Angular provides properties on forms to keep track of all its controls and nested forms as well as the state of them, such as being valid/invalid or dirty/pristine. The following table describes those properties and corresponding angular classes that help us to validate forms.

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

Property	Class	Description
$valid	ng-valid	Boolean True if all of the containing forms and controls are valid.
$invalid	ng-invalid	Boolean True if at least one containing control or form is invalid.
$pristine	ng-pristine	Boolean True if user has not interacted with the form yet.
$dirty	ng-dirty	Boolean True if user has already interacted with the form.
$touched	ng-touched	Boolean True if the input has been blurred.
$submitted	ng-submit	Boolean True if user has submitted the form even if its invalid.

属性	类	描述
$有效	ng有效	布尔值如果所有包含的表单和控件均有效，则为True。
$无效	ng无效	布尔值如果包含控件或窗体的至少一个无效，则为True。
原始的	ng-原始	布尔值如果用户尚未与表单交互，则为True。
$脏	ng-dirty	布尔值如果用户已经与表单进行了交互，则为True。
$感动	触摸	布尔值如果输入模糊，则为True。
$已提交	ng提交	布尔值如果用户已提交表单（即使表单无效），则为True。

使用CSS类进行角度形式验证 (Angular Form Validation Using CSS Classes)

While handling forms angularJS adds specific classes to the form based upon their state. To allow styling of form as well as controls, ngModel adds these CSS classes:

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

• ng-valid
  ng有效
• ng-invalid
  ng无效
• ng-pristine
  ng-原始
• ng-dirty
  ng-dirty
• ng-touched
  触摸
• ng-untouched
  ng不变
• ng-pending
  待处理

The following example uses the following CSS to display validity of each form control.

下面的示例使用以下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>

You have to add the required attribute with input field otherwise it will not validate correctly. You should also include novalidate attribute to disable the browser’s native form validation.

您必须在输入字段中添加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>

We have disabled the submit button if the form input is invalid. Following code shows how we used in our application.

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

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

The following script defines the controller used in our application.

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

app.js

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();});

You will see the following output on your browser. In the example both employee.name and employee.email are required, but are rendered with red background only after the input is out of focus.

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

演示地址

使用$ error属性进行角度形式验证 (Angular Form Validation Using $error property)

AngularJS provides another property called $error , is an object hash, containing references to controls or forms with failing validators, where its keys are validation tokens (error names) and values are arrays of controls or forms that have a failing validator for given error name.
The following list shows the Built-in validation tokens:

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

• email
  电子邮件
• max
  最高
• maxlength
  最长长度
• min
  分
• minlength
  最小长度
• number
  数
• pattern
  模式
• required
  需要
• url
  网址
• date
  日期
• datetimelocal
  datetimelocal
• time
  时间
• week
  周
• month
  月

The following angular form validation example shows form validation using $error property.
The following syntax is used to validate the input field using $error property – formName.inputFieldName.$error.validateToken

下面的角度表单验证示例显示了使用$error属性进行表单验证。
以下语法用于使用$error属性验证输入字段– formName.inputFieldName.$error.validateToken

角度形式验证示例 (Angular Form Validation Example)

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>AngularJS Simple Form Demo</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" name="empName" ng-required="true"/><br /><div ng-show="form.$submitted || form.empName.$touched"><span style="color:orange" ng-show="form.empName.$error.required">Please enter your name.</span></div>E-mail : <input type="email" name="empEmail" ng-model="employee.email" ng-required="true"/><br /><div ng-show="form.$submitted || form.empEmail.$touched"><span style="color:orange" ng-show="form.empEmail.$error.required">Please enter an email-id.</span><span style="color:red" ng-show="form.empEmail.$error.email">This is not a valid email.</span></div>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>

app.js

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();});

You will see the following output on your browser.

您将在浏览器中看到以下输出。

演示地址

That’s all for angular form validation example, we will see more interesting posts in the coming series.

这就是角度形式验证示例的全部内容，在接下来的系列中我们将看到更多有趣的文章。

翻译自: https://www.journaldev.com/7921/angular-form-validation-example

路科验证示例