회원가입폼 jquery로 실시간 체크 정보
회원통합스킨 회원가입폼 jquery로 실시간 체크관련링크
http://jquery.com/
401회 연결
첨부파일
본문
jqurey를 배우면서 그누보드도 이쪽으로 옮겨야겠다는 생각이 들어 바꾸어봅니다.
다른분들이 올리신 글들을 보면서 많이 배웟고
그러나 여기서는 제가 만든게 아닌 플러그인을 활용하여 회원가입페이지만 일단 수정해보았습니다.
실시간으로 폼체크가 이루어지고
아이디, 닉네임, 이메일과 자동등록방지코드는 ajax로 체크되어 표시됩니다.
생일선택은 jquery ui 의 datepicker 플러그인을 썻고
폼체크는 alidationEngine 라는 플러그인을 썻고
라이트박스는 colorbox 라는 플러그인을 썻습니다.
위 플러그인 모두 MIT/GPL 라이센스로 수정 재배포가 가능합니다.
사용방법
일단 압축을 풀면 JQUERY 폴더와 파일 두개가 있습니다.
1
JQUERY 폴더를 ROOT에 BBS폴더랑 같은 위치에 복사합니다.
----------------------------------------------------------------
2
ROOT/head.sub.php 에
==========
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
=============
를 <html>위에 넣어줍니다.
----------------------------------------------------------------
3
ROOT/head.sub.php 에
==========
<script type="text/javascript" src="<?=$g4['path']?>/jquery/jquery-1.3.2.min.js"></script>
=============
를
===============
<script type="text/javascript" src="<?=$g4['path']?>/js/common.js"></script>
===============
아래줄에 넣어줍니다.
----------------------------------------------------------------
4.
register_form.skin.php
ajax_register_form.php
를
skin/member/basic
혹은 사용하시는 회원통합스킨 폴더에 넣어주세요.
jquery에 관한 파일과 플러그인 그리고 css는 모두 jquery폴더에서 관리를 합니다.
날짜선택기에 관한 디자인은 ui.datepicker.css 를 수정하세요.
폼체크에 관한 기능추가와 ajax관련 주소나 설정은
jquery.validationEngine-ko.js 에서 수정하세요.
기본원리를 간단히 설명해드리면 jquery.validationEngine-ko.js 는
jquery.validationEngine.js 의 확장으로
추가로 원하는 기능을 넣을수 있고
여러가지 설정을 할수 있습니다.
ajax관련 주소나 데이터전송에 대한 제한이 있긴 합니다.
register_form.skin.php 이파일은 거의 모든 부분이 수정되어서 한번 직접 보시는게 나은듯
ajax_register_form.php 이 파일은 form에서 보내주는 데이터를 판단하여 ajax로 보내주는 파일인데요. 원래 있던 ajax 세개 파일을 한 파일로 통합하여 id에 따라서 각각 기능을 구현하도록 하였습니다. 4개 ajax 체크가 들어있습니다.
그리고 자동방지도 ajax로 보내여 체크하도록 추가하였습니다.
주의할 점
register_form.skin.php 에서 모든 input은 자기 id를 갖고있습니다.
reg_mb_xxxxx
이런 식으로 되어있고 폼 체크는 이를 기준으로 검사하고있으니 지워지지 않도록 하세요.
자동등록방지 부분은
====================================================
// 자동등록방지 이미지 자동 생성과 이미지 클릭시 바꾸기
$(function() {
imageClick();
$("#kcaptcha_image").click(function(){imageClick();});
});
// 자동등록방지 이미지 생성 불러오기
function imageClick() {
$.ajax({
type: "POST",
url: "<?=$g4[bbs_path]?>/kcaptcha_session.php",
success: function (msg){ $("#kcaptcha_image").attr("src","<?=$g4[bbs_path]?>/kcaptcha_image.php?t="+(new Date).getTime()); }
});
}
=======================================================
이걸로 jqury식으로 짧게 끝냈습니다.
다른 사용부분도 이를 사용해도 좋을듯 싶습니다.
테스트가 부족해서 아직 문제점을 잘 모르겟습니다만
사용하시고 수정하셔서 쓰시길
그리고 그누보드가 jquery와 그 플럭인을 쉽게 쓸수 있는 환경이 갖춰졌으면 합니다.
대세인듯 해요...
아래 각 플러그인 주소와 사용법이있으니 더 상세한 사용법은
접속하셔서 참고하시기 바랍니다.
폼체크
http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
날짜선택기
http://jqueryui.com/demos/datepicker/
라이트박스
http://colorpowered.com/colorbox/
그냥 쓰다보니까 누라된 부분이 있는지 잘 모르겠구요.
사용해보시고 문제점이 있으면 알려주세요.
전체 스킨을 플러그인 방식으로 jquery 적용할 생각입니다.
자기가 개발하는것도 있겟지만 기존 플러그인 잘 된거 쓰고 업그레이드시키고 하는것이 확장에 많은 도움이 됩니다.
그럼, 감사합니다.
아래에 참고로 소스 입니다.
==========================================================================
register_form.skin.php
===========================================================================
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
?>
<style type="text/css">
input.ed_text { height:16px; width:250px; margin-top:3px; margin-left:5px; border:1px solid #9A9A9A; border-right:1px solid #D8D8D8; border-bottom:1px solid #D8D8D8; padding:5px; }
.form_width { width:600px; margin:auto; border-top:1px solid #ddd; border-bottom:1px solid #fff; }
.form_left { float:left; width:120px; height:35px; line-height:35px; border-bottom:1px solid #ddd; border-top:1px solid #fff; text-align:center; color:#999; font-weight:bold; }
.form_right { float:left; width:480px; height:35px; line-height:35px; border-bottom:1px solid #ddd; border-top:1px solid #fff; }
.form_clear { clear:both; }
</style>
<script type="text/javascript">var member_skin_path = "<?=$member_skin_path?>";</script>
<script language="javascript" src="<?=$g4[path]?>/jquery/jquery.validationEngine-ko.js"></script>
<script language="javascript" src="<?=$g4[path]?>/jquery/jquery.validationEngine.js"></script>
<link type="text/css" href="<?=$g4[path]?>/jquery/validationEngine.jquery.css" rel="stylesheet" />
<script language="javascript" src="<?=$g4[path]?>/jquery/ui.datepicker.js"></script>
<link type="text/css" href="<?=$g4[path]?>/jquery/ui.datepicker.css" rel="stylesheet" />
<form name="fregisterform" method="post" id="fregisterform" onsubmit="return fregisterform_submit(this);" enctype="multipart/form-data" autocomplete="off">
<input type=hidden name=w value="<?=$w?>">
<input type=hidden name=url value="<?=$urlencode?>">
<input type=hidden name=mb_jumin value="<?=$jumin?>">
<input type=hidden name=mb_id_enabled value="" id="mb_id_enabled">
<input type=hidden name=mb_nick_enabled value="" id="mb_nick_enabled">
<input type=hidden name=mb_email_enabled value="" id="mb_email_enabled">
<div class="form_width">
<label><div class="form_left">아이디</div>
<div class="form_right"><input class="validate[required,length[2,20],ajax[ajaxUser]] ed_text" id='reg_mb_id' maxlength="20" name="mb_id" title="아이디" ></div>
<div class="form_clear"></div></label>
<label><div class="form_left">비밀번호</div>
<div class="form_right"><input class="validate[required,length[2,20]] ed_text" id='reg_mb_password' type="password" name="mb_password" maxlength="20" title="비밀번호"></div>
<div class="form_clear"></div></label>
<label><div class="form_left">비밀번호 확인</div>
<div class="form_right"><input class="validate[required,confirm[reg_mb_password],length[2,20]] ed_text" id='reg_mb_password_re' type="password" name="mb_password_re" maxlength="20" title=" 확인"></div>
<div class="form_clear"></div></label>
<label><div class="form_left">이름</div>
<div class="form_right"><input class="validate[required] ed_text" id='reg_mb_name' name="mb_name" title="이름" ></div>
<div class="form_clear"></div></label>
<label><div class="form_left">닉네임</div>
<div class="form_right"><input class="validate[required,length[2,20],ajax[ajaxUser]] ed_text" id='reg_mb_nick' type="text" name="mb_nick" maxlength="20" title="닉네임"></div>
<div class="form_clear"></div></label>
<label><div class="form_left">이메일</div>
<div class="form_right"><input class="validate[required,custom[email],ajax[ajaxUser]] ed_text" id="reg_mb_email" type="text" name="mb_email" maxlength="100" title="이메일"></div>
<div class="form_clear"></div></label>
<label><div class="form_left">생일</div>
<div class="form_right"><input class="ed_text" type="text" id="reg_mb_birth" name="mb_birth" maxlength="12" title="생일" readonly style="width:60px; "></div>
<div class="form_clear"></div></label>
<label><div class="form_left">성별</div>
<div class="form_right"><input type="radio" name="mb_sex" title="성별" value="M" checked style="margin-left:5px; "> 남자 <input type="radio" name="mb_sex" title="성별" value="F" style="margin-left:5px; "> 여자</div>
<div class="form_clear"></div></label>
<label><div class="form_left"><img id="kcaptcha_image" border="0" width="120" height="35" src="<?=$member_skin_path?>/image/grain.gif" style="cursor:pointer;" title="자동등록방지"></div>
<div class="form_right"><input type=input class="validate[required,ajax[ajaxName]] ed_text" id="reg_wr_key" style="width:60px; " name="wr_key" title="자동등록방지"><span style="margin-left:10px; ">왼쪽의 자동등록방지 코드를 입력하세요.</span></div>
<div class="form_clear"></div></label>
<div style="text-align:center; "><input type="submit" value="" style="height:52px; width:180px; background:url(<?=$member_skin_path?>/image/submit.gif); border:0px; margin:5px; cursor:pointer; "></div>
</div>
</form>
<script type="text/javascript">
// 페이지 열릴때 자동으로 자동등록방지 이미지 생성
$(function() {
imageClick();
$("#fregisterform :input[type=text]:visible:enabled:first").focus();
$("#kcaptcha_image").click(function(){imageClick();});
$(".ed_text").focus(function () {
$(this).css('background','#fafafa');
});
});
// 자동등록방지 이미지 생성 불러오기
function imageClick() {
$.ajax({
type: "POST",
url: "<?=$g4[bbs_path]?>/kcaptcha_session.php",
success: function (msg){ $("#kcaptcha_image").attr("src","<?=$g4[bbs_path]?>/kcaptcha_image.php?t="+(new Date).getTime()); }
});
}
// 폼 체크
$(function() {
$("#fregisterform").validationEngine({
validationEventTriggers:"keyup blur", // 입력할때마다 체크
success : false,
failure : function() {}
});
});
// 날짜 선택
$(function() {
$('#reg_mb_birth').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yymmdd',
yearRange: '1900:2010',
prevText: '',
nextText: '',
monthNamesShort: ['1월(JAN)','2월(FEB)','3월(MAR)','4월(APR)','5월(MAY)','6월(JUN)','7월(JUL)','8월(AUG)','9월(SEP)','10월(OCT)','11월(NOV)','12월(DEC)']
});
});
// submit 최종 폼체크
function fregisterform_submit(f) {
<?
if ($g4[https_url])
echo "f.action = '$g4[https_url]/$g4[bbs]/register_form_update.php';";
else
echo "f.action = '$g4[bbs_path]/register_form_update.php';";
?>
return true;
}
</script>
==============================================================================
==========================================================================
ajax_register_form.php
==========================================================================
<?
include_once("_common.php");
/* RECEIVE VALUE */
$validateValue=$_POST['validateValue'];
$validateId=$_POST['validateId'];
$validateError=$_POST['validateError'];
/* RETURN VALUE */
$arrayToJs = array();
$arrayToJs[0] = $validateId;
$arrayToJs[1] = $validateError;
if ($validateId == "reg_mb_id") { // 아이디 id="reg_mb_id"
$row = sql_fetch(" select count(*) as cnt from $g4[member_table] where mb_id = '$validateValue' ");
if ($row[cnt] or preg_match("/[\,]?{$validateValue}/i", $config[cf_prohibit_id])) {
$arrayToJs[2] = "false";
echo '{"jsonValidateReturn":'.json_encode($arrayToJs).'}'; // RETURN ARRAY WITH ERROR
} else {
$arrayToJs[2] = "true"; // RETURN TRUE
echo '{"jsonValidateReturn":'.json_encode($arrayToJs).'}'; // RETURN ARRAY WITH success
}
} else if ($validateId == "reg_mb_nick") { // 닉네임 id="reg_mb_nick"
$row = sql_fetch(" select count(*) as cnt from $g4[member_table] where mb_nick = '$validateValue' ");
if ($row[cnt]) {
$arrayToJs[2] = "false";
echo '{"jsonValidateReturn":'.json_encode($arrayToJs).'}'; // RETURN ARRAY WITH ERROR
} else {
$arrayToJs[2] = "true"; // RETURN TRUE
echo '{"jsonValidateReturn":'.json_encode($arrayToJs).'}'; // RETURN ARRAY WITH success
}
} else if ($validateId == "reg_mb_email") { // 이메일 id="reg_mb_email"
$row = sql_fetch(" select count(*) as cnt from $g4[member_table] where mb_email = '$validateValue' ");
if ($row[cnt]) {
$arrayToJs[2] = "false";
echo '{"jsonValidateReturn":'.json_encode($arrayToJs).'}'; // RETURN ARRAY WITH ERROR
} else {
$arrayToJs[2] = "true"; // RETURN TRUE
echo '{"jsonValidateReturn":'.json_encode($arrayToJs).'}'; // RETURN ARRAY WITH success
}
} else if ($validateId == "reg_wr_key") { // 자동방지 이미지 id="reg_mb_key"
$get_key = get_session(captcha_keystring);
if ($validateValue == $get_key) {
$arrayToJs[2] = "true"; // RETURN TRUE
echo '{"jsonValidateReturn":'.json_encode($arrayToJs).'}'; // RETURN ARRAY WITH success
} else {
$arrayToJs[2] = "false";
echo '{"jsonValidateReturn":'.json_encode($arrayToJs).'}'; // RETURN ARRAY WITH ERROR
}
}
?>
==========================================================================
추천
11
11
댓글 전체
멋지네요~~!
jQuery 책만 사놓구 있었는데...
좋은 자료가 될 것 같습니다.
만드시느라 수고 많으셨습니다.
좋은 자료가 될 것 같습니다.
만드시느라 수고 많으셨습니다.
발전하는 그누보드 좋으네요... 저도 jQuery에 대해서는 상당히 긍정적으로 생각합니다.
스타디 모임같은 것이 있으면 참 좋으련만... 기본은 익혔는데,
수많은 플러그인들을 충돌없이 여러개를 결합해서 사용하는 부분에 있어서는 아직 많은 나눔과
테스팅, 동료들이 필요한 것 같아요...
스타디 모임같은 것이 있으면 참 좋으련만... 기본은 익혔는데,
수많은 플러그인들을 충돌없이 여러개를 결합해서 사용하는 부분에 있어서는 아직 많은 나눔과
테스팅, 동료들이 필요한 것 같아요...
jQuery에는 엄청난 라이브러리들이 많습니다.
http://plugins.jquery.com/
예를 들어 AJAX를 이용하면, 위의 기능들을 포함해서,
그누보드에서 list page에서 글제목을 클릭했을 때, 화면이 리프레쉬 되지 않고,
DIV에 원하는 페이지가 뜨도록 하고, 필요한 부분만 변경되며,
메뉴배치 등 드래그 앤 드랍했을 때 그 결과들(좌표들.Sort등)이나,
옵션들 수정에 있어서 리프레쉬 없이 바로 실시간으로 onchange 될때 DML(입력/수정/삭제)되도록 하는 것이죠...
(예전에 네이*는 프로토타입 같은 것으로 이미 블로그 등에 실시하고 있었죠. 네*트도 마찬가지로 수년전부터... 미리 그 기술들을 자신들만이 개발한 기술인양 하지 않고, JS라이브러리 때문이었다며, 모두에게 함께 개발하자고, 공개를 했었더라면 보다 더 기술 확산이 빨라지지 않았을까 하는 생각도 듭니다. )
아직 많은 부분에서 초기 CGI타입으로 개발하는 경우가 얼마나 많은가요...
한때 모든 프로그램들은 MVC방식으로 개발되어야 좋다고 많이 얘기되었지만,
그누보드는 거기에 더하여 jQuery와 결합하면 (제*보*는 진작 결합했었죠)
더 머찐 보드가 되지 않을까 하는 생각을 해봅니다.
제가 시간적 여유가 있으면 시간을 투자해서 그누보드의 jQuery화하는 개발에 보조해드렸으면 좋겠는데...
누군가 팀을 이끌고 가준다면 그것도 참 좋을 것 같습니다.
꿈만이라도 나누는 팀을 만든다면 그것만으로도 의미있는 나눔터가 될 것 같습니다.
누가 총대를 매십시오. 같이 스타벅스도 한층을 통째 임대하고, 차도 마시고, 프리젠테이션도 하고, 무선랜으로 임시서버에 모두 함께 붙어서 같이 개발도하고...
오프라인 개발 커뮤니티도 되면 좋겠다는 생각도 듭니다.
아... 그냥 가을에 씁쓸한 커피한잔 마시며 긁적여봤습니다.... 그누 식구들 모두 홧팅구...
http://plugins.jquery.com/
예를 들어 AJAX를 이용하면, 위의 기능들을 포함해서,
그누보드에서 list page에서 글제목을 클릭했을 때, 화면이 리프레쉬 되지 않고,
DIV에 원하는 페이지가 뜨도록 하고, 필요한 부분만 변경되며,
메뉴배치 등 드래그 앤 드랍했을 때 그 결과들(좌표들.Sort등)이나,
옵션들 수정에 있어서 리프레쉬 없이 바로 실시간으로 onchange 될때 DML(입력/수정/삭제)되도록 하는 것이죠...
(예전에 네이*는 프로토타입 같은 것으로 이미 블로그 등에 실시하고 있었죠. 네*트도 마찬가지로 수년전부터... 미리 그 기술들을 자신들만이 개발한 기술인양 하지 않고, JS라이브러리 때문이었다며, 모두에게 함께 개발하자고, 공개를 했었더라면 보다 더 기술 확산이 빨라지지 않았을까 하는 생각도 듭니다. )
아직 많은 부분에서 초기 CGI타입으로 개발하는 경우가 얼마나 많은가요...
한때 모든 프로그램들은 MVC방식으로 개발되어야 좋다고 많이 얘기되었지만,
그누보드는 거기에 더하여 jQuery와 결합하면 (제*보*는 진작 결합했었죠)
더 머찐 보드가 되지 않을까 하는 생각을 해봅니다.
제가 시간적 여유가 있으면 시간을 투자해서 그누보드의 jQuery화하는 개발에 보조해드렸으면 좋겠는데...
누군가 팀을 이끌고 가준다면 그것도 참 좋을 것 같습니다.
꿈만이라도 나누는 팀을 만든다면 그것만으로도 의미있는 나눔터가 될 것 같습니다.
누가 총대를 매십시오. 같이 스타벅스도 한층을 통째 임대하고, 차도 마시고, 프리젠테이션도 하고, 무선랜으로 임시서버에 모두 함께 붙어서 같이 개발도하고...
오프라인 개발 커뮤니티도 되면 좋겠다는 생각도 듭니다.
아... 그냥 가을에 씁쓸한 커피한잔 마시며 긁적여봤습니다.... 그누 식구들 모두 홧팅구...
오 속도가 무지 빠른듯~
추천!!
수고많으셨습니다^^;
수고많으셨습니다^^;
좋으네요... 감사합니다. ^^
멋지고 좋은 정보네요.
저도 급한불 꺼지면 책부터 사서 같이 했음 좋겠네요
저도 급한불 꺼지면 책부터 사서 같이 했음 좋겠네요
이런 긍정적인 스킨을...ㅎㅎㅎㅎ
일단 쓸 일은 없는데 반가운 마음에 추천쾅!입니다.
일단 쓸 일은 없는데 반가운 마음에 추천쾅!입니다.
다들잘되시나요?
전
This is a debug mode, you got a problem with your form, it will try to help you, refresh when you think you nailed down the problem
error in the ajax: 404 error
전
This is a debug mode, you got a problem with your form, it will try to help you, refresh when you think you nailed down the problem
error in the ajax: 404 error
좋은소스 감사합니다.
수고한 흔적이 보이네요
감사합니다
감사합니다
좋은자료 감사합니다.
감사합니다. 잘연구해보죠
우와~ 상세한 설명 너무 감사드려요~님짱!
