SHARE - KIỂM TRA DỮ LIỆU NHẬP VÀO VÀ HIỂN THỊ THÔNG TIN ĐÃ NHẬP BẰNG JAVASCRIPT

xuất bản
Thông báo:
Bạn muốn website của mình xuất hiện tại thanh bên phải tại QuangNinhBay.Com đặt liên kết tại bài viết dưới đây.
Đề bài:
Kiểm tra dữ liệu nhập vào from với các yêu cầu sau:
- Họ và tên không được để trống.
- Họ và tên không được nhập ít hơn 8 ký tự.
- Vị trí làm việc không được để trống.
- Vị trí làm việc không được nhập nhiều hơn 100 ký tự.
- Lương không được là số âm.
- Phải chọn giới tính.
- Sau khi ấn lưu nếu thoả mãn tất cả các điều kiện trên thì hiển thị thông tin vừa nhập xuống dưới như hình trên.
Code HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Quangninhbay.com niềm vui là chia sẻ !</title> <link rel="stylesheet" href="/quangninhbay/style.css"> <script src="/quangninhbay/bai1.js"></script> </head> <body> <div class="container"> <h2>Thông tin nhân viên</h2> <span>Họ và tên: <input type="text" id="hoten" style="margin-left: 30px;"></span> <span>Vị trí làm việc: <input type="text" id="vtlv"></span> <span>Mức lương: <input type="number" min="0" id="luong" style="margin-left: 20px;"></span> <span>Giới tính: <span style="margin-left: 35px;">Nam: </span><input type="radio" name="gioitinh" id="gioitinhnam" value="Nam"> <span>Nữ: </span><input type="radio" name="gioitinh" id="gioitinhnu" value="Nữ"> </span> <div class="luu"> <button onclick="luu()">Lưu</button> </div> <div class="show"> <p>Họ và tên: <span id="hotenx"></span></p> <p>Vị trí làm việc: <span id="vtlvx"></span></p> <p>Mức lương: <span id="luongx"></span></p> <p>Giới tính: <span id="gioitinhx"></span></p> </div> </div> </body> </html>
CSS
.container{ padding: 40px; width: 20%; margin: auto; border: solid 1px black; } .container h2{ width: 75%; margin: auto; margin-bottom: 30px; } .container span{ display: block; margin-top: 10px; } .container span span{ display: inline; } .container .show span{ display: inline; } button{ border-radius: 1rem; cursor: pointer; margin-top: 20px; width: 100px; height: 40px; background-color: #28800e; } button:hover{ color: #fff; width: 100px; height: 40px; background-color: #54be34; } .luu{ width: 40%; margin: auto; } .show{ display: none; }
JavaScript
function luu() { var hoten = document.getElementById('hoten'); var vtlv = document.getElementById('vtlv'); var luong = document.getElementById('luong'); var gioitinhnam = document.getElementById('gioitinhnam'); var gioitinhnu = document.getElementById('gioitinhnu'); var show = document.getElementsByClassName('show'); var hotenx = document.getElementById('hotenx'); var vtlvx = document.getElementById('vtlvx'); var luongx = document.getElementById('luongx'); var gioitinhx = document.getElementById('gioitinhx'); if (hoten.value.trim() == '') { alert('Họ và tên không được để trống !'); } else if (hoten.value.trim().length < 8) { alert('Họ và tên không nhập ít hơn 8 ký tự'); } else if (vtlv.value == '') { alert('Vị trí làm việc không được để trống'); } else if (vtlv.value.length > 100) { alert('Vị trí làm việc không được nhập quá 100 ký tự'); } else if (luong.value < 0) { alert('lương không để số âm'); } else if (gioitinhnam.checked == false && gioitinhnu.checked == false) { alert('Vui lòng chọn giới tính'); } else { document.getElementsByClassName('container')[0].style.backgroundColor = 'hsl(104, 52%, 92%)'; show[0].style.display = 'block'; hotenx.innerHTML = hoten.value; vtlvx.innerHTML = vtlv.value; luongx.innerHTML = luong.value; if (gioitinhnu.checked == false) { gioitinhx.innerHTML = gioitinhnam.value; } else { gioitinhx.innerHTML = gioitinhnu.value; } } }
Chúc các bạn thành công, có gì không hiểu bạn có thể bình luận phía dưới bài viết.
Chúc mừng, bạn là người đầu tiên!