AngularJS – So sánh 2 trường input (validation compare)
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.
Bài tham khảo: Xử lý giá trị Form – AngularJS form validation
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.
[html]
<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]
HTML
[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> </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>
[/html]
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
[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;}
[/css]
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
[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);
});
}
};
}]);
[/js]
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.
[html]
<pre><input type="password" name="repassword" id="repassword"
ng-model="repassword" password-match="password"/>
<span style="color:red" ng-show="form.repassword.$dirty &&
form.repassword.$error.unique">RePassword is not matched.
</span>
[/html]
Kết quả:
Kết quả khi 2 trường mật khẩu không trùng khớp
Chúc các bạn thành công.
- Địa chỉ: Hồ Chí Minh
- Facebook: Sang Nguyen