(Vanilla JS) form 유효성 검사(정규식 이용, 빈 값 검사)

처음 프로젝트를 하면서 js form 유효성 검사를 하게 되면서 공부함

이름이나 전화번호 같이 정해진 형식이 있는 경우나 빈 입력값이 있으면 안될 경우엔 서버로 데이터를 전송하기 전에 front단에서 먼저 검증을 해야함

1. 정규식 패턴 이용 : 먼저 형식별로 변수를 지정한 후에, 조건문에서 검증할 수 있음

const petternSpc = /[~!@#$%^&*()_+|<>?:{}]/;
const petternNum = /[0-9]/;
const petternEng = /[a-zA-Z]/;
const petternKor = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;

검증예시

if (petternSpc.test(nameValue) || petternNum.test(nameValue)) {
        alert("이름을 올바른 형식으로 입력해주세요.");
        return false;
}

if (petternSpc.test(phoneValue) || petternEng.test(phoneValue) || petternKor.test(phoneValue)) {
        alert("전화번호에 숫자만 입력해주세요.");
        return false;
 }

2. 체크박스에 빈 값 검사 : 반복문을 이용해 checked값이 True인 경우만 return true하고, 아닐 경우 return false로 반복문을 종료

function checkChecked() {
    //체크박스를 모두 체크하지 않은 경우
    if (!(checkTrue(pet))) {
        alert("모든 항목을 선택해주세요.");
        return false;
    }
    return true;
}

function checkTrue(items) {
    for (let i = 0; i < items.length; i++) {
        if (items[i].checked == true) {
            return true;
        }
    }
    return false;
}

• 이때, for-each문은 사용하면 안됨. if 조건을 만족하더라고 return 하지않고, 끝까지 변수를 반복하기 때문!