프로그램/script

전형적인 아이디 입력 체크 및 처리 javascript

mulderu 2012. 1. 24. 23:23

전형적인 ID 입력 폼을 Client-Side, Javascript 로 검증 하기 예제 입니다.
대부분의 경우가 이와 유사하게 작성하고 몇가지가 가감 될거라고 생각 됩니다. ^^

// 
    $("#user_id").focus();
    $("#user_id").bind("blur", function(){
        check_userid = $(this).val();
        if (check_userid.length < 3) {
            $("#user_id").addClass("IdLengthError");
            $("#user_id_group .helper").html("Please use at least 3 characters").addClass("red");
        } 
        else if (check_userid.length > 15) {
            $("#user_id").addClass("IdLengthError");
            $("#user_id_group .helper").html("Please use less than 15 characters").addClass("red");
        } 
        else {
            $("#user_id").removeClass("IdLengthError");
            $("#user_id_group .helper").removeClass("red").text("");
            $.ajax({
                type: "GET",
                url: '/check_userid/',
                dataType: "json",
                data: "check_userid="+escape(check_userid),
                success: function(data) {
                    if (data.status == "success") {
                        $("#user_id").removeClass("IdLengthError");
                        $("#user_id_group .helper").html('Your_Id is valid').removeClass("red").addClass("green");
                    } else {
                        $("#user_id").addClass("IdCheckError");
                        $("#user_id_group .helper").html(data.message || "Sorry, this user_id is already taken").addClass('red').removeClass("green");
                    }
                    
                }
            });
        }
        
    });