Tạo Form đăng ký bằng Javascript

Xin chào mọi người tiếp tục Series hướng dẫn tạo trang web bằng HTML và CSS. Hôm nay mình sẽ hướng dẫn bạn cách tạo form đăng ký bằng JavaScript để  bắt lỗi form (validate form javascript).

Giúp kiểm tra Form hợp lệ xem người dùng đã điền đầy đủ thông tin chưa, nếu chưa thì không thực hiện. Với đoạn code JavaScript đăng ký thành viên sẽ kiểm tra Input bằng JavaScript khá đơn giản dễ hiểu mời bạn cùng theo dõi.

JavaScript là ngôn ngữ lập trình Frond end chính vì thế bạn cần phải nghiên cứu nhiều về nó. Dưới đây là từng bước xây dựng Form và dùng lệnh Js để kiểm tra.

Hướng dẫn tạo Form đăng ký bằng Javascript

Để cho dễ hiểu bạn sẽ phải tạo cho mình 3 file lần lượt là dangky.html, style.csskiemtra.js. Ba tập tin này bạn sẽ đặt trong cùng một thư mục.

Bước 1: Tạo Form đăng ký thành viên dangky.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<!-- Nhúng file CSS -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Nhúng file JavaScript -->
<script language="javascript" src="kiemtra.js"></script>
<form action="" method="POST" onsubmit="return validate()">
<div class="register">
<h1>Đăng ký</h1>
<p>Vui lòng điền thông tin để đăng ký</p>
<hr>
<label for="username"><b>Tên đăng nhập</b></label>
<input type="text" placeholder="Họ và tên" name="username" id="username">
<label for="password"><b>Mật khẩu</b></label>
<input type="password" placeholder="******" name="password" id="password">
<label for="password-repeat"><b>Nhập lại mật khẩu</b></label>
<input type="password" placeholder="******" name="password-repeat" id="password-repeat">
<hr>
<p>Để tạo tài khoản vui lòng đồng ý với điều khoản của chúng tôi <a href="#">Terms &amp; Privacy</a>.</p>
<button type="submit" class="submit">Đăng ký</button>
</div>
<div class="register login">
<p>Bạn đã có tài khoản rồi? <a href="#">Đăng nhập</a>.</p>
</div>
</form>
</body>
</html>

Bước 2: Tạo file style.css để trang trí Form trông bắt mắt hơn

body {
font-family: Arial, sans-serif;
background-color: #cecece;
}
a {
color: #00bd00;
}
* {
box-sizing: border-box;
}
.register {
width: 500px;
padding: 16px;
margin: 0 auto;
background-color: white;
}
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
.submit {
background-color: #0900bd;
color: white;
padding: 15px 18px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.submit:hover {
opacity: 1;
}
.login {
background-color: #ffffff;
text-align: center;
}

Bước 3: Tạo file kiemtra.js để bắt lỗi form và kiểm tra các giá trị người dùng đã nhập vào chưa

function validate() {
var u = document.getElementById("username").value;
var p1 = document.getElementById("password").value;
var p2 = document.getElementById("password-repeat").value;
 
if(u== "") {
alert("Vui lòng nhập tên!");
return false;
}
if(p1 == "") {
alert("Vui lòng nhập mật khẩu!");
return false;
}
if(p2 == "") {
alert("Vui lòng xác minh mật khẩu!");
return false;
}
 
alert("Xin hãy điền đúng thông tin!")
 
return true;
}

Giải thích:

Thuật toán sẽ thực hiện từng bước như sau:

Nếu tài khoản Username trong Form đăng ký trống thì JavaScript dùng Alert để cảnh báo.

Kết luận: Bài viết này đã hướng dẫn bạn cách tạo Form đăng ký bằng JavaScript cực kỳ đơn giản phải không nào. Ngay sau khi đọc xong bạn có thể bắt tay vào thực hành để kiểm tra kết quả như thế nào và đừng quên đọc thêm JavaScript là gì để hiểu rõ hơn cách thức hoạt động của ngôn ngữ lập trình web được nhiều người ưa chuộng này!

Bạn cũng có thể kết hợp Form JavaScript cùng với PHP. Đọc bài Cách tạo Form đăng ký bằng PHP và MySQL để được hướng dẫn chi tiết.

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments