[javascript] form 유효성 검증 상남자답게 배열로 작성하기

설명할 것이 딱히 없는 내용이라 불필요한 글은 쓰지 않겠습니다.

function proc(){
    const fields = [
            { id: "title", message: "제목을 입력해주세요." },
            { id: "writer", message: "작성자를 입력해주세요." },
            { id: "writer_email", message: "이메일을 입력해주세요." },
            { id: "content", message: "내용을 입력해주세요." }
    ];

    for (const field of fields) {
        const el = document.querySelector(`#${field.id}`);
        if (!el.value.trim()) {
            alert(field.message); // 해당 필드에 맞는 알럿 메시지 출력
            el.focus();
            return false;
        }
    }
	
	 // 이메일 유효성 검사 추가
    const emailField = document.querySelector("#writer_email");
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    if (!emailPattern.test(emailField.value.trim())) {
        alert("올바른 이메일 형식을 입력해주세요.");
        emailField.focus();
        return false;
    }
    
    
}

 

 

아래 결과물 참고

 

See the Pen 폼검증 by sodium casein (@xyyhsawg-the-selector) on CodePen.