[AngularJS] Phần 18: Chứng thực Form trong AngularJS

AngularJS cho phép việc chứng thực form ở phía client. AngularJS điều khiển trạng thái form và các trường input (input, textarea, select) và cho phép bạn thông báo người dùng về trạng thái hiện tại của các trường input. AngularJS cũng giữ các thông tin cho dù chúng được chạm, thay đổi hay không. Bạn có thể dùng các thuộc tính HTML để chứng thực input, hoặc có thể tạo các hàm riêng để chứng thực. Các chứng thực phía client không thể bảo vệ user input hoàn toàn. Do đó, chứng thực phía server cũng nên được áp dụng.

Required
Sử dụng thuộc tính HTML5 required để đặc tả trường input cần phải điền dữ liệu.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>  
</head>

<body ng-app="">

<p>Thử nhập bất kỳ dữ liệu vào ô dưới: --- dammio.com</p>

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

<p>Trạng thái chứng thực của input là:</p>
<h1>{{myForm.myInput.$valid}}</h1>

</body>
</html>

E-mail
Tương tự required, email trong HTML5 cũng dùng để chứng thực các dữ liệu có định dạng email.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>  
</head>
<body ng-app="">

<p>Thử điền vào 1 địa chỉ email: --- dammiodotcom</p>

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

<p>Trạng thái chứng thực của dữ liệu là:</p>
<h1>{{myForm.myInput.$valid}}</h1>
<p>Lưu ý trạng thái của trường input là "true" trước khi bạn điền dữ liệu, ngay cả khi nó không chứa 1 địa chỉ email nào cả.</p>

</body>
</html>

Form State và Input State
AngularJS cập nhật liên tục trạng thái của form và các trường input.

Trường input có các trạng thái sau:

$untouched Trường dữ liệu chưa được chạm vào
$touched Trường dữ liệu đã được chạm vào
$pristine Trường dữ liệu chưa được thay đổi dữ liệu
$dirty Trường dữ liệu đã được thay đổi
$valid Trường dữ liệu có nội dung hợp lệ

Các trạng thái là tất cả thuộc tính của trường dữ liệu, với giá trị true hoặc false.

Form có các trạng thái sau:

$pristine Chưa có trường nào được thay đổi
$dirty Một hay nhiều trường được thay đổi
$invalid Nội dung form không hợp lệ
$valid Nội dung form hợp lệ
$submitted Form đã được submit

Các trạng thái là tất cả thuộc tính của trường dữ liệu, với giá trị true hoặc false. Bạn có thể dùng các trạng thái này để thể hiện ý nghĩa thông điệp tới người dùng. Ví dụ, một trường input cần phải điền dữ liệu, và người dùng để trống trường này, bạn nên đưa người dùng 1 cảnh báo. Ví dụ hiển thị thông báo lỗi nếu trường dữ liệu đã được chạm (touched) và để trống.

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

Các lớp CSS
AgularJS thêm các lớp CSS vào form và các trường nhập liệu tùy theo trạng thái của chúng. Một số lớp sau được thêm, bớt vào các trường nhập liệu.

ng-untouched Trường dữ liệu chưa được chạm vào
ng-touched Trường dữ liệu đã được chạm vào
ng-pristine Trường dữ liệu chưa thay đổi nội dung
ng-dirty Trường dữ liệu đã thay đổi nội dung
ng-valid Nội dung dữ liệu hợp lệ
ng-invalid Nội dung dữ liệu không hợp lệ
ng-valid-key Một khóa cho mỗi chứng thực. Ví dụ: ng-valid-required, hữu ích khi có nhiều hơn 1 thứ cần phải chứng thực.
ng-invalid-key Ví dụ: ng-invalid-required

Các lớp sau được thêm, bớt vào các form:

ng-pristine Không có trường dữ liệu nào được thay đổi nội dung
ng-dirty Một hay nhiều trường được thay đổi nội dung
ng-valid Nội dung form hợp lệ
ng-invalid Nội dung form không hợp lệ
ng-valid-key Một khóa cho mỗi chứng thực. Ví dụ: ng-valid-required, hữu ích khi có nhiều hơn 1 thứ cần phải chứng thực.
ng-invalid-key Ví dụ: ng-invalid-required

Liên quan: [AngularJS] Phần 10: Dịch vụ trong AngularJS

