[JS] Form Validation 2 - 에이블런 프론트엔드 부트캠프 21일차

1. 이메일 검증

querySelector로 email input을 가져온다.

email 정규표현식을 활용해서 검증한다.

// email validation 함수 정의
function email_validation(name) {
    let input = form.querySelector(`[name=${name}]`);
    let txt = input.value;
    console.log(/@/.test(txt));
    let exptxt = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
    // test()는 주어진 문자열이 정규표현식을 만족하는지 판별하고 결과를 true 또는 false로 반환

    const errMsgs = input.closest("td").querySelectorAll("p");
    if (errMsgs.length > 0) errMsgs[0].remove();
    if (exptxt.test(txt)) {
        return true;
    } else {
        const errMsg = document.createElement("p");
        errMsg.append("@를 포함한 전체 이메일 주소를 입력하세요.");
        input.closest("td").append(errMsg);
        return false;
    }
}

2. 약관동의 검증

querySelector로 약관동의 input을 가져온다.

이전에 생성된 에러메시지를 삭제한다.

검증 실패시 에러메시지와 함께 false를 반환한다.

//약관동의 함수 정의 (체크박스 1개 체크유무) 
function agree_vaildation(name){
    let input = form.querySelector(`[name=${name}]`);
    
    const errMsg=input.closest("div").querySelectorAll("p");
    if(errMsg.length > 0) errMsg[0].remove();

    if(input.checked){
        return true;
    }
    const errMsg = document.createElement("p");
    errMsg.append("약관에 동의해 주세요");
    input.closest("div").append(errMsg);
    return false;
}

3. 비밀번호 검증

HTML의 비밀번호 입력값을 가져와서 정규표현식을 활용해서 검증을 진행한다.

만약 검증이 실패했을 경우 에러메시지와 false를 반환한다.

//비밀번호 함수 정의
function pwd_vaildation(name1, name2){
    let pwd1 = form.querySelector(`[name=${name1}]`);
    let pwd2 = form.querySelector(`[name=${name2}]`);

    let pwd1_val = pwd1.value;
    let pwd2_val = pwd2.value;

    const num = /[0-9]/;
    const eng = /[A-Za-z]/
    const spc = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/g;

    const errMsgs = pwd1.closest("td").querySelectorAll("p");
    if(errMsgs.length > 0) errMsgs[0].remove();

    if(pwd1_val === pwd2_val && num.test(pwd1_val) && eng.test(pwd1_val) && spc.test(pwd1_val)){

        return true;
    }
    const errMsg = document.createElement("p");
    errMsg.append(`영문자, 숫자, 특수문자를 포함하여 두 비밀번호를 동일하게 입력하세요.`);
    pwd1.closest("td").append(errMsg);
    return false;
}