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:

Cảm ơn bạn đã theo dõi QuangNinhBay.Com trong suốt thời gian qua.
Trong thời gian tới website sẽ update để bạn có trải nghiệm mượt mà hơn. Nội dung về thiết kế website cũng như các thủ thuật sẽ được đội ngũ QuangNinhBay.Com Update thường xuyên hơn.
Xin cảm ơn!

Đề 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.