코딩 공부/JS

[JS] - 유효성 검사(닉네임)

hg_96 2022. 1. 28. 18:27

닉네임 유효성검사를 만들었다

 

해당기능은 빈값체크, 문자길이 2~20, 문자열 앞뒤로 빈공백 예외, 이모지 예외 이렇게만 주었다

//닉네임
function checkNick(obj)
{
    obj.addClass(placeHolderColorId);

    if( isEmpty(obj.val()) ){
        obj.attr('placeholder', "닉네임을 입력해주세요.");
        return false;
    }

    if( obj.val().length>20 || obj.val().length < 2 ) {
        obj.attr('placeholder', "2 ~ 20자 이하로 입력 가능합니다.");
        return false;
    }

    // 문자열의 처음 문자가 나올때까지 빈값제거 '    a b c     d e' => 'a b c     d e' || 끝의 공백 제거
    if(!check_blank_space(obj.val()) ) {
        obj.val("");
        obj.attr('placeholder', "문자열 앞 또는 뒤 빈칸 입력이 불가능합니다.");
        return false;
    }

    // 이모지 예외처리
    if(!check_emoji(obj.val()) ) {
        obj.val("");
        obj.attr('placeholder', "이모티콘은 입력이 불가능합니다.");
        return false;
    }

    return true;
}
function check_emoji(s) {
    s = s.search(/(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/g);

    if (s != "-1") {
        return false;
    } else {
        return true;
    }
}

function check_blank_space(s) {

    s0 = s.search(/^[\s\uFEFF\xA0]+/gi);
    s1 = s.search(/[\s\uFEFF\xA0]+$/gi);

    if (s0 != "-1" || s1 != "-1") {
        return false;
    } else {
        return true;
    }
}

뷰에서 이렇게 사용하면된다

                            if (!checkNick($('#U_nick'))) {
                                submit = false;
                            }

++ (2022.02.14)앞뒤 공백이아니라 전체 공백을 제외하려면 check_blank_space안에

    s2 = s.search(/ /gi);

    if (s2 != "-1") {
        return false;
    } else {
        return true;
    }
이렇게 변경해주자
 
 
++ (2022.02.14)아예 키입력시 불가능하게 만들어주는 법도있다
    $("input:text[stringOnly]").on("keyup", function () {
        $(this).val($(this).val().replace(/ /gi,""));
        $(this).val($(this).val().replace(/(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/g,""));
    });

++ (2022.02.15)이모지를 키업으로 예외처리하면 키보드로는 막아주지만 마우스클릭은 막아주지 못했다

// 이모지
function check_emoji(s) {
    let sVal = s.val();
    let valSerch = sVal.search(/(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/g);

    if (valSerch != "-1") {
        let repVal = sVal.replace(/(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/gi, "");
        s.val(repVal);
    }
}

함수의 사용은 이렇게 한다

    // 이모지 예외처리
    check_emoji(obj);