AngularJS tut 18: AngularJS Form Validation

AngularJS có thể xác thực dữ liệu đầu vào.

Xác thực biểu mẫu

AngularJS cung cấp xác thực biểu mẫu phía máy khách.

AngularJS giám sát trạng thái của biểu mẫu và các trường đầu vào (input, textarea, select) và cho phép bạn thông báo cho người dùng về trạng thái hiện tại.

AngularJS cũng nắm thông tin về việc chúng đã được chạm vào, hoặc sửa đổi hay chưa.

Bạn có thể sử dụng các thuộc tính HTML5 tiêu chuẩn để xác thực đầu vào hoặc bạn có thể tạo các hàm xác thực của riêng mình.

Việc xác thực phía máy khách không thể đảm bảo an toàn cho đầu vào của người dùng. Xác nhận phía máy chủ cũng cần thiết.

Yêu cầu

Sử dụng thuộc tính HTML5 requiredđể chỉ định rằng trường đầu vào phải được điền:

Thí dụ

Trường đầu vào là bắt buộc:

<form name="myForm">
  <input name="myInput" ng-model="myInput" required>
</form><p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>

Hãy tự mình thử »

E-mail

Sử dụng loại HTML5 emailđể chỉ định rằng giá trị phải là một e-mail:

Thí dụ

Trường đầu vào phải là e-mail:

<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>

Hãy tự mình thử »

Trạng thái biểu mẫu và trạng thái đầu vào

AngularJS liên tục cập nhật trạng thái của cả biểu mẫu và các trường đầu vào.

Các trường đầu vào có các trạng thái sau:

• $untouched Hiện trường vẫn chưa được chạm vào
• $touched Lĩnh vực này đã được chạm vào
• $pristine Trường vẫn chưa được sửa đổi
• $dirty Trường đã được sửa đổi
• $invalid Nội dung trường không hợp lệ
• $valid Nội dung trường hợp lệ

Chúng là tất cả các thuộc tính của trường đầu vào và là true hoặc false.

Biểu mẫu có các trạng thái sau:

• $pristine Chưa có trường nào được sửa đổi
• $dirty Một hoặc nhiều đã được sửa đổi
• $invalid Nội dung biểu mẫu không hợp lệ
• $valid Nội dung biểu mẫu hợp lệ
• $submitted Biểu mẫu được gửi

Chúng là tất cả các thuộc tính của biểu mẫu, và là true hoặc false.

Bạn có thể sử dụng các trạng thái này để hiển thị các thông điệp có ý nghĩa cho người dùng. Ví dụ, nếu một trường là bắt buộc và người dùng để trống, bạn nên đưa ra cảnh báo cho người dùng:

Thí dụ

Hiển thị thông báo lỗi nếu trường đã được chạm VÀ trống:<input name=”myName” ng-model=”myName” required>
<span ng-show=”myForm.myName.$touched && myForm.myName.$invalid”>The name is required.</span>Hãy tự mình thử »

Các lớp CSS

AngularJS thêm các lớp CSS vào các biểu mẫu và trường đầu vào tùy thuộc vào trạng thái của chúng.

Các lớp sau được thêm vào hoặc xóa khỏi các trường đầu vào:

• ng-untouched Hiện trường vẫn chưa được chạm vào
• ng-touched Lĩnh vực này đã được chạm vào
• ng-pristine Trường vẫn chưa được sửa đổi
• ng-dirty Trường đã được sửa đổi
• ng-valid Nội dung trường hợp lệ
• ng-invalid Nội dung trường không hợp lệ
• ng-valid-keyMột khóa cho mỗi lần xác thực. Ví dụ:, ng-valid-requiredhữu ích khi có nhiều thứ phải được xác thực
• ng-invalid-key Thí dụ: ng-invalid-required

Các lớp sau được thêm vào hoặc xóa khỏi biểu mẫu:

• ng-pristine Không có trường nào chưa được sửa đổi
• ng-dirty Một hoặc nhiều trường đã được sửa đổi
• ng-valid Nội dung biểu mẫu hợp lệ
• ng-invalid Nội dung biểu mẫu không hợp lệ
• ng-valid-keyMột khóa cho mỗi lần xác thực. Ví dụ:, ng-valid-requiredhữu ích khi có nhiều thứ phải được xác thực
• ng-invalid-key Thí dụ: ng-invalid-required

Các lớp bị loại bỏ nếu giá trị mà chúng đại diện là false.

Thêm kiểu cho các lớp này để cung cấp cho ứng dụng của bạn một giao diện người dùng tốt hơn và trực quan hơn.

Thí dụ

Áp dụng các kiểu, sử dụng CSS chuẩn:

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

Hãy tự mình thử »

Các biểu mẫu cũng có thể được tạo kiểu:

Thí dụ

Áp dụng kiểu cho các biểu mẫu chưa sửa đổi (nguyên sơ) và cho các biểu mẫu đã sửa đổi:

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

Hãy tự mình thử »

Xác thực tùy chỉnh

Để tạo hàm xác nhận của riêng bạn thì hơi phức tạp hơn một chút; Bạn phải thêm một chỉ thị mới vào ứng dụng của mình và xử lý việc xác thực bên trong một hàm với các đối số được chỉ định nhất định.

Thí dụ

Tạo chỉ thị của riêng bạn, chứa một hàm xác thực tùy chỉnh và tham khảo nó bằng cách sử dụng my-directive.

Trường sẽ chỉ hợp lệ nếu giá trị chứa ký tự “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>

Hãy tự mình thử »

Giải thích ví dụ:

Trong HTML, chỉ thị mới sẽ được tham chiếu bằng cách sử dụng thuộc tính my-directive.

Trong JavaScript, chúng tôi bắt đầu bằng cách thêm một chỉ thị mới có tên myDirective.

Hãy nhớ rằng, khi đặt tên cho một chỉ thị, bạn phải sử dụng tên trường hợp lạc đà myDirective, nhưng khi gọi nó, bạn phải sử dụng -tên riêng my-directive,.

Sau đó, trả về một đối tượng mà bạn chỉ định mà chúng tôi yêu cầu  ngModel, đó là ngModelController.

Tạo một hàm liên kết nhận một số đối số, trong đó đối số thứ tư mCtrl, là ngModelController,

Sau đó, chỉ định một hàm, trong trường hợp này được đặt tên myValidation, lấy một đối số, đối số này là giá trị của phần tử đầu vào.

Kiểm tra xem giá trị có chứa ký tự “e” hay không và đặt hiệu lực của bộ điều khiển mô hình thành một trong hai truehoặc false.

Cuối cùng, mCtrl.$parsers.push(myValidation);sẽ thêm myValidationhàm vào một mảng các hàm khác, sẽ được thực thi mỗi khi giá trị đầu vào thay đổi.

Ví dụ xác thực

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/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>

Hãy tự mình thử »

Thuộc tính biểu mẫu HTML novalidate được sử dụng để tắt xác thực trình duyệt mặc định.

Giải thích ví dụ

Ng-model chỉ thị AngularJS liên kết các phần tử đầu vào với mô hình.

Đối tượng mô hình có hai thuộc tính: người dùng và email .

Do ng-show , các khoảng có màu: đỏ chỉ được hiển thị khi người dùng hoặc email $dirty và $invalid.