[JavaScript] 회원가입 필수입력

See the Pen Untitled by flowerdragon95 (@flowerdragon95) on CodePen.

 

자바스크립트로 회원가입 필수입력 요소를 만들어 보자

 

1. 우선 제출버튼이 클릭될 시 실행될 함수를 설정해준다.

2. input 값마다 부여한 id 값으로 input 값에 입력된 내용을 모두 변수 처리한다.

document.getElementById("registration-form").addEventListener("submit", function (event) {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var email = document.getElementById("email").value;
    var agreement = document.getElementById("agreement").checked;
    var age = document.getElementById("age").value;

 

3. 각각 변수처리된 입력값의 조건에 맞게 코드를 짜준다.

 

// 아이디와 비밀번호는 필수 입력
if (!username || !password) {
    alert("아이디와 비밀번호는 필수 입력 항목입니다.");
    event.preventDefault(); // 입력안하면 경보와 이벤트 멈춤
    return;
}
//이메일에는 @ 반드시 포함
if (email.indexOf("@") === -1) {
    alert("이메일 주소에는 @가 반드시 포함되어야 합니다.");
    event.preventDefault();
    return;
}
//checkbox 반드시 체크되어야 
if (!agreement) {
    alert("개인정보 수집에 동의해야 가입할 수 있습니다.");
    event.preventDefault();
    return;
}
//input type="number" 에서 0 이상만 숫자입력 하도록 만들기
if (age < 0) {
    alert("나이는 0이상의 숫자만 입력가능합니다.");
    event.preventDefault();
    return;
}