Các lớp bị xóa nếu giá trị thể hiện của chúng là false. Thêm các phong cách vào các lớp làm cho giao diện ứng dụng đẹp hơn. Ví dụ, một trường dữ liệu có nền hồng, khi viết gì đó sẽ chuyển thành nền xanh lá như sau.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS Validation, CSS Classess --- dammio.com</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>  
<style>
input.ng-invalid {
    background-color:pink; 
}
input.ng-valid {
    background-color:lightgreen;
}
</head>
</style>
<body ng-app="">

<p>Viết gì đó vào trường nhập liệu sau: --- dammio.com</p>

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

<p>Trường nhập liệu cần phải có nội dung, và chuyển thành màu xanh lá khi bạn thêm nội dung gì đó.</p>

</body>
</html>

Các form cũng có thể được thêm phong cách. Ví dụ thêm các phong cách cho form lúc ban đầu, và khi form thay đổi, form ban đầu màu xanh sáng, form lúc thay đổi màu hồng.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>  
<style>
form.ng-pristine {
    background-color:lightblue;
}
form.ng-dirty {
    background-color:pink;
}
</style>
</head>
<body ng-app="">

<form name="myForm">
<p>Thử ghi gì đó vào form sau --- dammio.com</p>

<input name="myName" ng-model="myName" required>

<p>Form chứa lớp ng-dirty khi thay đổi nội dung, và có màu hồng.</p>
</form>

</body>
</html>

Chứng thực tùy biến
Việc tạo ra 1 hàm chứng thực của bạn riêng hơi khó 1 tý. Bạn phải thêm một chỉ thị mới vào ứng dụng, và quản lý chứng thực bên trong hàm với 1 số tham số đặc trưng. Ví dụ, tạo ra chỉ thị riêng bạn, chứa 1 hàm chứng thực tự tạo và tham chiếu bằng my-directive. Trường dữ liệu chỉ hợp lệ khi giá trị chứa ký tự “e”.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>  
</head>
<body ng-app="myApp">

<p>Thử ghi gì đó vào trường nhập liệu --- dammio.com:</p>

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

<p>Trạng thái dữ liệu của trường nhập liệu:</p>
<h1>{{myForm.myInput.$valid}}</h1>

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

<p>Trường nhập liệu phải chứa ký tự "e" để được xem là hợp lệ.</p>

</body>
</html>

Giải thích ví dụ trên:
Ở HTML, chỉ thị mới là thuộc tính my-directive. Ở JavaScript, chúng ta thêm chỉ thị mới với tên myDirective.

Nên nhớ, khi đặt tên của 1 chỉ thị, bạn phải dùng tên kiểu Camel (tức là chữ cái đầu từng từ viết hoa trừ từ đầu tiên, ví dụ myDirective), và khi gọi tên, bạn phải dùng dấu gạch ngang -, ví dụ my-directive.

Sau đó, trả về 1 đối tượng nơi bạn đặc tả chúng ta cần ngModel và ngModelController. Tạo liên kết giữa hàm với các đối số, đối số thứ tư mCtrl là ngModelController. Sau đó đặc tả 1 hàm, với tên myValidation, lấy một đối số là giá trị của trường nhập liệu.

Kiểm tra nếu giá trị chứa “e”, và thiết lập tính hợp lệ cho điều kiển mô hình (model controller) là true hay false. Cuối cùng, mCtrl.$parsers.push(myValidation); sẽ thêm hàm myValidation vào 1 mảng các hàm khác, được thực thi mỗi khi giá trị trường nhập liệu thay đổi.

Kết luận: Phù, bài dài quá. Bạn đã học được cách chứng thực form trong AngularJS rồi nhé. Mời bạn xem các phần tiếp theo để hoàn thành nốt series về AngularJS cơ bản.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Trích dẫn bài viết

APA:
Dammio. (2017). [AngularJS] Phần 18: Chứng thực Form trong AngularJS. https://www.dammio.com/2017/06/15/angularjs-phan-18-chung-thuc-form-trong-angularjs.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[AngularJS] Phần 18: Chứng thực Form trong AngularJS}, year = {2017}, url = {https://www.dammio.com/2017/06/15/angularjs-phan-18-chung-thuc-form-trong-angularjs}, urldate = {2023-12-03} }

Kết nối