Xác thực biểu mẫu AngularJS khi gửi: Ví dụ đăng ký
James Hartman
Xác thực mẫu trong AngularJS
Xác thực biểu mẫu trong AngularJS là quá trình đảm bảo dữ liệu nhập vào biểu mẫu là chính xác và đầy đủ. Khi người dùng gửi biểu mẫu, quá trình xác thực diễn ra trước khi các chi tiết được gửi đến máy chủ. Quá trình xác thực đảm bảo ở mức độ tốt nhất có thể rằng các chi tiết cho các trường nhập được nhập theo đúng cách.
Trong một ví dụ thực tế, hãy giả sử một trang web yêu cầu phải hoàn thành biểu mẫu đăng ký trước khi có quyền truy cập đầy đủ vào trang web này. Trang đăng ký sẽ có các trường nhập cho tên người dùng, mật khẩu, ID email, v.v.
Ví dụ, ID email luôn phải có định dạng tên người dùng@site.domain; nếu ai đó chỉ nhập tên người dùng vào ID email, thì lý tưởng nhất là xác thực sẽ thất bại. Vì vậy, xác thực sẽ xem xét thực hiện các kiểm tra cơ bản này trước khi các chi tiết được gửi đến máy chủ để xử lý thêm.
Xác thực biểu mẫu bằng HTML5
Xác thực biểu mẫu là quá trình xác thực trước thông tin được người dùng nhập trên biểu mẫu web trước khi nó được gửi đến máy chủ. Tốt hơn hết là bạn nên xác thực thông tin từ phía khách hàng. Điều này là do nó sẽ tốn ít chi phí hơn nếu người dùng phải xem lại biểu mẫu nếu thông tin đã nhập sai.
Chúng ta hãy xem cách xác thực biểu mẫu AngularJS có thể được tiến hành trong HTML5.
Trong ví dụ này, chúng tôi sẽ hiển thị cho người dùng một biểu mẫu đăng ký đơn giản, trong đó người dùng cần nhập các thông tin như tên người dùng, mật khẩu, ID email và tuổi.
Biểu mẫu sẽ có các điều khiển xác thực để đảm bảo rằng người dùng nhập thông tin theo cách thích hợp.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">
<form>
Enter your user name:
<input type="text" name="name" required><br><br>
Enter your password:
<input type="password"/><br><br>
Enter your email:
<input type="email"/><br><br>
Enter your age:
<input type="number" /><br><br>
<input type="submit" value="Submit"/>
</form>
</div>
</body>
</html>
Giải thích mã
- Đối với kiểu nhập văn bản, chúng tôi sử dụng thuộc tính 'required'. Điều này có nghĩa là hộp văn bản không được để trống khi biểu mẫu được gửi và một số loại văn bản phải có trong hộp văn bản.
- Loại đầu vào tiếp theo là mật khẩu. Vì loại đầu vào được đánh dấu là mật khẩu nên khi người dùng nhập bất kỳ văn bản nào vào trường này, nó sẽ bị che đi.
- Vì loại đầu vào được chỉ định là email nên văn bản trong hộp cần phải khớp với mẫu tên@site.domain.
- Khi kiểu nhập được đánh dấu là số, nếu người dùng cố nhập bất kỳ ký tự nào bằng bàn phím hoặc bảng chữ cái, ký tự đó sẽ không được nhập vào hộp văn bản.
Nếu mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt để xác thực biểu mẫu AngularJS khi gửi.
Đầu ra
Để xem quá trình xác thực biểu mẫu đang hoạt động, hãy nhấp vào nút Gửi mà không nhập bất kỳ thông tin nào trên màn hình.
Sau khi nhấp vào nút gửi, một cửa sổ bật lên sẽ hiển thị lỗi xác thực yêu cầu phải điền vào trường đó.
Vì vậy, việc xác thực điều khiển được đánh dấu là bắt buộc sẽ khiến thông báo lỗi hiển thị nếu người dùng không nhập bất kỳ giá trị nào vào trường văn bản.
Khi người dùng nhập bất kỳ giá trị nào vào phần điều khiển mật khẩu, bạn sẽ thấy ký hiệu '*' được sử dụng để che dấu các ký tự được nhập.
Sau đó, hãy nhập ID email sai và nhấp vào nút gửi. Sau khi nhấp vào nút gửi, một cửa sổ bật lên sẽ xuất hiện hiển thị lỗi xác thực rằng trường cần có ký hiệu @.
Vì vậy, việc xác thực đối với điều khiển được đánh dấu là điều khiển email sẽ khiến thông báo lỗi hiển thị nếu người dùng không nhập đúng ID email vào trường văn bản.
Cuối cùng, khi bạn cố gắng nhập bất kỳ ký tự nào trong điều khiển văn bản độ tuổi, ký tự đó sẽ không được nhập trên màn hình. Điều khiển sẽ chỉ điền một giá trị khi một số được nhập vào điều khiển.
Xác thực biểu mẫu bằng cách sử dụng $dirty, $valid, $invalid, $pristine
AngularJS cung cấp các thuộc tính bổ sung của nó để xác thực. AngularJS cung cấp các thuộc tính sau cho các điều khiển cho mục đích xác thực
- $bẩn – Người dùng đã tương tác với điều khiển
- $ hợp lệ – Nội dung trường hợp lệ
- $ không hợp lệ – Nội dung trường không hợp lệ
- $ nguyên sơ – Người dùng chưa tương tác với điều khiển
Dưới đây là các bước cần được tuân theo để thực hiện xác thực Angular.
Bước 1) Sử dụng thuộc tính không xác thực khi khai báo biểu mẫu. Thuộc tính này cho HTML5 biết rằng việc xác thực sẽ được thực hiện bởi AngularJS.
Bước 2) Đảm bảo rằng biểu mẫu có tên được xác định cho nó. Lý do làm điều này là vì khi thực hiện xác thực Angular, tên biểu mẫu sẽ được sử dụng.
Bước 3) Đảm bảo mỗi điều khiển cũng có tên được xác định cho nó. Lý do thực hiện việc này là vì khi thực hiện xác thực Angular, tên điều khiển sẽ được sử dụng.
Bước 4) Sử dụng ng-show chỉ thị để kiểm tra các thuộc tính $dirty, $invalid và $valid cho các điều khiển.
Hãy xem một ví dụ kết hợp các bước nêu trên.
Trong ví dụ của chúng tôi,
Chúng ta chỉ cần có một trường văn bản đơn giản trong đó người dùng cần nhập tên Chủ đề vào hộp văn bản. Nếu không thực hiện, lỗi xác thực sẽ được kích hoạt và thông báo lỗi sẽ được hiển thị cho người dùng.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<form ng-app="DemoApp" ng-controller="DemoController" name="myForm" novalidate>
<p>Topic Name:<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>
<input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid">
</p>
</form>
<script>
var app = angular.module("DemoApp",[]);
app.controller("DemoController",function($scope) {
$scope.Display = function () {
$scope.user='Angular';
}
});
</script>
</body>
</html>
Giải thích mã
- Lưu ý rằng chúng tôi đã đặt tên cho Biểu mẫu là “myForm”. Điều này là bắt buộc khi truy cập các điều khiển trên biểu mẫu để xác thực AngularJS.
- Sử dụng thuộc tính “novalidate” để đảm bảo rằng biểu mẫu HTML cho phép AngularJS thực hiện xác thực.
- Chúng tôi đang sử dụng chỉ thị ng-show để kiểm tra thuộc tính “$dirty” và “$invalid”. Điều này có nghĩa là nếu hộp văn bản đã được sửa đổi, thì giá trị thuộc tính “$dirty” sẽ là true. Ngoài ra, trong trường hợp giá trị hộp văn bản là null, thì thuộc tính “$invalid” sẽ trở thành true. Vì vậy, nếu cả hai thuộc tính đều là true, thì xác thực sẽ không thành công đối với điều khiển. Do đó, nếu cả hai giá trị đều là true, thì ng-show cũng sẽ trở thành true và điều khiển span với các ký tự màu đỏ sẽ được hiển thị.
- Trong trường hợp này, chúng ta đang kiểm tra thuộc tính “$error” cũng được đánh giá là true vì chúng ta đã đề cập đến điều khiển rằng giá trị phải được nhập cho điều khiển. Trong trường hợp như vậy, khi không có dữ liệu nào được nhập vào hộp văn bản, điều khiển span sẽ hiển thị văn bản “Username is required”.
- Nếu giá trị điều khiển hộp văn bản không hợp lệ, chúng tôi cũng muốn vô hiệu hóa nút gửi để người dùng không thể gửi biểu mẫu. Chúng tôi đang sử dụng thuộc tính “ng-disabled” cho điều khiển để thực hiện việc này dựa trên giá trị có điều kiện của thuộc tính “$dirty” và “$invalid” của điều khiển.
- Trong bộ điều khiển, chúng ta chỉ thiết lập giá trị ban đầu của giá trị hộp văn bản thành văn bản 'AngularJS'. Điều này chỉ được thực hiện để thiết lập một số giá trị mặc định cho hộp văn bản khi biểu mẫu được hiển thị lần đầu tiên. Nó thể hiện rõ hơn cách xác thực xảy ra đối với trường hộp văn bản.
Nếu mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.
Đầu ra
Khi biểu mẫu được hiển thị ban đầu, hộp văn bản hiển thị giá trị của “AngularJS” và “nút gửi” được bật. Ngay khi bạn xóa văn bản khỏi điều khiển, thông báo lỗi xác thực được bật và nút Gửi bị vô hiệu hóa.
Ảnh chụp màn hình ở trên hiển thị hai điều
- Nút gửi bị vô hiệu hóa
- Không có tên chủ đề trong hộp văn bản Chủ đề. Do đó, nó sẽ kích hoạt thông báo lỗi “Tên người dùng là bắt buộc”.
Xác thực mẫu bằng cách sử dụng Xác thực tự động AngularJS
Có một cơ sở trong AngularJS để tự động xác thực tất cả các điều khiển trên biểu mẫu mà không cần phải viết mã tùy chỉnh để xác thực. Điều này có thể được thực hiện bằng cách bao gồm một mô-đun tùy chỉnh có tên “jcs-AutoValidate”.
Với mô-đun này, bạn không cần đặt bất kỳ mã đặc biệt nào để thực hiện xác thực hoặc hiển thị thông báo lỗi. Tất cả điều này được xử lý bằng mã bên trong JCS-AutoValidate.
Hãy xem một ví dụ đơn giản về cách đạt được điều này.
Trong ví dụ này,
Chúng ta sẽ chỉ có một biểu mẫu đơn giản với một điều khiển hộp văn bản là trường bắt buộc. Một thông báo lỗi sẽ được hiển thị nếu điều khiển này không được điền vào.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<body>
<h1> Guru99 Event</h1>
<div ng-app="DemoApp">
<div class="form-group">
<form name="myForm" novalidate>
<p>Topic Name:<br></p>
<div class="form-group">
<input class="form-control" type="text" id="user" ng-model="user" required="required"/>
</div>
<div>
<div class="form-group">
<input type="submit">
</div>
</div>
</form>
</div>
</div>
<script>
var app=angular.module('DemoApp',['jcs-autoValidate']);
</script>
</body>
</html>
Giải thích mã
- Trước tiên, chúng ta cần bao gồm tập lệnh “jcs-auto-validate.js” có tất cả chức năng xác thực tự động.
- Chúng ta cần đảm bảo rằng mỗi phần tử bao gồm “thẻ div” được đặt trong lớp “nhóm biểu mẫu”.
- Cũng cần đảm bảo rằng mỗi phần tử (là một phần tử HTML như điều khiển đầu vào, điều khiển nhịp, điều khiển div, v.v.) chẳng hạn như điều khiển đầu vào cũng được đặt trong lớp nhóm biểu mẫu.
- Bao gồm jcs-autovalidate trong mô-đun AngularJS JS của bạn.
Nếu mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.
Đầu ra
Theo mặc định khi bạn chạy mã, biểu mẫu trên sẽ được hiển thị theo mã HTML.
Nếu bạn cố gắng Gửi biểu mẫu, thông báo lỗi sẽ bật lên với nội dung "Trường này là bắt buộc". Tất cả điều này được thực hiện bằng tùy chọn JCS-AutoValidate.
Phản hồi của người dùng với các nút Ladda
Các nút “ladda” là một khung đặc biệt được xây dựng cho các nút phía trên JavaScript để tạo hiệu ứng trực quan cho các nút khi chúng được nhấn.
Vì vậy, nếu một nút được gán thuộc tính “ladda” và được nhấn, hiệu ứng quay sẽ được hiển thị. Ngoài ra, nút này còn có các kiểu dữ liệu khác nhau để cung cấp thêm hiệu ứng hình ảnh.
Hãy xem một ví dụ về cách xem các nút “ladda” đang hoạt động. Chúng ta sẽ thấy một biểu mẫu đơn giản có nút gửi. Khi nhấn nút, hiệu ứng xoay sẽ hiển thị trên nút.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<script src="lib/angular-ladda.js"></script>
<script src="lib/angular-ladda.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<body>
<h1> Guru99 Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
<div class="form-group">
<form name="myForm" novalidate ng-submit="submit()">
<div>
<button class="btn btn-primary" type="submit" ladda="submitting" name="sbutton" data-style="expand-right">Submit</button>
</div>
</form>
</div>
</div>
<script>
var app=angular.module('DemoApp',['jcs-autoValidate','angular-ladda']);
app.controller('DemoController',function($scope) {
$scope.submitting = false;
$scope.submit = function () {
$scope.submitting = true;
}
});
</script>
</body>
</html>
Giải thích mã
- Chúng tôi đang sử dụng “ng-gửi” chỉ thị để gọi một hàm có tên là “gửi”. Chức năng này sẽ được sử dụng để thay đổi thuộc tính ladda của nút gửi.
- Thuộc tính ladda là một thuộc tính đặc biệt của khung ladda. Thuộc tính này bổ sung thêm hiệu ứng quay để điều khiển. Chúng tôi đang đặt giá trị của thuộc tính ladda cho biến gửi.
- Thuộc tính kiểu dữ liệu lại là một thuộc tính bổ sung được cung cấp bởi khung ladda, nó chỉ thêm hiệu ứng hình ảnh khác vào nút gửi.
- Mô-đun 'AngularJS-ladda' cần được thêm vào ứng dụng AngularJS.JS để khung ladda hoạt động.
- Ban đầu, chúng tôi xác định và đặt giá trị của biến có tên 'gửi' thành sai. Giá trị này được đặt cho thuộc tính ladda của nút gửi. Bằng cách ban đầu đặt giá trị này thành sai, chúng tôi đang nói rằng chúng tôi chưa muốn nút gửi có hiệu ứng ladda.
- Chúng tôi đang khai báo một hàm được gọi khi nhấn nút gửi. Trong chức năng này, chúng tôi đang đặt 'gửi' thành đúng. Điều này sẽ khiến hiệu ứng ladda được áp dụng cho nút gửi.
Nếu mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.
Đầu ra
Khi biểu mẫu được hiển thị lần đầu, nút gửi sẽ được hiển thị ở dạng đơn giản.
Khi nhấn nút gửi, biến gửi trong bộ điều khiển được đặt thành true. Giá trị này được chuyển đến thuộc tính “ladda” của nút gửi, gây ra hiệu ứng quay của nút.
Tổng kết
- Có thể xác thực các điều khiển HTML của hộp văn bản bằng cách sử dụng thuộc tính 'required'.
- Trong HTML5, có những điều khiển mới được thêm vào như mật khẩu, email và số điện thoại, cung cấp bộ xác thực riêng.
- Việc xác thực biểu mẫu trong AngularJS được xử lý bằng cách xem xét các giá trị $dirty, $valid, $invalid và $pristine của điều khiển biểu mẫu.
- Xác thực tự động trong các ứng dụng AngularJS cũng có thể đạt được bằng cách sử dụng mô-đun xác thực tự động JCS.
- Các nút Ladda có thể được thêm vào ứng dụng Angular.js để mang lại một chút cảm giác trực quan nâng cao cho người dùng khi nhấn nút.
