[javaScript/Web] 유효성 검사를 하는 회원가입 페이지

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>유효성검사</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
<main>
    <div class="logo">
        <img src="./img/meta.png" alt="메타몽"/>
    </div>
    <fieldset>
        <input type="text" id="nameArea" placeholder="이름">
    </fieldset>
    <div class="nameSuccessMessage alert">* 이름은 반드시 입력되어야 합니다.</div>

    <fieldset>
        <input type="tel" id="callNumberArea" placeholder="전화번호">
    </fieldset>

    <fieldset>
        <input type="text" id="idArea" placeholder="아이디">
    </fieldset>
    <div class="idSuccessMessage hide alert">* 사용가능한 아이디입니다</div>
    <div class="idFailureMessage hide alert">* 아이디는 4자 이상이어야 합니다</div>

    <fieldset>
        <input type="password" id="passwordArea" placeholder="비밀번호">
    </fieldset>
    <fieldset>
        <input type="password" id="passwordMatchArea" placeholder="비밀번호확인">
    </fieldset>
    <div class="passwordSuccessMessage hide alert">* 비밀번호가 일치합니다.</div>
    <div class="passwordFailureMessage hide alert">* 비밀번호가 일치하지 않습니다.</div>

    <fieldset>
        <button class="signupButton">가입</button>
    </fieldset>

    <script src="script.js"></script>
</main>
</body>
</html>

//style.css
.logo{
    text-align: center;
}
.logo>img{
    width: 80px;
}
main{
    display: flex;
    flex-direction: column;
    height: auto;
    width: 300px;
    border-style:solid;
    border-radius: 4px;
    border-color: gray;
}
fieldset {
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    justify-content: center;
    margin: 4px;
    padding: 8px 12px;
    border-style: hidden;
}
input{
    height: 30px;
    background-color: #f0f0f0;
    border: solid #b0b0b0 1px;
    padding-left: 10px;
}
.signupButton{
    height: 30px;
    color: white;
    background-color: #368AFF;
    border-style: none;
}

.hide{
    display: none;
}

.alert{
   text-align: right;
    margin-right: 15px;
    color: #707070;
    font-size:10px;
}

// script.js
let nameArea = document.querySelector('#nameArea');
let callNumberArea = document.querySelector('#callNumberArea');
let idArea = document.querySelector('#idArea');
let passwordArea = document.querySelector('#passwordArea');
let passwordMatchArea = document.querySelector('#passwordMatchArea');

let nameSuccessMessage = document.querySelector('.nameSuccessMessage');
let idSuccessMessage = document.querySelector('.idSuccessMessage');
let idFailureMessage = document.querySelector('.idFailureMessage');
let passwordSuccessMessage = document.querySelector('.passwordSuccessMessage');
let passwordFailureMessage = document.querySelector('.passwordFailureMessage');


//이름은 반드시 입력되어야 합니다
nameArea.onkeyup = function () {
    //이름이 비어있는 경우 메세지 출력
    if (nameArea.value.length === 0) {
        nameSuccessMessage.classList.remove('hide');
    } else {
        nameSuccessMessage.classList.add('hide');
    }
}

//전화번호는 11자 입력시 자동으로 010-****-****꼴로변합니다
callNumberArea.onkeyup = function () {
    console.log("ang1")
    if (callNumberArea.value.length === 11 && !callNumberArea.value.includes('-')) {
        callNumberArea.value = callNumber11Length(callNumberArea.value)
    }
    if (callNumberArea.value.includes('-') && callNumberArea.value.length < 11) {
        callNumberArea.value = callNumberArea.value.replaceAll('-', '');
    }
}

//아이디는 4자이상입니다
idArea.onkeyup = function () {
    if (idArea.value.length < 4) {
        idSuccessMessage.classList.add('hide');
        idFailureMessage.classList.remove('hide');
    } else {
        idSuccessMessage.classList.remove('hide');
        idFailureMessage.classList.add('hide');
    }
}

//비밀번호는 비밀번호 확인과 일치합니다
passwordMatchArea.onkeyup = function () {
    if (passwordMatchArea.value === passwordArea.value) {
        passwordSuccessMessage.classList.remove('hide');
        passwordFailureMessage.classList.add('hide');
    } else {
        passwordSuccessMessage.classList.add('hide');
        passwordFailureMessage.classList.remove('hide');
    }
}


function callNumber11Length(value) {
    return `${value.slice(0, 3)}-${value.slice(3, 7)}-${value.slice(7)}`
}

저작자표시 (새창열림)

'프론트엔드 > Codestates' 카테고리의 다른 글

[JavaScript/Web] 이벤트 객체 (0)	2022.09.18
[Git] github 사용 (0)	2022.09.15
[JavaScript/Web] Dom에 대한 추가 공부 (0)	2022.09.13
[JavaScript/Web] Dom다루기 (0)	2022.09.13
[Javascript/Web] DOM의 기초 (0)	2022.09.13

'프론트엔드 > Codestates' 카테고리의 다른 글

티스토리툴바