AngularJS Form Validation
Bài đăng này đã không được cập nhật trong 7 năm
Validation từ phía client sẽ giúp người dùng thuận tiện hơn trong việc điền form khi không phải submit một form chứa lỗi rồi lại phải sửa lại. Hôm nay tôi sẽ giới thiệu với các bạn cách để validate từ client với AngularJS. AngularJS cung cấp validation từ phía máy khách, ngoài ra nó còn có thể theo dõi trạng thái của form và các trường input 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 lưu giữ thông tin về việc liệu chúng có bị tác động, hoặc sửa đổi hay không. Ngoài ra bạn có thể sử dụng các thuộc tính HTML5 chuẩn để xác định kiểu validation, hoặc có thể customize validation của riêng bạn.
1. Validation với các thuộc tính của HTML 5
giả sử tôi có 1 form đơn giản với 1 trường được gán attribute type="email". Ở đây tôi có thể dễ dàng kiểm tra valid dữ liệu người dùng truyền vào bằng dòng lệnh myForm.myInput.$valid và angular sẽ dựa vào giá trị tại trường type của input để validate dữ liệu. Ngoài ra các bạn có thể thử với các giá trị khác của attribute type như: number, date,....
<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>
2. Form State, Input State và CSS Classes
AngularJS sẽ liên tục cập nhật trạng thái của cả form và inputs đầu vào, và điều này giúp chúng ta dễ dàng bắt được event theo từng trường hợp cụ thể.
-
Sau đây là những thuộc tính của input và chúng chỉ có 2 giá trị true hoắc false: $untouched: Trường chưa được tác động vào $touched: Trường đã được tác động vào $pristine: Trường 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ệ
-
Sau đây là những thuộc tính của form và chúng chỉ có 2 giá trị true hoắc false: $pristine: Chưa có trường nào được sửa đổi $dirty: Đã sửa đổi một hoặc nhiều trường $invalid: Nội dung form không hợp lệ $valid: Nội dung form hợp lệ $submitted: form đã được gửi
Ứng với những trạng thái của input và form, AngularJS cung cấp những CSS classes tương ứng để lập trình viên có thể dễ dàng tùy biến css theo từng trạng thái.
-
Các class sau đây được thêm vào, hoặc loại bỏ từ các trường input, Và các lớp học sẽ bị xóa nếu giá trị mà chúng đại diện là false.: ng-untouched: The field has not been touched yet ng-touched: The field has been touched ng-pristine: The field has not been modified yet ng-dirty: The field has been modified ng-valid: The field content is valid ng-invalid: The field content is not valid ng-valid-key: One key for each validation. Example: ng-valid-required, useful when there are more than one thing that must be validated ng-invalid-key: Example: ng-invalid-required
-
Các class sau đây được thêm vào, hoặc loại bỏ từ các thẻ form, Và các lớp học sẽ bị xóa nếu giá trị mà chúng đại diện là false.: ng-pristine No fields has not been modified yet ng-dirty One or more fields has been modified ng-valid The form content is valid ng-invalid The form content is not valid ng-valid-key One key for each validation. Example: ng-valid-required, useful when there are more than one thing that must be validated ng-invalid-key Example: ng-invalid-required
Trong ví dụ sau, tôi sẽ thiết lập một trường có background-color là đỏ khi mặc định hoặc khi người dùng nhập giá trị invalid, và khi người dùng nhập giá trị valid thì background-color chuyển sang màu xanh.
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
input.ng-invalid {background-color:pink;}
input.ng-valid {background-color:lightgreen;}
</style>
<body ng-app="">
<p>Try writing in the input field:</p>
<form name="myForm">
<input name="myName" ng-model="myName" required>
</form>
<p>The input field requires content, and will therefore become green when you write in it.</p>
</body>
</html>
3. Custom Validation
Để custom validation của riêng bạn sẽ có một chút khó khăn hơn. Bạn phải thêm một new directive vào application của bạn, và xử lý việc xác nhận bên trong một hàm với các arguments nhất định. Thí dụ: Tôi sẽ tạo một directive, có chứa một custom validation function, và refer nó sử dụng directive của tôi. Cụ thể ở đây trường này sẽ chỉ hợp lệ nếu giá trị chứa ký tự "e":
<body ng-app="myApp">
<p>Try writing in the input field:</p>
<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>
<p>The input's valid state is:</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>The input field must contain the character "e" to be consider valid.</p>
</body>
Trong HTML, directive mới sẽ được refer đến bằng cách sử dụng thuộc tính của directive của tôi. Trong JavaScript chúng ta bắt đầu bằng cách thêm một directive mới tên là myDirective. Nên nhớ, khi đặt tên directive, bạn phải sử dụng theo "Camel Case Name", myDirective. nhưng khi gọi nó, bạn phải sử dụng - giữa các từ, my-directive. Sau đó, trả về một đối tượng mà bạn chỉ định rằng chúng ta cần ngModel, đó là ngModelController.Thực hiện một chức năng liên kết mà mất một số argument, trong đó argument thứ tư, mCtrl, là ngModelController, Sau đó tôi định nghĩa một hàm, trong trường hợp này là myValidation, trong đó lấy một argument, argument này là giá trị của phần tử đầu vào.Kiểm tra nếu giá trị truyền vào có chứa ký tự "e" không, và đặt giá trị của model controller là true hay false.Cuối cùng, mCtrl. $ Parsers.push (myValidation); Sẽ thêm chức năng myValidation vào một mảng các hàm khác, nó sẽ được thực hiện mỗi khi giá trị đầu vào thay đổi.
Trên đây là bài giới thiệu của tôi về AngularJS validation, cảm ơn các bạn đã theo dõi
All rights reserved
