在 AngularJS 中添加自定义表单验证
验证是扫描输入数据正确性的过程，通常用于纠错或数据一致性。 AngularJS 自定义验证是一个强大的库，允许开发人员创建自定义验证规则。
在本文中，我们将讨论有关 AngularJS 自定义验证的所有内容。 让我们从表单验证器开始。
AngularJS 中的表单验证器
Angular 支持两种基本形式。
- 模板驱动的表单
- 反应形式
模板驱动的表单提供了一种声明式的、易于使用的、经过良好测试的方式来创建表单。 这是 Angular 中的默认形式。
反应式表单是一种更底层的 API，可让您更好地控制表单的行为。 它旨在使用响应式数据源，例如可观察对象或事件发射器。
表单中的每个字段都可以用作 FormControl，返回有关该字段的特定信息，例如表单是否有效、实际字段值和其他详细信息。
AngularJS 中的自定义验证器
Angular 有一个用于验证数据的内置系统，称为 Validator API。 但是，当涉及到更复杂的验证规则或验证规则特定于您的应用程序时，您可以使用自定义验证器。
Angular 中的自定义验证器非常有用，因为它们允许开发人员在不依赖外部库的情况下创建自己的验证规则。 它们还使开发人员可以更直接地将验证逻辑扩展到 Angular 和其他应用程序部分之外。
重要的是要注意 AngularJS 自定义验证可以与任何其他验证库一起使用，例如 jQuery，但这不是必需的。
在 AngularJS 中创建或添加自定义表单验证的步骤
以下步骤将指导您创建 AngularJS 自定义表单验证。
- 创建一个新的 AngularJS 项目。
- 在我们的 index.html 文件中包含 ng-bootstrap CSS 文件。
- 将 ng-bootstrap JavaScript 文件添加到我们的 index.html 文件中。
- 在 HTML 页面中创建一个带有输入字段的自定义表单，并将其包含在 index.html 的正文部分中。
- 创建一个 Angular 控制器并将其添加到 index.html。
- 创建一个 Angular 表单指令并将其添加到 index.html。
- 将表单控制器注入我们的角度控制器。
让我们讨论 AngularJS 中自定义表单验证的示例。
HTML 代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="app.js"></script>
</head>
<body ng-app="FormValidationExample">
<div ng-controller="ctrlForm">
<form name="myForm" novalidate>
<div class="input-item">
<label for="txtEmail">Your email</label><br>
<input type="email" name="email" id="txtEmail" class="text-box" ng-model="email" required custom-focus />
<div class="error-wrapper" ng-show="myForm.email.$dirty && myForm.email.$invalid && !myForm.email.$focused">
<span ng-show="myForm.email.$error.required">Email is required</span>
<span ng-show="myForm.email.$error.email">Please enter a valid email address</span>
</div>
</div>
<input type="submit" value="Submit" ng-disabled="myForm.$invalid" />
</form>
</div>
</body>
</html>
JavaScript 代码:
angular.module('FormValidationExample', [])
.controller('ctrlForm', ['$scope', function($scope) {
$scope.checkboxes_motives = { 'checked': false, items: {} };
$scope.choices = ['work', 'play'];
$scope.selectAllMotives = function(value) {
angular.forEach($scope.choices, function (motive) {
$scope.checkboxes_motives.items[motive] = value;
});
};
}])
.directive('customFocus', [function() {
var FOCUS_CLASS = "custom-focused";
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
ctrl.$focused = false;
element.bind('focus', function(evt) {
element.addClass(FOCUS_CLASS);
scope.$apply(function() {ctrl.$focused = true;});
}).bind('blur', function(evt) {
element.removeClass(FOCUS_CLASS);
scope.$apply(function() {ctrl.$focused = false;});
});
}
}
}]);
在这个例子中，我们验证了一个电子邮件地址。 如果您在此处输入了错误的电子邮件地址，它将显示错误，直到或除非您将其更正。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间：2024/03/24 浏览次数：102 分类：JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。
