Xác thực mẫu AngularJS
AngularJS có thể xác thực dữ liệu đầu vào.
Xác thực 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 (đầu vào, vùng văn bản, chọn) 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 chứa thông tin về việc chúng có được chạm vào, sửa đổi hay không.
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.
Xác thực phía máy khách không thể một mình bảo mật đầu vào của người dùng. Xác thực 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 nhập phải được điền:
Ví 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ử » Sử dụng email loại HTML5 để chỉ định rằng giá trị phải là e-mail:
Ví dụ
Trường đầu vào phải là một 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à trường đầu vào.
Các trường đầu vào có các trạng thái sau:
-
$untouchedTrường chưa được chạm vào -
$touchedTrường đã được chạm -
$pristineTrường này chưa được sửa đổi -
$dirtyTrường này đã được sửa đổi -
$invalidNội dung trường không hợp lệ -
$validNội dung trường hợp lệ
Chúng đều là thuộc tính của trường đầu vào và có giá trị true hoặc false .
Các biểu mẫu có các trạng thái sau:
-
$pristineChưa có trường nào được sửa đổi -
$dirtyMột hoặc nhiều hơn đã được sửa đổi -
$invalidNội dung biểu mẫu không hợp lệ -
$validNội dung biểu mẫu hợp lệ -
$submittedBiểu mẫu đã được gửi
Chúng đều là thuộc tính của biểu mẫu và có giá trị 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 báo 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:
Ví 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ử »Lớp CSS
AngularJS thêm các lớp CSS vào biểu mẫu và trường nhập tùy thuộc vào trạng thái của chúng.
Các lớp sau đây được thêm vào hoặc xóa khỏi các trường đầu vào:
-
ng-untouchedTrường chưa được chạm vào -
ng-touchedTrường đã được chạm -
ng-pristineTrường này chưa được sửa đổi -
ng-dirtyTrường đã được sửa đổi -
ng-validNội dung trường hợp lệ -
ng-invalidNộ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-required, hữu ích khi có nhiều thứ phải được xác thực -
ng-invalid- keyVí dụ:ng-invalid-required
Các lớp sau đây được thêm vào hoặc xóa khỏi biểu mẫu:
-
ng-pristineKhông có trường nào chưa được sửa đổi -
ng-dirtyMột hoặc nhiều trường đã được sửa đổi -
ng-validNội dung biểu mẫu hợp lệ -
ng-invalidNộ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-required, hữu ích khi có nhiều thứ phải được xác thực -
ng-invalid- keyVí dụ:ng-invalid-required
Các lớp sẽ bị xóa 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 giao diện người dùng tốt hơn và trực quan hơn.
Ví dụ
Áp dụng kiểu, sử dụng CSS tiêu 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:
Ví dụ
Áp dụng kiểu cho các biểu mẫu chưa sửa đổi (nguyên bản) 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 chức năng xác thực của riêng bạn thì phức tạp hơn một chút; Bạn phải thêm một lệnh 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.
Ví dụ
Tạo lệnh của riêng bạn, chứa chức năng xác thực tùy chỉnh và tham chiếu 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ử »Ví dụ giải thích:
Trong HTML, lệnh mới sẽ được tham chiếu bằng cách sử dụng thuộc tính my-directive .
Trong JavaScript, chúng ta bắt đầu bằng cách thêm một lệnh mới có tên myDirective .
Hãy nhớ rằng, khi đặt tên cho một lệnh, bạn phải sử dụng tên kiểu lạc đà, myDirective , nhưng khi gọi nó, bạn phải sử dụng - tên riêng biệt, my-directive .
Sau đó, trả về một đối tượng mà bạn chỉ định rằng chúng tôi yêu cầu ngModel , đó là ngModelController.
Tạo một hàm liên kết có 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ên myValidation , hàm này nhận 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 chữ cái "e" hay không và đặt tính hợp lệ của bộ điều khiển mô hình thành true hoặc false .
Cuối cùng, mCtrl.$parsers.push(myValidation); sẽ thêm hàm myValidation vào một mảng các hàm khác, hàm này 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 để vô hiệu hóa xác thực trình duyệt mặc định.
Ví dụ giải thích
Mô hình ng 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: user và email .
Vì ng-show , các khoảng có color:red chỉ được hiển thị khi người dùng hoặc email là $dirty và $invalid .
