Trong các Form đăng ký, đăng nhập thành viên ở input sẽ phải thực hiện công việc kiểm tra đầu vào. Với mục đích xem người dùng có nhập đúng thông tin yêu cầu hay không.
Validate form bằng JavaScript sẽ yêu cầu nhập vào các thông tin chính xác. Giả sử không kiểm tra họ sẽ nhập abc, xyz… hay như số điện thoại thì 123 không đúng định dạng.
Bài viết dưới đây daibang.xyz sẽ hướng dẫn bạn cách tạo form đăng ký bằng Javascript chỉ với vài đoạn mã đơn giản.
Bước 1: Viết mã HTML
<!DOCTYPE html> <html> <body> <form action="" method="post"> <input type="text" name="username" id="username" placeholder="Tên đăng ký"/><br/> <input type="password" name="password" id="password" placeholder="Mật khẩu"/><br/> <input type="submit" name="btnsubmit" id="btnsubmit" value="Đăng ký"/> </form> </body> </html>
Bước 2: Thêm đoạn mã JavaScript trước thẻ </body>
<script>
function validate() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if(username== "") {
alert("Vui lòng nhập tên!");
return false;
}
if(password == "") {
alert("Vui lòng nhập mật khẩu!");
return false;
}
}
</script>
Giải thích:
Đoạn mã ở trên bạn sẽ tạo ra một hàm (function) là validate(). Dùng document.getElementById để DOM lấy giá trị đầu vào từ input.
Tiếp theo dùng if để kiểm tra input có trống hay không. Nếu trông thì xuất hiện cảnh báo alert.
Kết luận: Với đoạn code ví dụ đơn giản ở trên bạn đã biết cách tạo form đăng ký bằng JavaScript. Nếu muốn thêm nhiều trường hơn bạn hãy nhân bản HTML và JavaScript.
