jQuery Action (ajax 전송 컨트롤러, 유효성검사, 데이타 변경, 인터셉터 이벤트)
jQuery Action (ajax 전송 컨트롤러, 자료검사, 자료변경, 인터셉터 이벤트)
※ 언어 : JavaScript
※ 필수 라이브러리 : jQuery 1.3.2 이상
※ License : GNU Lesser General Public License
# 현재 버전 (Github)
※ 프로젝트 사이트 : https://github.com/syakuis/jquery-action
※ 데모 : http://syakuis.github.io/demo/jquery-action/demo/index.html
# 2.0.7 이하 버전 (구글 프로젝트)
※ Project Home : http://code.google.com/p/jquery-action
※ SVN : http://jquery-action.googlecode.com/svn/trunk/action
※ Download : http://code.google.com/p/jquery-action/downloads/list
jQuery Action (액션) 은 주기적으로 자주 사용되는 자바스크립트 함수들을 모아 쉽게 재사용할 수 있는 라이브러리화한 자바스크립트 프로그램입니다.
자바스크립트에서 ajax 혹은 submit 이벤트가 실행되었을때 해야할 일련의 작업들을 다양한 시나리오 구성으로 손쉽게 구현할 수 있게 도와주는 전송 컨트롤러 프레임워크입니다.
액션은 jQuery 에 의존하므로 jQuery 1.3.2 이상 라이브러리가 필요하며, 이하버전에서도 가능하나 보장할 수 없습니다.
# 개발자 : 최석균. Seok Kyun. Choi. (Syaku)
# 개발자 블로그 : http://syaku.tistory.com
# jQuery Action Post : http://syaku.tistory.com/164
* jaAction 은 다음과 같은 기능을 제공합니다.
1) 데이터 필터링
데이터 입력 값 존재 체크 : 값을 입력 , 선택 , 체크 하였는 가를 체크함.
데이터 입력 값의 형태 체크 : 값이 숫자 , 영문 , 한글 , 한영조합 등등 인가를 체크함.
데이터 입력 값의 길이 체크 : 입력한 글자 수를 체크함.
데이터 입력 값의 비교 : 두개의 입력 값이 같은지 체크함.
데이터 선택 수 체크 : 라디오 및 체크 박스의 선택 수를 체크함.
데이터 정규표현식 체크 : 정규표현식을 이용하여 데이터 값 체크. 주로 이메일, 주민등록번호, 홈페이지 등등 정규표현식을 이용하여 입력한 값이 패턴과 일치한지를 체크함. 정규표현식을 계속적으로 추가할 수 있음.
2) 상황에 맞는 메세지 출력
데이터 필터링에서 부적합할 경우 그에 따를 메세지를 출력함.
모든 작업이 완료되었을 때 전송여부를 확인하기 위한 메세지를 출력함.
3) 메세지 국제화
액션은 메세지가 분리되어 있어 국제화 할 수 있습니다.
4) 자료변경
액션은 임의적으로 데이터를 수정할 수 있습니다.
한개의 폼 태그에서 여러 개의 액션을 구성하려고 할때 폼 속성을 수정해야 합니다.
예를들어 목록 게시판에 자료를 지우려는 함수, 자료를 수정하려는 함수가 있을 경우 각 폼 속성의 액션 경로가 다를 수 있습니다.
이럴때 액션을 이용하여 폼 속성을 수정할 수 있으며 또한 내부의 객체(input , select 등등)의 값들을 수정하거나 객체를 임의적으로 생성하여 값을 부여할 수 있습니다.
5) 롤백
액션이 진행되는 과정에서 취소가 되었을 때 변경된 자료를 모두 원래대로 되돌려 놓습니다.
예를들어 목록 게시판에 자료를 지우려는 함수를 실행하였고 취소했다고 가정하였을때… 폼 속성의 액션 경로는 지우는 페이지 경로일 것입니다.
이때 목록 게시판에서 검색 이벤트가 실행될 경우 데이터가 손실될 수있습니다. 그뿐 아니라 인터페이스가 불확실하게 되어 사용자에게 혼동을 줄 수 있습니다. 롤백 기능은 이런 것들을 방지할 수 있습니다.
6) 결과를 이용한 상황 처리
액션을 이용하여 서버로 전송 후 결과를 받은 값을 이용하여 다양한 상황을 구현할 수 있습니다.
메세지를 출력하거나, 특정 페이지로 이동하거나, 특정 함수를 호출할 수 있습니다.
7) 인터셉터
액션을 실행하고 일련의 작업을 진행하기 전 후 상황에 맞는 시나리오를 구성할 수 있게 임의적인 함수를 호출할 수 있습니다.
액션이 실행되기 전에 일부 값을 수정하거나, 실행 후 페이지를 새로고침하거나 페이지를 이동시킬 수 있는 함수를 만들어 실행 시킬수있습니다.
<html>
<head>
<meta content="jQuery Action" name="Generator" />
<meta content="Seok Kyun. Choi. (http://syaku.tistory.com)" name="Programmed" />
<script type="text/javascript" language="javascript" charset="UTF-8" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" language="javascript" charset="UTF-8" src="../jquery.action.js"></script>
<script type="text/javascript" language="javascript" charset="UTF-8" src="../jquery.action-ko.js"></script>
<link rel="stylesheet" type="text/css" charset="UTF-8" href="../jquery.action.css" />
</head>
<body>
<script type="text/javascript">
function onSubmit() {
jQuery('#form_input').jaAction({
values : 'mod=update' // mod 인풋박스의 값을 update 변경함.
, formAttr : 'action=./save.html' // form 속성의 action 을 ./save.html 변경함.
, send : 'submit' // form 을 submit 으로 전송함.
, filter : [
// #user_id 의 값이 없거나, user_id 형식의 값이 아니고 입력길이가 2자이상 4자이하가 아닌경우 아이디 .... 메세지 alert 창을 출력함.
{ target : "#user_id", params : "&filter=notnull&filter=user_id&length=2,4&title=아이디" }
// #name 최대길이 10자이상을 넘을 경우 성명 .... 메세지 alert 창을 출력합니다.
, { target : "#name", params : "&filter=notnull&max_length=10&title=성명" }
, { target : "#pwd", params : "&filter=notnull&max_length=40&title=비밀번호" }
// #pwd2 가 #pwd 의 값과 다를 경우 비밀번호 확인 .... 메세지 alert 창을 출력합니다.
, { target : "#pwd2", params : "&filter=notnull&max_length=40&#pwd=!#pwd2&title=비밀번호 확인" }
, { target : "#email", params : "&filter=email&title=메일" }
// #age 의 값이 숫자가 아니거나, 50이상으로 입력한 경우 나이 ... 메세지 alert 창을 출력합니다.
, { target : "#age", params : "&filter=notnull&filter=number&num=50&title=나이" }
, { target : "#job", params : "&filter=notnull&title=직업" }
// input:radio[name=sex] 의 라디오박스 선택수가 0개인 경우 성별 ... 메세지 alert 창을 출력합니다.
, { target : "input:radio[name=sex]", params : "&selected=1&title=성별" }
// input:radio[name=s] 의 체크박스 선택수가 2개이상 3개이하가 아닌 경우 취미 ... 메세지 alert 창을 출력합니다.
, { target : "input:checkbox[name=s]", params : "&selected=2,3&title=취미" }
]
, ask : 'update' // confirm 메세지 출력
, beforeAction : function() { // jaAction 메서드가 실행되기 전에 beforeAction 함수를 실행함. return false; 인 경우 jaAction 종료함.
var ja = $.jaFilter._filtering(jQuery('input:radio:[name=is]'),'&selected=1&value=1');
if (ja.error) { alert("동의를 선택하세요."); return false;}
}
});
}
</script>
<form id="form_input" method="post" action="">
hidden box : <input type="text" id="mod" name="mod" value="insert" />
<table border="1">
<tr>
<td colspan="2"><input type="button" value="저장" onclick="onSubmit();" /></td>
</tr>
<tr>
<th>아이디</th>
<td><input type="text" id="user_id" name="user_id" /></td>
</tr>
<tr>
<th>이름</th>
<td><input type="text" id="name" name="name" /></td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="text" id="pwd" name="pwd" /></td>
</tr>
<tr>
<th>비밀번호 확인</th>
<td><input type="text" id="pwd2" name="pwd2" /></td>
</tr>
<tr>
<th>메일주소</th>
<td><input type="text" id="email" name="email" /></td>
</tr>
<tr>
<th>나이</th>
<td><input type="text" id="age" name="age" /></td>
</tr>
<tr>
<th>직업</th>
<td>
<select name="job" id="job">
<option value="">선택</option>
<option value="학생">학생</option>
<option value="회사원">회사원</option>
<option value="공무원">공무원</option>
</select>
</td>
</tr>
<tr>
<th>성별</th>
<td>
<input type="radio" id="sex_boy" name="sex" /> 남
<input type="radio" id="sex_girl" name="sex" /> 여
</td>
</tr>
<tr>
<th>취미</th>
<td>
<input type="button" value="모두선택" onclick="jQuery.ja.checked('#form_input input:checkbox[name=s]');" />
<input type="checkbox" id="s1" name="s" /> 여행
<input type="checkbox" id="s2" name="s" /> 공부
<input type="checkbox" id="s3" name="s" /> 컴퓨터
<input type="checkbox" id="s4" name="s" /> 연애
<input type="checkbox" id="s5" name="s" /> 독서
<input type="checkbox" id="s6" name="s" /> 게임
</td>
</tr>
<tr>
<th>동의</th>
<td>
<input type="radio" id="is1" name="is" value="1" /> 동의
<input type="radio" id="is_ss" name="is" value="2" /> 동의안함
<input type="radio" id="is3" name="is" value="3" /> 모르겠음
</td>
</tr>
</table>
</form>
</body>
</html>
'개발노트 > jQuery' 카테고리의 다른 글
| jQuery rolling slider : 자동 슬라드 롤링 블릿 플러그인 (14) | 2014.02.21 |
|---|---|
| SWFUpload + CKEditor4 or SmartEditor2 멀티 업로드 그리고 파일 에디터 연동 : 스마트에디터 , 위지윅에디터 (10) | 2013.06.20 |
| jQuery Action (ajax 전송 컨트롤러, 유효성검사, 데이타 변경, 인터셉터 이벤트) (2) | 2013.05.25 |
| 소셜네트워크 글 내보내기 : SNS (0) | 2013.04.24 |
| jQuery Syaku Facebook API : 자바스크립트용 페이스북 API 연동 (15) | 2011.11.02 |
안녕하세요..
jquery 유효성 검사를 검색하다가 방문하였습니다.
GitHub에서 다운받아서 Demo의 jaAction.submit.html를 실행해 보았습니다.
그런데 궁금한게 2가지 있어 문의 드립니다.
1.(다운받은 파일을 전혀 수정하지 않고 테스트했습니다.)
아이디 부분에 length=2,4로 되어있고 영문 1글자를 입력하고 테스트하면
"아이은(는) 2자로 입력하세요." 라는 경고창이 뜹니다.
사용자 입장에서는 2글자로만 입력가능한 걸로 오인할 수 있을 것 같습니다.
2. 각필드에 입력한 값을 trim 하고 유효성 체크를 하려면 따로 기능이있는지요?
아니면 함수를 만들어 처리해야하나요? 이메일을 입력받을때 문자열 앞이나 뒤에 공백을 넣고 테스트해보니
잘못 되었다고 나옵니다.
좋은 프로그램 공개해 주셔서 감사합니다.
2,4 는 2자 이상 4자이하로 입력하세요가 뜨는게 정상인데 입니다.
수정하도록하겟습니다~
유효성 체크를 할때 액션에선 trim을 하지 않습니다.
직접 하시려면
beforeAction : function() {
}
옵션을 추가하여 항목을 trim 하거나 직접 유효성 체크 소스를 넣으셔도 됩니다. return false; 인 경우 액션이 중단됩니다.
beforeAction 가 실행된 후 필터(유효성)검사를 진행되는 게 순서입니다.
데모 소스에 보시면 동의여부가 먼저 실행이 되는 것 처럼 말이죠~
궁굼하신 사항은 언제든지 주십시요~
대부분 다운만 받아가시던데 이렇게 댓글을 달아주신분은 첨이네요~ 감사해요~