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

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.

CÓ THỂ BẠN ĐANG TÌM