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

Trang trước Form AngularJS
Trang tiếp theo API AngularJS

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 khách hàng.

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

AngularJS còn cung cấp thông tin về liệu chúng có bị chạm hay thay đổi hay không.

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

Xác thực khách hàng không thể bảo vệ độc lập đầu vào của người dùng. Xác thực máy chủ cũng là bắt buộc.

yêu cầu

Sử dụng thuộc tính HTML5 yêu cầu Giá trị phải được điền vào trường này:

thực thể

Trường hợp này là bắt buộc:

<form name="myForm">  
  <input ten="myInput" ng-model="myInput" yêu cầu>  
</form>  
<p>Trạng thái hợp lệ của đầu vào là:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

Thử ngay

email

Sử dụng loại HTML5 email Giá trị này phải là email:

thực thể

Trường hợp này phải là email:

<form name="myForm">  
  <input ten="myInput" ng-model="myInput" type="email">  
</form>  
<p>Trạng thái hợp lệ của đầu vào là:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

Thử ngay

Trạng thái biểu mẫu và trạng thái nhập

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

Trường nhập có các trạng thái sau:

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

Họ đều là thuộc tính của trường nhập, có thể là đúng hoặc sai.

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

$pristine Chưa sửa đổi bất kỳ trường nào
$dirty Một hoặc nhiều trường đã đượ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ệ
$subscribed Biểu mẫu đã được gửi

Họ đều là thuộc tính của biểu mẫu, có thể là đúng hoặc sai.

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 cảnh báo người dùng:

thực thể

Nếu trường này đã được chạm và trống, sẽ hiển thị thông báo lỗi:

<input name="myName" ng-model="myName" required>  
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">Tên là bắt buộc.</span>

Thử ngay

Lớp CSS

AngularJS sẽ thêm các lớp CSS vào biểu mẫu và trường nhập dựa trên trạng thái của chúng.

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

ng-untouched Trường này chưa được chạm
ng-touched Trường này đã được chạm
ng-pristine Trường này chưa được sửa đổi
ng-dirty Trường này đã đượ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-key Xác thực một khóa mỗi lần. Ví dụ:ng-valid-requiredrất hữu ích khi có nhiều nội dung cần xác thực.
ng-invalid-key Ví dụ:ng-invalid-required

Các lớp sau được thêm vào biểu mẫu hoặc bị 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-key Xác thực một khóa mỗi lần. Ví dụ:ng-valid-requiredrất hữu ích khi có nhiều nội dung cần xác thực.
ng-invalid-key Ví dụ:ng-invalid-required

Nếu giá trị đại diện bởi lớp là: falsethì các lớp này sẽ bị xóa bỏ.

Vui lòng thêm樣式 cho các lớp này, cung cấp giao diện người dùng tốt hơn và trực quan hơn cho ứng dụng của bạn.

thực thể

Áp dụng CSS tiêu chuẩn để áp dụng樣式:

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

Thử ngay

Cũng có thể thiết lập樣式 cho biểu mẫu.

thực thể

Áp dụng樣式 cho biểu mẫu chưa được sửa đổi (nguyên gốc) và biểu mẫu đã được sửa đổi:

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

Thử ngay

Xác minh tùy chỉnh

Tạo một hàm xác minh tùy chỉnh đòi hỏi một số kỹ năng; bạn phải thêm chỉ thị mới vào ứng dụng và sử dụng một số tham số xử lý xác minh trong hàm nội bộ.

thực thể

Tạo chỉ thị của riêng bạn, bao gồm hàm xác minh tùy chỉnh, và thông qua việc sử dụng my-directive tham chiếu nó.

Chỉ khi giá trị chứa ký tự "e" thì trường này mới hợp lệ:

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

Thử ngay

Giải thích ví dụ:

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

Trong JavaScript, chúng ta đầu tiên thêm một tên là myDirective của chỉ thị mới.

Lưu ý, khi đặt tên cho một hàm chỉ thị, bạn phải sử dụng định dạng tên mũ, như myDirectiveNhưng khi gọi nó, bạn phải sử dụng tên phân tách bằng dấu gạch nối, như my-directive.

Sau đó, trả về một đối tượng trong đó chỉ định rằng chúng ta cần ngModellà ngModelController.

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

Sau đó chỉ định một hàm, trong ví dụ này có tên là myValidationNó chấp nhận một tham số, đó là giá trị của phần tử đầu vào.

Kiểm tra xem giá trị có chứa chữ cái "e" hay không, và thiết lập tính hợp lệ của bộ điều khiển mô hình true hoặc false.

Cuối cùng,mCtrl.$parsers.push(myValidation); sẽ myValidation Hàm được thêm vào mảng các hàm khác, các hàm này sẽ được thực hiện mỗi khi giá trị nhập thay đổi.

Chương trình kiểm tra

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<h2>Chương trình kiểm tra</h2>
<form ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Tên người dùng:<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">Tên người dùng là bắt buộc.</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 là bắt buộc.</span>
  <span ng-show="myForm.email.$error.email">Địa chỉ email không hợp lệ.</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>

Thử ngay

Thuộc tính biểu mẫu HTML novalidate Để tắt xác thực mặc định của trình duyệt.

Ví dụ giải thích:

Cú pháp AngularJS ng-model Gắn phần tử đầu vào vào mô hình.

Mục đối tượng mô hình có hai thuộc tính:user và email.

do ng-showchỉ khi user hoặc email là $dirty và $invalid thì mới hiển thị các spans có màu red.

Trang trước Form AngularJS
Trang tiếp theo API AngularJS

Bảng khóa học

Hướng dẫn

thực thể

Sách tham khảo

Khóa học tự chọn

Khuyến nghị khóa học:

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