Jquery Validation Plugin을 이용한 회원가입 Form 만들기

참조

• http://jqueryvalidation.org/documentation/
• https://github.com/jzaefferer/jquery-validation/releases

JQuery Validation Plugin은 입력되는 Form 값을 Submit하여 보낼때, 필수값을 입력하지 않으면 javascript에서 alert창을 띄워 막았던 것을 값이 없을때 자동으로 Submit되는 것을 막아주는 Plugin이다.

디자인과 프로그래밍적으로 간단한 방법이기때문에 많은 활용가치가 있다.

demo

jquery-validation-1.15.0.zip

index.html

validation();

$.validator.setDefaults( {
	submitHandler: function () {
		document.frm.submit();
	}
} );

Submit 핸드러로써 정의된 규칙에 맞지 않는다면 Submit을 제한한다.

$( "#frm" ).validate( {
	rules: {
		cu_name: "required",
		cu_phone: "required",
		cu_address1: "required",
		cu_address2: "required",
		cu_address3: "required",
		cu_id: {
			required: true,
			minlength: 5,
			maxlength: 12,
			alphabet: true,
			remote: "/login/check.jsp"
		},
		cu_pw: {
			required: true,
			minlength: 6,
			maxlength: 16
		},
		cu_pw_c: {
			required: true,
			minlength: 6,
			maxlength: 16,
			equalTo: "#cu_pw"
		},
		cu_email: {
			required: true,
			email: true
		},cu_birthdate: {
			required: true,
			date: true
		}
		//agree1: "required"
	},
	messages: {
		cu_name: "이름을 입력해주세요.",
		cu_phone: "핸드폰 번호를 입력해주세요.",
		cu_address1: "주소1을 선택해주세요.",
		cu_address2: "주소2를 선택해주세요.",
		cu_address3: "상세주소를 입력해주세요.",
		cu_id: {
			required: "ID를 입력해주세요.",
			minlength: "최소 5자 이상 입력해주세요.",
			maxlength: "최대 12자 이하 입력해주세요.",
			remote: "존재하는 ID입니다."
		},
		cu_pw: {
			required: "비밀번호를 입력해주세요.",
			minlength: "최소 6자 이상 입력해주세요.",
			maxlength: "최대 16자 이하 입력해주세요."
		},
		cu_pw_c: {
			required: "비밀번호 확인을 입력해주세요.",
			minlength: "최소 6자 이상 입력해주세요.",
			maxlength: "최대 16자 이하 입력해주세요.",
			equalTo: "비밀번호가 맞지 않습니다."
		},
		cu_email: {
			required: "E-mail을 입력해주세요.",
			email: "이메일 형식에 맞게 입력해주세요.",
		},
		cu_birthdate: {
			required: "생년월일을 입력해주세요.",
			date: "날짜형식에 맞게 입력해주세요.",
		},
		//agree1: "Please accept our policy"
	},
	errorElement: "em",
	errorPlacement: function ( error, element ) {
		// Add the `help-block` class to the error element
		error.addClass( "help-block" );

		// Add `has-feedback` class to the parent div.form-group
		// in order to add icons to inputs
		element.parents( ".col-xs-12" ).addClass( "has-feedback" );

		if ( element.prop( "type" ) === "checkbox" ) {
			error.insertAfter( element.parent( "label" ) );
		} else {
			error.insertAfter( element );
		}

		// Add the span element, if doesn't exists, and apply the icon classes to it.
		if ( !element.next( "span" )[ 0 ] ) {
			$( "" ).insertAfter( element );
		}
	},
	success: function ( label, element ) {
		// Add the span element, if doesn't exists, and apply the icon classes to it.
		if ( !$( element ).next( "span" )[ 0 ] ) {
			$( "" ).insertAfter( $( element ) );
		}
	},
	highlight: function ( element, errorClass, validClass ) {
		$( element ).parents( ".col-xs-12" ).addClass( "has-error" ).removeClass( "has-success" );
		$( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
	},
	unhighlight: function ( element, errorClass, validClass ) {
		$( element ).parents( ".col-xs-12" ).addClass( "has-success" ).removeClass( "has-error" );
		$( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
	}
} );

#로 시작하는 funtion은 form명칭을 지정해준다.

rules

validate 함수를 사용하시기 위해서는 name값을 설정.

rules을 사용하기 위해서는 id값을 설정.

required : 지정된 input에 값이 없을때 submit 제한.

minlength : 최소 글자 길이

maxlength : 최대 글자 길이

remote : ajax를 통해서 입력값을 서버페이지로 전달하여 true/false 결과값을 받아서 검증하는 방식

equalTo : 비교값을 '#name명칭'을 통해 지정하여 값이 다를경우 false return

email : email 형식에 맞지않는경우 제한

date, dateISO : 날짜 형식에 맞지 않는 경우 제한 

messages

rules에서 지정해준 규칙에서 맞지 않는 경우 return되는 messege를 지정한다.

messege를 하단의 help-block을 통하여 출력해주는 script가 포함되었다.

help-block이 포함되어있으므로 bootstrap을 추가해주어야하는데

head 부분에 아래 css를 추가해주어야한다.

기존 내부 경로에 bootstrap.css이 있어서 내부경로로 진행을 해보았는데 체크박스가 깨져서 나오는 증상이 있어서 경로를 추가했다.

내부 css코드를 보면 다른게 없고 버전고 같이 맞추어 보았지만 무엇이 차이나서 아이콘이 깨지는지는 확인이 필요하다.

Custom validation

기존에 정의된 규칙 외에도 추가를 하게 될때에 필요하다.

예를 들어 ID에는 영문 대소문자와 숫자, 특수문자_만 값이 들어오게 만들때 사용한다.

// custom validation 정의
$.validator.addMethod(
    'alphabet', function (value, element) {
        return this.optional(element) || /^[a-zA-Z0-9_\s]+$/.test(value);
    }, 'ID는 영문대소문자, 숫자, 특수문자 _ 만 사용가능합니다.'
);

remote의 검증페이지 check.jsp

Connection conn = null;
Statement stmt = null;
ResultSet rs = null;


JSONObject jsonMain = new JSONObject();
JSONArray jArray = new JSONArray();


String cu_id = request.getParameter("cu_id");

try{
	conn = DriverManager.getConnection(url, user, pw);

	stmt = conn.createStatement();
	
	String SQL = "select count(*) from customer where cu_id = '"+cu_id+"'";
	rs = stmt.executeQuery(SQL);

	while(rs.next())
	{
		if(rs.getString(1).equals("1")){
			out.print(false);
		}else{
			out.print(true);
		}
	}

} catch(Exception e){
	e.printStackTrace();
}