close
프로필 배경
프로필 로고

codefactoryglobal

Javascript · 2024. 3. 25. fullscreen 넓게보기

Jquery Form Validate 사용하여 회원 가입 유효성 체크

반응형

1. Jquery Validation 플러그인

(1) 설명

HTML 문서에서 FORM에 입력된 값들을 확인할 때 사용되는 플러그인, 즉 클라이언트 측 폼 데이터 검증 툴

 

(2) 사용법

validate( { 
    options 
} )

 

(3) options

옵션 설명 
debug  true일 경우 validation 후 submit을 수행하지 않음. (default: false) 
onfocusout  onblur 시 해당항목을 validation 할 것인지 여부 (default: true) 
rules  각 항목별로 validation rule을 지정한다. 
messages  rules에서 정의된 조건으로 validation에 실패했을 때 화면에 표시할 메시지를 지정한다. 
errorPlacement  validator는 기본적으로 validation 실패 시 실패한 노드 우측에 실패 메시지를 표시하게 되어있다. 작동을 원하지 않으면 내용이 없는 errorPlacement를 선언한다. 
invalidHandler  validation 실패 시의 핸들러를 정의한다. 
submitHandler 유효성 검사가 완료된 뒤 수행할 핸들러를 정의한다. 주의 할 점은 이 옵션을 명시할 경우 'submit' 이벤트만 발생하며 실제 FORM 전송은 일어나지 않는다는 것이다. 만약 submitHandler를 명시하지 않으면 유효성 검사 후 온전한 submit을 수행한다. 
 

(4) Rules

 

Rules 설명 
required 입력 필수 항목설정. text, password, select, radio, checkbox type에 사용된다.  ex) required : true 
remote  외부 URL을 이용한 validation이 필요한 경우 사용한다. 
equalTo  다른 FORM 항목과 동일한 값인지 체크한다. 
minlength  최소 길이 체크. ex) minlength : 3 
maxlength  최대 길이 체크. ex) maxlength : 10 
rangelength  길이 범위 체크. ex) rangelength : [2, 6] (2글자 이상 6글자 이하) 
min  숫자의 최소값 체크. ex) min : 13 (13보다 작을 경우 false) 
max  숫자의 최대값 체크. ex) max : 5 (5보다 클 경우 false) 
range  숫자의 범위 체크. ex) range : [13, 24] (13보다 작거나 24보다 클 경우 false) 
email  이메일 형식의 값인지 체크. ex) email : true 
url  유효한 url 형식인지 체크. ex) url : true 
date  유효한 날짜 형식의 값인지 체크 
dateISO  유효한 국제표준 날짜 형식인지 체크. ex) dateISO : true 
number  유효한 숫자인지 체크. ex) number : true 
digits  유효한 digit 값인지 체크. number와 다른점은 양의 정수만 허용한다. 즉, 소수와 음수일 경우 false 
creditcard  유효한 카드번호 형식인지 체크. 공식페이지에서는 creditcard rule을 그대로 적용하지 말고 현지 사정에 맞게 수정하라고 권장한다. ex) creditcard : true 

 

(5) input type="속성값" 별 정규식

 

속성값 정규식
email /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
url /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i
date !/Invalid|NaN/
dateISO  /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/
number /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/
digits /^\d+$/

 

(6) Custom Rule

- 사용자 지정 유효성 검사 방법을 추가

 

 

// 정규식을 적용
$.validator.addMethod("regx", function(value, element, regexpr) {          
    return regexpr.test(value);
});

 

2. 예제 코드

(1) 포함 자바스크립트 

① StringUtil.js : '자바스크립트 문자열 처리' 포스트 참조

② jquery.validate_add.js : jquery.validate.js addMethod 구현

 

jquery.validate_add.js

 

// 정규식을 적용
$.validator.addMethod("regx", function(value, element, regexpr) {          
    return regexpr.test(value);
});


// 한글, 영어를 체크하여 계산된 바이트 길이를 최소 길이와 비교
$.validator.addMethod('minbytelength', function (value, element, param) {
    var nMin = param;
    var nBytes = $.type(value) !== "string" ? 0 : value.getByteLength(); // 문자열의 Byte 길이를 반환(한글은 2byte이며 영숫자는 1byte)


    return this.optional(element) || (nBytes === 0 || nBytes >= nMin);
});


// 한글, 영어를 체크하여 계산된 바이트 길이를 최대 길이와 비교
$.validator.addMethod('maxbytelength', function (value, element, param) {
    var nMax = param;
    var nBytes = $.type(value) !== "string" ? 0 : value.getByteLength(); // 문자열의 Byte 길이를 반환(한글은 2byte이며 영숫자는 1byte)


    return this.optional(element) || (nBytes === 0 || nBytes <= nMax);
});


// 한글, 영어를 체크하여 계산된 바이트 길이를 최소 길이와 최대 길이 비교
$.validator.addMethod('bytelength', function (value, element, params) {
    var nMin = params.min;
    var nMax = params.max;
    var nBytes = $.type(value) !== "string" ? 0 : value.getByteLength(); // 문자열의 Byte 길이를 반환(한글은 2byte이며 영숫자는 1byte)
 
    return this.optional(element) || (nBytes === 0 || (nBytes >= nMin && nBytes <= nMax));
});

 

