如何在 Angular JS 或 HTML5 中进行组件验证

Question

我从过去 4 天开始学习 Angular JS，现在我想做组件验证，比如有效电子邮件，只有字符整数。jquery 支持这些类型的验证。我的问题是 angular js 是否也提供了这种验证或者我必须为此使用任何 API 或 HTML5 支持的任何验证 API。

问候

Answer 1

Angular 通过在可以绑定的范围上公开验证模型或检查有效性来支持验证。

角度验证

假设你有一个表格并给它一个名字：

<form name="myForm">

Angular 使用此名称将模型绑定到名为 myForm 的作用域上。

在这种情况下，它是

$scope.myForm

验证模型还具有您可以绑定或验证的以下验证属性。

$scope.myForm.$valid    // form is valid?
$scope.myForm.$invalid  // form is invalid?
$scope.myForm.$pristine // is the form untouched?
$scope.myForm.$dirty    // is the form dirty? (opposite of $pristine)
$scope.myForm.$error    // this is a special error object that has validation flags
                        // that you can bind to as well.  More on this later...

例如，您可以在控制器中使用这些特殊属性：

app.controller('ctrl', function($scope) {
   if($scope.myForm.$valid) {
      // submit form...
   }
});

或者将它们绑定到 HTML 中的错误消息：

<div ng-show="myForm.$invalid">Something is wrong!!</div>

还有对表单中字段的验证支持。与表单验证模型一样，输入验证模型也具有相同的属性。

在表单元素中放置一个输入文本字段并为其命名：

<form name="myForm">
   <input name="myField" type="text" ng-model="name" />
</form>

名字很重要。该名称用于在表单模型上定义属性。在这种情况下，它是

$scope.myForm.myField

与表单验证对象一样，字段验证对象也具有相同的验证属性：

$scope.myForm.myField.$valid    // form is valid?
$scope.myForm.myField.$invalid  // form is invalid?
$scope.myForm.myField.$pristine // is the form untouched?
$scope.myForm.myField.$dirty    // is the form dirty? (opposite of $pristine)
$scope.myForm.myField.$error    // this is a special error object that has validation flags
                                // that you can bind to as well.  More on this later...

$valid、$invalid、$pristine 和 $dirty 是布尔标志。

然而，$error 对象是特殊的。它是由 angular 指令或您创建的自定义指令自动设置的验证标志的容器。

例如，您可以将 required 验证指令添加到具有 ng-model 的字段：

<input type="text" ng-model="myField" required />

required 验证指令将在字段为空时设置 $error 的 required 有效性标志。

例如，

$scope.myForm.myField.$error.required

这允许您在 HTML 中绑定到适当的错误消息：

<div ng-show="myForm.myField.$error.required"> This field cannot be blank!</div>

简而言之，这就是 Angular 验证，

希望对你有帮助