[JS] input / input

Stack/JavaScript

[JS] input / input_if 예제

7ingout 2022. 4. 27. 12:34

14ininput.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>
    <input type="text" id="userId" name="userId">
    <button onclick="inputView()">확인</button>
    <script>
        let input = document.querySelector('#userId');
        function inputView() {
            console.log(input.value);
        }
    </script>
</body>
</html>

15if_ex01.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>
    <p>안녕하세요</p>
    <p>아이디 <input type="text" id="userId"></p>
    <p>패스워드 <input type="password" id="userPw"></p>
    <p><button onclick=idpwCheck()>확인</button></p>
    <script>
        let userid= 'bella';
        let userpw = '1234';
        function idpwCheck() {
            let inputid = document.querySelector('#userId').value;
            let inputpw =  document.querySelector('#userPw').value
            if(userid ===  inputid){
                if(userpw ===inputpw) {
                    alert('로그인 되었습니다.');
                } else {
                    alert('패스워드가 틀렸습니다.');
                }
            } else {
                alert('아이디가 틀렸습니다.');
            }            
        }
    </script>
</body>
</html>

15if_ex01_me.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>
    <div>안녕하세요</div>
    <div>
        아이디
        <input type="text" id="userId">
    </div>
    <div>
        패스워드
        <input type="password" id="userPass">
    </div>
    <button onclick="inputView()">확인</button>
    <script>
        let IdId = 'bella';
        let PW = '1234';

        function inputView() {
            let userId = document.querySelector('#userId').value;
            let userPass = document.querySelector('#userPass').value;
            if(IdId === userId && PW === userPass) {
                alert("로그인되었습니다.");
            }
        }
    </script>
</body>
</html>

15if_ex02.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>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        li { list-style: none; }
        div {
            width: 70%;
            margin: 100px auto;
        }
        h2 {
            background: pink;
            color: #fff;
            text-align: center;
            padding: 30px;
        }
        li {
            line-height: 40px;
            border-bottom: 1px solid #ccc;
            padding-left: 30px;
        }
        li span {
            display: inline-block;
            width: 30%;
        }
        li input {
            border: none;
            width: 300px;
            height: 30px;
            background: pink;
            outline: none;
            color: #fff;
        }
        li button {
            background: pink;
            color: #fff;
            border-radius: 6px;
            border: none;
            outline: none;
            padding: 6px 20px;
        }
    </style>
</head>
<body>
    <div>
        <h2>회원가입</h2>
        <ul>
            <li><span>아이디</span><input type="text" id="userId"></li>
            <li><span>비밀번호</span><input type="password" id="userPw"></li>
            <li><span>비밀번호 확인</span><input type="password" id="userPwch"></li>
            <li><span>전화번호</span><input type="text" id="userPhone"></li>
            <li><span>이메일</span><input type="text" id="userEmail"></li>
            <li><button onclick="joinProcess()">회원가입</button></li>
        </ul>
    </div>
    <script>
    function joinProcess(){
        let userId = document.querySelector('#userId').value;
        let userPw = document.querySelector('#userPw').value;
        let userPwch = document.querySelector('#userPwch').value;
        // 아이디를 입력했는지 체크
        if(!userId) {
            alert('아이디를 입력하세요');
        } 
        // 비밀번호가 8자인지 체크
        if(userPw.length < 8) {
            alert('비밀번호는 8자리 이상 입력하셔야 합니다.')
        }
        // 비밀번호와 비밀번호 체크가 일치하는지 체크
        if(userPw !== userPwch) {
            alert('패스워드 확인이 일치하지 않습니다.');
        }
    }
    </script>
</body>
</html>

15if_ex03.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>
    <script>
        let idid = 'admin'
        let pwpw = 1234
        let userId = prompt('아이디를 입력하세요');
        if (userId == idid) {
            let userPw = prompt('비밀번호를 입력하세요');       
            if (userPw == pwpw) {      
            }
            else {
                alert('비밀번호가 틀립니다.');
            }
        }
    </script>
</body>
</html>

17if_ex03.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>
    <script>
        let userId = prompt('아이디를 입력하세요');
        if(userId === 'Admin') {
            let userPw = prompt('비밀번호를 입력하세요');
            if(!userPw || userPw == null) {
                alert('취소되었습니다.');
            } else if(userPw === '1234') {
                alert('환영합니다.');
            } else {
                alert('인증에 실패했습니다.');
            }
            console.log(userPw);
        }
    </script>
</body>
</html>