Bài tập thực hành JavaScript check Username, Password
Mục lục:
1. Đề bài
2. Hướng dẫn phân tích đề bài
3. SourceCode minh họa
4. Giải thích code
5. Kết luận
1. Đề bài:
Sử dụng Jquery, JavaScript, Html5, Css thích hợp thiết kế giao diện sau:
Khi người dùng nhập dữ liệu vào trường “Tên đăng nhập” và “mật khẩu” thì 2 tiêu đề này sẽ tự động đẩy dòng tên đăng nhập và mật khẩu lên trên và dữ liệu nằm bên dưới:
Tạo 2 mảng để lưu trữ danh sách tendangnhap và matkhau tương ứng theo chỉ mục:
VD: tendangnhap = {“itforstudent”,”itstudent”,”gtmn”};
Matkhau ={“12345”,”123”,”1234”};
Sử dụng sự kiện blur của JavaSript-Jquery để bắt sự kiện khi người dùng nhập dữ liệu xong sau đó rời khỏi trường tên đăng nhập sẽ lập tức check xem tên đăng nhập có tồn tại trong mảng định nghĩa hay không?
Nếu đúng hoặc sai đều thông báo cho người dùng biết.
Làm tương tự cho mật khẩu nếu mật khẩu không khớp sẽ báo lỗi như sau:
Nếu cả tên đăng nhập và mật khẩu đều thỏa khớp với vị trí của mảng ban đầu ta định nghĩa thì sẽ thông báo đăng nhập thành công.
Các file hình ảnh và thư viện sẽ được gửi kèm trong thư mục chứa file word đề bài này.
2. Hướng dẫn phân tích đề bài:
Đầu tiên để làm được bài này, các bạn cần nắm rõ một số kiến thức cơ bản về giao diện như HTML và CSS cơ bản, bài này chủ yếu tập trung vào phần xử lý mảng, vòng lặp, if, else …
Các bước thực hiện:
Bước 1: Đầu tiên các bạn truy cập vào link này để tải các thư viện được đính kèm tại đây
Bước 2: Tạo 1 file html đặt tên TH06-GTNM.html sau đó thêm các thư viện vào như mô tả bên dưới. Các bạn chú ý giùm file file style.css nằm trong thư mục css trong driver ở link trên vì file này sẽ thiết kế giúp cho việc tự động đẩy tiêu đề tên đăng nhập và mật khẩu lên trên khi có dữ liệu nhập vào.
Đây là phần đầu trang (chèn các thư viện html, css, bootstrap vào cho phù hợp)
<!doctype html>
<html lang=”en”>
<head>
<!– Required meta tags –>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<link href=”https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap” rel=”stylesheet”>
<link rel=”stylesheet” href=”fonts/icomoon/style.css”>
<link rel=”stylesheet” href=”css/owl.carousel.min.css”>
<!– Bootstrap CSS –>
<link rel=”stylesheet” href=”css/bootstrap.min.css”>
<!– Style –>
<link rel=”stylesheet” href=”css/style.css”>
<title>GTNM-TH06-LOGIN</title>
</head>
<!– Phần cuối trang, trước thẻ đóng </body>
Ta tiếp tục chèn thêm các thư viện của Java-Script, Jquery… –>
<script src = “js/jquery-3.3.1.min.js”></script>
<script src = “js/popper.min.js”></script>
<script src = “js/bootstrap.min.js”></script>
<script src = “js/main.js”></script>
</body>
Bước 3: Ta bắt đầu thiết kế giao diện gồm hình ảnh trong thư mục images, dùng form group để thiết kế 2 trường quan trọng đó chính là tendangnhap và matkhau.
Bước 4: Khai báo id tương ứng cho các trường trên, lưu ý: Id để lát nữa chúng ta sẽ tương tác nó trong phần JavaScript-Jquery tương ứng
Bước 5: (quan trọng) thực hiện code JavaScript để tạo mảng lưu trữ danh sách tendangnhap và matkhau sau đó sử dụng sự kiện blur để xử lý khi người dùng nhập xong và rời khỏi ô nhập liệu.
3. SourceCode minh họa:
File TH06-GTNM.html
<!doctype html>
<html lang=”en”>
<head>
<!– Required meta tags –>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=”no”>
<link href=”https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap” rel=”stylesheet”>
<link rel=”stylesheet” href=”fonts/icomoon/style.css”>
<link rel=”stylesheet” href=”css/owl.carousel.min.css”>
<!– Bootstrap CSS –>
<link rel=”stylesheet” href=”css/bootstrap.min.css”>
<!– Style –>
<link rel=”stylesheet” href=”css/style.css”>
<title>GTNM-TH06-LOGIN</title>
</head>
<!– Phần cuối trang, trước thẻ đóng </body>
Ta tiếp tục chèn thêm các thư viện của Java-Script, Jquery… –>
<script src = “js/jquery-3.3.1.min.js”></script>
<script src = “js/popper.min.js”></script>
<script src = “js/bootstrap.min.js”></script>
<script src = “js/main.js”></script>
</body>
File main.js
$(function() {
‘use strict’;
$(‘.form-control’).on(‘input’, function() {
var $field = $(this).closest(‘.form-group’);
if (this.value) {
$field.addClass(‘field–not-empty’);
} else {
$field.removeClass(‘field–not-empty’);
}
});
});
$(document).ready(function(){
var checkU = false;
var index = -1;
$(‘#tendangnhap’).blur(function(){
var tendangnhap = $(‘#tendangnhap’).val();
var listTenDangNhap = new Array(“itstudent”,”itforstudent”,”gtnm”);
//alert(listTenDangNhap[0]);
//var listMatKhau = new Array(“123″,”12345″,”1234”);
for(var i = 0; i < listTenDangNhap.length; i++) {
if(tendangnhap==listTenDangNhap[i]){
checkU = true;
index = i;
break;
}else{
checkU=false;
}
}
if(checkU==true){
alert(“username hợp lệ”);
}else{
alert(“username không tồn tại”);
}
if(index!=-1){
$(‘#matkhau’).blur(function(){
var checkM = false;
var matkhau = $(‘#matkhau’).val();
//var listTenDangNhap = new Array(“itstudent”,”itforstudent”,”gtnm”);
//alert(listTenDangNhap[0]);
var listMatKhau = new Array(“123″,”12345″,”1234”);
if(matkhau==listMatKhau[index]){
alert(“đăng nhập thành công”);
}else{
alert(“sai mật khẩu”);
}
});
}else{
alert(“vui lòng kiểm tra lại tên đăng nhập”);
}
});
});
4. Giải thích code:
Đầu tiên các bạn quan sát file TH06-GTNM.html các bạn chú ý giùm mình đoạn này:
id= “tendangnhap” onblur = “kiemTraTenDN()“;
id= “matkhau” onblur = “kiemTraMK()”);
đoạn này sẽ có id và tên sự kiện onblur
Tiếp theo các bạn quan sát trong file main.js
Sẽ có các đoạn code tương ứng để xử lý cho sự kiện này:
$(‘#tendangnhap‘).blur(function(){}
$(‘#matkhau‘).blur(function(){}
5. Kết luận:
Qua bài học này mình đã liên kết nhiều phần kiến thức từ các bài học trước đó gồm có HTML5, CSS, JS, JQuery,… để hướng dẫn cho các bạn 1 bài tập tổng hợp nhiều phần, mong là sẽ hữu ích cho các bạn trong việc bắt lỗi form cũng như các xử lý front-end. Chúc các bạn thành công!.
