最新的Web开发教程
 

AngularJS表单验证

❮上一页 下一页章❯

AngularJS可以验证输入的数据。

表单验证

AngularJS提供客户端表单验证。

AngularJS监控表单和输入字段（输入，文本区域，选择）的状态，并让您通知有关当前状态的用户。

AngularJS还拥有自己是否已经被触及，或修改，或没有信息。

您可以使用标准的HTML5属性来验证输入，也可以使自己的验证功能。

注意 客户端验证不能单独安全的用户输入。 服务器端验证也是必要的。

需要

使用HTML5属性required指定输入字段必须填写：

例

输入字段是必需的：

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
试一试»

电子邮件

使用HTML5类型email到指定的值必须是一个电子邮件：

例

输入字段必须是一个电子邮件：

<form name="myForm">
<input name="myInput" ng-model="myInput" type="email">
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
试一试»

形式的国家和输入国

AngularJS是不断更新的形式和输入字段的状态。

输入字段具有以下状态：

  • $untouched的领域还没有被触及尚未
  • $touched的领域已经被触及
  • $pristine字段还未被修改的
  • $dirty现场已被修改
  • $invalid的字段内容无效
  • $valid的字段内容是有效的

他们是输入字段的所有属性，要么是true还是false 。

形式有以下状态：

  • $pristine任何字段都尚未修改
  • $dirty的一个或多个已被修改
  • $invalid形式的内容是无效的
  • $valid形式的内容是有效的
  • $submitted表单提交

他们是表格的所有属性，要么是true还是false 。

您可以使用这些状态展现给用户有意义的信息。 例如，如果需要的字段，以及用户离开空白，你应该给用户一个警告：

例

如果该字段已经被感动，是空的显示错误信息：

<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>
试一试»

CSS类

AngularJS增加CSS类取决于它们的状态的形式和输入字段。

以下类被添加到或从输入字段移除：

  • ng-untouched的字段还未被触动
  • ng-touched的领域已经被触及
  • ng-pristine字段还未被修改的
  • ng-dirty领域已被修改
  • ng-valid的字段内容是有效的
  • ng-invalid的字段内容无效
  • ng-valid- key为每个验证的一个关键 。 例如： ng-valid-required ，有用的，当有超过一件事，必须验证
  • ng-invalid- key举例： ng-invalid-required

下面的类被添加到，或删除，形式：

  • ng-pristine任何字段尚未修改
  • ng-dirty的一个或多个字段已被修改
  • ng-valid形式的内容是有效的
  • ng-invalid形式的内容是无效的
  • ng-valid- key为每个验证的一个关键 。 例如： ng-valid-required ，有用的，当有超过一件事，必须验证
  • ng-invalid- key举例： ng-invalid-required

如果它们代表的值是类去除false 。

样式添加这些类，让您的应用程序更好，更直观的用户界面。

例

应用样式，使用标准的CSS：

<style>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>
试一试»

表格也可以样式：

例

应用样式未修改（原始）的形式，和修饰形式：

<style>
form.ng-pristine {
    background-color: lightblue;
}
form.ng-dirty {
    background-color: pink;
}
</style>
试一试»

自定义验证

要创建自己的验证功能多一点棘手。 你有一个新的指令添加到您的应用程序，并处理与某些特定参数的函数里面的验证。

例

创建自己的指令，包含自定义验证功能，并通过引用它my-directive 。

如果值包含字符“E”的领域才有效：

<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>

<script>
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, mCtrl) {
      function myValidation(value) {
        if (value.indexOf("e") > -1) {
          mCtrl.$setValidity('charE', true);
        } else {
          mCtrl.$setValidity('charE', false);
        }
        return value;
      }
      mCtrl.$parsers.push(myValidation);
    }
  };
});
</script>
试一试»

例子解释：

在HTML中，新指令将使用属性被称为my-directive 。

在JavaScript中，我们加入了一个名为新指令开始myDirective 。

请记住，命名指令时，必须使用骆驼案例名称， myDirective ，但是调用它的时候，你必须使用-分隔的名字， my-directive 。

然后，在你指定我们需要返回一个对象ngModel ，这是ngModelController。

做一个链接功能，这需要一些论据，其中第四个参数， mCtrl ，是ngModelController ，

然后指定一个函数，在这种情况下命名myValidation ，这需要一个参数，这个参数是输入元素的值。

测试是否值包含字母“e”，该模型控制的有效性设置为true或false 。

最后， mCtrl.$parsers.push(myValidation);将增加myValidation功能，其他功能的阵列，这将在每次执行的输入值的变化。

验证实例

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<h2>Validation Example</h2>

<form  ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>

<p>Username:<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>Email:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">Email is required.</span>
  <span ng-show="myForm.email.$error.email">Invalid email address.</span>
  </span>
</p>

<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'John Doe';
    $scope.email = '[email protected]';
});
</script>

</body>
</html>
试一试»
注意 HTML表单属性的novalidate用于禁用默认浏览器验证。

例子解释：

该AngularJS指令NG-模型绑定输入元素到模型中。

该模型对象有两个属性： 用户和电子邮件 。

由于NG-秀 ，色彩搭配跨度：当用户或电子邮件为$肮脏和$无效的红色，才会显示。


❮上一页 下一页章❯