Tạo Form đăng Ký Bằng Javascript - Quách Quỳnh

Trang chủ » Form Liên Hệ Bằng Javascript » Tạo Form đăng Ký Bằng Javascript - Quách Quỳnh

Có thể bạn quan tâm

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!

Từ khóa » Form Liên Hệ Bằng Javascript