[HTML, JavaScript]Input 태그 유효성 검사

1. 유효성 검사 (값의 유무)

다음과 같은 폼에서 input에 값이 들어있는지 유효성 검사를 하고 싶다면 어떻게 해야할까?

<form name="login_form" action="#" method="post">
  <input type="password" id="pw" placeholder="비밀번호를 입력하세요." />
  <button type="submit"> 로그인 </button>
</form>

1-1) javascript 작성

id가 pw인 input 태그의 값이 비어있으면, 비밀번호를 입력하세요라는 문구를 출력한다. 그리고, 커서를 해당 태그로 옮기고 해당 함수를 종료하는 식으로 동작한다. 만약 값이 비어있지 않으면, if문이 실행되지 않아 form을 submit한다.

function checker() {
    var pw = document.getElementById('pw');

    if (!pw.value) {
        alert("비밀번호를 입력하세요.");
        pw.focus();
        return false;
    }
    document.login_form.submit();
}

1-2) html 수정

해당 자바 스크립트 함수를 input 태그의 onclick 옵션에 넣어주면 된다. 이 때, type은 submit이 아니라 button으로 바꾸어주어야 제대로 동작한다.

<form name="login_form" action="" method="post">
  <input type="password" id="pw" placeholder="비밀번호를 입력하세요." />
  <button type="button" onclick="checker()"> 로그인 </button>
</form>

<script src="check.js"></script>

1-3) 결과

2. 유효성 검사 (값의 비교)

다음과 같은 폼에서 2개의 input value 값이 같은지 확인해보자.

<form name="pw_form" action="#" method="post">
  <input type="password" id="pw" placeholder="비밀번호를 입력하세요." />
  <input type="password" id="pw2" placeholder="비밀번호를 다시 입력해주세요." />
  <button type="submit"> 비밀번호 생성 </button>
</form>

2-1) javascript 작성

비밀번호가 입력되지 않은 경우, pw(‘’) == pw2(‘‘)의 논리값은 true이기 때문에 pw에 대한 유효성 검정도 해줘야 한다. 아래 코드에서, pw에 값의 유무에 대한 유효성 검정을 통과하지 못하면 함수는 종료되어 폼이 작성되지 않는다. 따라서 pw 값에 대한 유효성 검정도 충족하면서 pw, pw2 두 값에 대한 유효성 검정도 통과하면 폼이 작성되게 설계하였다.

function checker() {
    var pw = document.getElementById('pw');
    var pw2 = document.getElementById('pw2');

    if (!pw.value) {
        alert("비밀번호를 입력해주세요.");
        pw.focus();
        return false;
    }
    if (pw.value != pw2.value) {
        alert("비밀번호가 다릅니다.");
        pw2.focus();
        return false;
    }
    document.pw_form.submit();
}

2-2) html 변경

<form name="pw_form" action="#" method="post">
  <input type="password" id="pw" placeholder="비밀번호를 입력하세요." />
  <input type="password" id="pw2" placeholder="비밀번호를 다시 입력해주세요." />
  <button type="button" onclick="checker()"> 비밀번호 생성 </button>
</form>

2-3) 결과

3. 응용 (여러개의 유효성 test)

가상의 회원가입 폼을 만들어 유효성 테스트를 해보겠다. 유효성 검사 대상은 다음과 같다.

• 성명 (name)
• 아이디 (id_)
• 이메일 (email)
• 비밀번호 (pw)
• 비밀번호 확인 (pw2)

3-1) javascript

먼저, 유효성 검사를 만족하면 true를, 그렇지 않으면 false를 리턴하는 함수 checker()를 정의해주었다. signupform_check()는 성명, 아이디, 이메일, 비밀번호의 값에 대한 유효성 검사와 pw, pw2의 값에 대한 유효성 검사를 진행한다. 이 때, 위에서 정의한 checker()를 사용하여 유의성 검정을 해주었으며, checker()의 리턴값이 false이면 signupform_check()를 종료한다. 반대로, 모든 유효성 검정을 통과하면 form을 submit한다.

/* Checker */
function checker(id, ko_id) {
    var check = document.getElementById(id);

    if (!check.value) {
        alert(ko_id + " 입력하세요.");
        check.focus();
        return false;
    }
    return true;
}

/* Sign Up Form */
function signupform_check() {
    var pw = document.getElementById("pw");
    var pw2 = document.getElementById("pw2");

    if (!checker("name", "성명을")) {
        return false;
    };
    if (!checker("id_", "아이디를")) {
        return false;
    };
    if (!checker("email", "이메일을")) {
        return false;
    };
    if (!checker("pw", "비밀번호를")) {
        return false;
    };
    if (pw.value != pw2.value) {
        alert("비밀번호가 다릅니다.");
        pw2.focus();
        return false;
    };
    document.signup_form.submit();
}

3-2) 결과

회원가입

성명

아이디

이메일

비밀번호

비밀번호 확인