Pengesahan formulir AngularJS

Hal Sebelumnya Borang AngularJS
Hal Berikutnya API AngularJS

AngularJS boleh mengesahkan data input.

Pengesahan formulir

AngularJS menyediakan pengesahan formulir klien.

AngularJS mengawasi keadaan formulir dan medan input (input, textarea, select) dan membenarkan anda memberitahu pengguna keadaan semasa.

AngularJS juga mengandungi maklumat tentang sama ada ia telah disentuh atau diubah.

Anda boleh guna atribut HTML5 standar untuk mengesahkan masukan, atau membuat fungsi pengesahan sendiri.

Pengesahan klien tidak boleh melindungi masukan pengguna secara sendiri. Pengesahan pihak berikut pula diperlukan.

required

Guna atribut HTML5 required Suku masuk yang ditetapkan mesti diisi:

实例

Suku masuk ini mesti diisi:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" required>  
</form>  
<p>输入的有效状态是：</p>  
<h1>{{myForm.myInput.$valid}}</h1>

Cuba sendiri

email

Guna jenis HTML5 email Nilai yang ditetapkan mesti adalah emel:

实例

Suku masuk ini mesti adalah emel:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" type="email">  
</form>  
<p>输入的有效状态是：</p>  
<h1>{{myForm.myInput.$valid}}</h1>

Cuba sendiri

表单状态和输入状态

AngularJS 会不断更新表单和输入字段的状态。

输入字段有以下状态：

$untouched 该字段尚未被触摸
$touched 该字段已被触摸
$pristine 该字段尚未被修改
$dirty 该字段已被修改
$invalid 字段内容无效
$valid 字段内容有效

它们都是输入字段的属性，要么为真，要么为假。

表单有以下状态：

$pristine 尚未修改任何字段
$dirty 个或多个字段已被修改
$invalid 表单内容无效
$valid 表单内容有效
$subscribed 表单已被提交

它们都是表单的属性，可以为真或假。

您可以使用这些状态向用户显示有意义的消息。例如，如果某个字段是必填项，而用户将其留空，则应该向用户发出警告：

实例

如果该字段已被触摸且为空，则显示错误消息：

<input name="myName" ng-model="myName" required>  
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">名称是必填项。</span>

Cuba sendiri

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>

Cuba sendiri

也可以设置表单的样式。

实例

应用样式至未修改的（原始的）表单和已修改的表单：

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

Cuba sendiri

自定义验证

创建一个自己的验证函数需要一些技巧；您必须向应用程序添加新指令，并使用某些指定参数处理函数内部的验证。

实例

创建您自己的指令，包含自定义验证函数，并通过使用 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>

Cuba sendiri

Example Explained:

在 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="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<h2>驗證範例</h2>
<form ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>
<p>用戶名：<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">用戶名為必填項。<
  </span>
</p>
<p>電子郵件：<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">電子郵件為必填項。</span>
  <span ng-show="myForm.email.$error.email">电子邮件地址無效。</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 = 'Bill Gates';
  $scope.email = 'bill.gates@gmail.com';
});
</script>
</body>
</html>

Cuba sendiri

Atur cara HTML borang novalidate Digunakan untuk lumpuhkan pengesahan default penyemak pelayar.

Contoh penjelasan:

Instruks AngularJS ng-model Pautkan elemen input ke model.

Objek model mempunyai dua sifat:pengguna dan email.

Disebabkan oleh ng-showhanya apabila pengguna atau email adalah $dirty dan $invalid Pada masa itu, span dengan warna red:color akan dipaparkan.

Hal Sebelumnya Borang AngularJS
Hal Berikutnya API AngularJS

Jadual kursus

Panduan

实例

Panduan Rujukan

Kursus pilihan

Perekaan kursus:

Pengesahan formulir AngularJS