Demo check đăng nhập bằng java script html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <form id="frm_login" action="" method="GET">
        Username: <input type="text" id="username" /> <br>
        Password: <input type="password" id="pass"   /> <br>
        <button type="button" onclick="check()" >Login</button>
    </form>
    <script>
        function check(){
            var form = document.querySelector("#frm_login");
            console.dir(form)
            //1. In ra các thuộc tính của thẻ frm_login
                // sử dụng thuộc tính attributes
                console.log(form.attributes)

            //2. Thông qua thẻ frm_login hãy kiểm tra giá trị của username, pass 
            // nếu đúng là admin và pass là 123 thì thông báo OK
        
            //Bước 1: In ra childnodes của phần tử frm_login
            console.log(form.childNodes) 
            //Bước 2: Lấy thông tin của thẻ username.
            var list_child = form.childNodes;
            console.log( list_child[1])
            
            // var _u = list_child[1].value;
            // var _p = list_child[5].value;
            // Tình huống: nếu dùng theo cách thứ tự phần tử mảng như ở trên thì khi xóa 
            // một thẻ br ở trong form hoặc thêm thẻ vào sẽ bị sai thứ tự chỉ số phần tử mảng
            // ==> cần cải tiến như sau:
            var _u = list_child.getElementById("username").value;
            var _p = list_child.getElementById("pass").value;

            if(_u == 'admin' && _p =='123')
                alert("OK");
            else
                alert("sai thông tin");
             
        }
    </script>
    

</body>
</html>
Demo check đăng nhập bằng java script html Run
