AngularJS khá mạnh mẽ trong việc validate form đăng ký

AngularJS khá mạnh mẽ trong việc validate form nhưng nó lại thiếu mất phần so sánh giá trị của 2 trường input (validation compare). Khi tạo form đăng ký hoặc form thay đổi mật khẩu, chúng ta thường cần phải yêu cầu người dùng nhập mật khẩu 2 lần để xác nhận. Vì vậy, việc so sánh giá trị của 2 trường mật khẩu và mật khẩu xác nhận là rất cần thiết.

>> Xử lý giá trị Form – AngularJS Form Validation, AngularJS năm 2009

>> Tài liệu học AngularJS, AngularJS được bắt đầu từ năm 2009

>> Giới Thiệu Về AngularJS, AngularJS được bắt đầu từ năm 2009

Hôm nay mình xin hướng dẫn các bạn cách để tạo 1 Directive đơn giản giúp kiểm tra giá trị của 2 trường input với ví dụ là kiểm tra giá trị của mật khẩu và xác nhận mật khẩu.

Đầu tiên các bạn hãy xem qua Demo này để biết chúng ta sẽ làm gì và kết quả nó sẽ như thế nào.

Trong demo này chúng ta cần chuẩn bị 2 thư viện là AngularJS 1.2.26 và Jquery 1.11.0.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js">

</script>

HTML

<div class="main" ng-app="demoApp">

<h2> Change Password</h2>

<form name="form" novalidate>

<div class="form-group">

<label for="password">Password</label>

<input type="password" name="password" id="password"

 ng-model="password"/>

</div>

<div class="form-group">

<label for="repassword">RePassword</label>

<input type="password" name="repassword" id="repassword"

 ng-model="repassword"/>

</div>

<div class="form-group">

<label>&nbsp;</label>

<button type="submit" name="submit" ng-disabled="!form.$dirty ||

 (form.$dirty && form.$invalid)">Change</button>

<button type="reset" name="reset">Reset</button>

</div>

</form>

</div>

Khởi tạo giao diện trang thay đổi mật khẩu đơn giản. Các bạn lưu ý các thuộc tính ng-app=”demoApp”, novalidate, ng-model, ng-disabled… Những thuộc tính này mình đã giải thích ở bài viết trước, vậy nên trong bài này mình sẽ không giải thích lại nữa mà ngầm định là các bạn đã hiểu.

CSS

.main{width:600px; margin:40px auto;}

.form-group{margin-top:10px; margin-bottom:10px;}

h2{text-align:center;}

label{width:100px; float:left;

text-align:right; margin-right:15px;}

input{width: 160px;}

Thêm ít css cho nó gọn gàng 

OK, vậy là đã xong phần giao diện. Giờ chúng ta sẽ tạo thêm 1 file app.js và nhúng vào giao diện, lưu ý phải đặt dưới script nhúng AngularJS và JQuery.

app.js

angular.module('demoApp',[]);

//So sánh mật khẩu trùng khớp

.directive('passwordMatch', [function () {

return {

 restrict: 'A',

 scope:true,

 require: 'ngModel',

 link: function (scope, elem , attrs,control) {

 var checker = function () {


   //lấy giá trị của trường mật khẩu

   var e1 = scope.$eval(attrs.ngModel);


   //lấy giá trị của xác nhận mật khẩu

   var e2 = scope.$eval(attrs.passwordMatch);

   return e1 == e2;

 };

 scope.$watch(checker, function (n) {


   //thiết lập form control

   control.$setValidity("unique", n);

   });

 }

 };

}]);

Giờ chúng ta sẽ thêm directive password-match vào thẻ input của RePassword với giá trị truyền vào là tên model của trường cần so sánh, ở đây là input password. và hiển thị thêm cái thông báo khi 2 trường không trùng khớp.

Nhận Diệt côn trùng: Chuột, gián, kiến muỗi, mối.. cho Trường học, Nhà máy, xí nghiệp, Cơ quan, văn phòng, Khách sạn, resort, nhà nghỉ, Nhà hàng, câu lạc bộ, Chung cư, cao ốc, văn phòng cho thuê, Siêu thị, cửa hàng, kho bãi, Xưởng hạt điều, xưởng may, xưởng gỗ, Trang trại, nhà vườn,...Tại Các Quận Trong Thành Phố Hồ Chí Minh và các tỉnh trong toàn quốc. Hotline: 0986 018 930 (Anh Sơn)