(2) JoinFormValid_JQuery.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="No-Cache">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery Form Validation Plugin Sample</title>
<!-- CSS -->
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<style type="text/css">
body {
    padding-top:0px;
    margin-top:0px;
    background-color:#f5f5f5;
}


.page-header {
    padding-top:0px;
    margin-top:0px;
}


.form-horizontal .control-label.text-left{
    text-align:left;
}


.form-horizontal .form-group {
    height:50px;
}


h3 span.ok {
    color:#01A9DB;
}


label.error {
    font-family:"돋움", Dotum, "Apple SD Gothic Neo", Helvetica, Sans-serif;
    font-size:9pt;
    font-weight:600;
    padding:3px 0 0 10px;
    color:#FF0000;
    display:block;
}
</style>
</head>
<body>
<div class="container-fluid">
    <div class="page-header">
        <h3>회원 가입<span class="ok"></span></h3>
    </div>
    <div style="width:680px">
    <form id="JoinForm" name="JoinForm" role="form" method="post" class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label text-left" for="UserId">아이디</label>
            <div class="col-sm-10">
                <div class="controls">
                    <input type="text" id="UserId" name="UserId" class="form-control" maxlength="50" placeholder="계정(이메일)" />
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label text-left" for="NickName">닉네임</label>
            <div class="col-sm-10">
                <div class="controls">
                    <input type="text" id="NickName" name="NickName" class="form-control" maxlength="20" placeholder="닉네임" />
               </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label text-left" for="Password">비밀번호</label>
            <div class="col-sm-10">
                <div class="controls">
                    <input type="password" id="Password" name="Password" class="form-control" maxlength="16" placeholder="비밀번호" />
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label text-left" for="ConfirmPassword">비밀번호 확인</label>
            <div class="col-sm-10">
                <div class="controls">
                    <input type="password" id="ConfirmPassword" name="ConfirmPassword" class="form-control" maxlength="16" placeholder="비밀번호 확인" />
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-10 text-center">
                <input type="submit" value="유효성 검사" class="btn btn-primary btn-grad" style="width:110px" />
            </div>
        </div>
    </form>
    </div>
</div>
<script src="/Scripts/jquery-2.2.1.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script type="text/javascript" src="/Static/PublicFunc/Js/StringUtil.js"></script>
<script type="text/javascript" src="/Static/PublicFunc/Js/jquery.validate_add.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    // Form값 유효성 체크
    //  - UserId : 9~50자 이메일 형식(regx:/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/)
    //  - NickName : 한글 2~10자, 영숫자 4~20자 조합(4바이트 이상 20바이트 이하)
    //  - Password : 8~16자 영문, 숫자, 특수문자 조합
    //  - ConfirmPassword : 8~16자 영문, 숫자, 특수문자 조합(비밀번호 확인)
    $("#JoinForm").validate({
        onfocusout : function (element) {
            $(element).valid();
        },


        rules : {
            UserId : {required:true, minlength:9, maxlength:50, email:true},
            NickName : {required:true, minbytelength:4, maxbytelength:20, regx:/^[ㄱ-ㅎ|가-힣|a-z|A-Z|0-9|\*]+$/},
            Password : {required:true, minlength:8, maxlength:16, regx:/^(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@@#$%^&+=]).*$/},
            ConfirmPassword : {required:true, equalTo:"#Password"}
        },
 
        messages : {
            UserId : {required:"아이디 필드가 필요합니다.", minlength:jQuery.validator.format("최소 {0}자 이상"), maxlength:jQuery.validator.format("최대 {0}자 이하"), email:"아이디 형식이 잘못되었습니다."},
            NickName : {required:"닉네임 필드가 필요합니다.", minbytelength:jQuery.validator.format("최소 {0}바이트 이상(한글 2자, 영숫자 4자)"), maxbytelength:jQuery.validator.format("최대 {0}바이트 이하(한글 10자, 영숫자 20자)"), regx:"닉네임 형식이 잘못되었습니다."},
            Password : {required:"비밀번호 필드가 필요합니다.", minlength:jQuery.validator.format("최소 {0}자 이상"), maxlength:jQuery.validator.format("최대 {0}자 이하"), regx:"비밀번호 형식이 잘못되었습니다."},
            ConfirmPassword : {required:"비밀번호 확인 필드가 필요합니다.", equalTo:"입력한 비밀번호가 서로 일치하지 않습니다."}
        }, 


        /*errorPlacement: function(error, element) {
        },*/


        invalidHandler : function(form, validator) {
            var errors = validator.numberOfInvalids();
            if( errors ) 
            {
                $("h3 span.ok").html("(유효성 검사 실패)"); 


                alert(validator.errorList[0].message);
                validator.errorList[0].element.focus();
            }
        }, 


        submitHandler: function(form) {
            $("h3 span.ok").html("(유효성 검사 성공)"); 
        }
    });
});
</script>
</body>
</html>

 

반응형
Javascript 관련 글
더 보기

티스토리툴바