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

Hôm nay tôi sẽ hướng dẫn các bạn cách tạo form đăng ký bằng JavaScript để bắt lỗi form (validate form javascript).

Khi bạn tạo một trang web, có một số lỗi thường xảy ra khi người dùng nhập thông tin. Vì vậy, kiểm tra thông tin trong Form trở thành một bước quan trọng để đảm bảo người dùng nhập đầy đủ thông tin và tránh các lỗi không mong muốn. Trong bài viết này, tôi sẽ giới thiệu cho bạn cách sử dụng JavaScript để kiểm tra thông tin trong Form đăng ký và bắt lỗi nếu cần thiết.

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

Đầu tiên, chúng ta sẽ sử dụng JavaScript để kiểm tra thông tin trong Form, nếu thông tin chưa đầy đủ thì không thực hiện đăng ký. Bạn có thể dễ dàng hiểu đoạn code JavaScript đăng ký thành viên để kiểm tra input.

Vì JavaScript là ngôn ngữ lập trình Front-end, vì vậy 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à sử dụng JavaScript để kiểm tra.

Để bắt đầu, bạn cần tạo một Form đăng ký thành viên đơn giản bằng HTML. Sau đó, bạn sẽ sử dụng CSS để trang trí Form và JavaScript để kiểm tra thông tin.

Để cho dễ hiểu, trong bài viết này tôi sẽ hướng dẫn bạn cách tạo Form đăng ký bằng JavaScript. Bạn sẽ phải tạo cho mình 3 file lần lượt là dangky.html, style.css và kiemtra.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 & 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.

Nếu mật khẩu trống thì JavaScript sẽ dùng Alert để cảnh báo.

Nếu xác minh mật khẩu không khớp với mật khẩu đã nhập 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.

Chúc các bạn thành công!

Related Posts

Next.js – Khám phá Framework JavaScript tuyệt vời cho phát triển ứng dụng web

Giới thiệu về Next.js Next.js là một framework JavaScript mã nguồn mở và phổ biến được sử dụng để xây dựng các ứng dụng web hiệu suất…

Hướng dẫn cách tắt comment trong wordpress

Trong quá trình xây dựng và quản lý một trang web WordPress, việc tắt chức năng comment có thể là một yêu cầu phổ biến. Điều này…

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

Ghi đè trong java, cách thực hiện chi tiết

Trong lập trình hướng đối tượng, ghi đè là một kỹ thuật cho phép các đối tượng con ghi đè lại phương thức của đối tượng cha…

7 Cách chọn sản phẩm kinh doanh online thành công

7 Cách chọn sản phẩm kinh doanh online thành công

Kinh doanh online bên cạnh những ưu thế thì rủi ro cũng không hề nhỏ, việc bạn tính toán thật kỹ lưỡng trước khi quyết định bán…

Chỉnh sửa Header trong WordPress

Header là khu vực hiển thị phần đầu tiên của trang web. Tại đây nó sẽ hiển Logo, banner, Menu hoặc các mạng xã hội được tích…

Hover-CSS-1

Hiệu ứng rê chuột trong CSS

CSS là ngôn ngữ trang trí với nhiều hiệu ứng hay. Bạn sẽ thường gặp nhất là khi di chuyển chuột vào một liên kết (Link) hay…