JavaScript/JavaScript

[Javascript] submit 전에 입력 값 길이 검사하기

크리스피코드 2022. 12. 30. 10:57

웹 사이트에서 submit을 하기 전 입력받은 데이터의 유효성을 검사해야하는 경우가 있다.

여러가지 방법이 있겠지만 이 글에서는 form 태그에 onsubmit 속성을 사용하는 방식으로 구현해보았다.

 

<body>
    <div class="card" style="width: 18rem;">
        <div class="card-body">
            <div class="bd-example">
                <form action="form0101_process.jsp" method="post" onsubmit="return fn_check()">
                    <div class="mb-3">
                        <label for="memId" class="form-label">아이디</label>
                        <input type="text" class="form-control" id="memId" name="memId"
                        aria-describedby="idHelp" placeholder="아이디를 입력해주세요."
                        required/>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">비밀번호</label>
                        <input type="password" class="form-control" id="password"
                        name="password" placeholder="비밀번호를 입력해주세요." required/>
                    </div>
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="remember-me"/>
                        <label class="form-check-label" for="remember-me">자동 로그인</label>
                    </div>
                    <button type="submit" class="btn btn-primary">로그인</button>
                </form>
            </div>
        </div>
    </div>
</body>

 

form 태그에 onsubmit 속성을 사용해 submit 되기 전 fn_check() 라는 함수를 호출한다.

함수 앞에 붙은 return 이라는 키워드를 통해 fn_check()의 반환값을 받아오는데

이 반환값이 true일 경우 submit이 수행되고 false일 경우 수행되지 않는다.

 

function fn_check(){
    var memId = document.querySelector('#memId').value;
    if(memId.trim().length < 3){
        alert("아이디를 3자리 이상 입력해주세요.");
        return false;
    }
    
    var password = document.querySelector('#password').value;
    if(password.trim().length < 6){
        alert("비밀번호를 6자리 이상 입력해주세요.");
        return false;
    }
    
    return true;
}

 

함수에서는 입력값의 길이를 검사한다.

아이디는 3자리 이상, 비밀번호는 6자리 이상 입력해야 true가 반환되어 submit이 수행된다.

 

조건을 만족하지 않으면 false가 반환되어 submit이 수행되지 않는다.