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

tác giả Trần Tiến

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.