폼(Form) 검증해주는 스크립트(Script)
페이지 정보
작성자 서방님 댓글 0건 조회 160회 작성일 06-09-12 12:41본문
이 자바 스크립트는 조금만 코딩 잘해도 코딩하는 양이 상당히 줄어든다. 특히나 폼 검증해줄땐 더욱 그렇다. 아래 여러가지 다양한 방법의 폼 검증 스크립트를 적어보겠다.
일반적인 폼 검증 스크립트
가장 무식한 방법
<script language="javascript">
function formCheck() {
if (document.form1.subject.value == "") {
alert("제목을 입력해 주세요");
document.form1.subject.focus();
return false;
}
if (document.form1.user.value == "") {
alert("이름을 입력해 주세요");
document.form1.user.focus();
return false;
}
return true;
}
</script>
<form name="form1" onsubmit="return formCheck()">
<input type="text" name="subject">
<input type="text" name="user">
<input type="submit">
</form>
조금 무식한 방법
<script language="javascript">
function formCheck() {
var frm = eval("document.form1");
if (frm.subject.value == "") {
alert("제목을 입력해 주세요");
frm.subject.focus();
return false;
}
if (frm.user.value == "") {
alert("이름을 입력해 주세요");
frm.user.focus();
return false;
}
return true;
}
</script>
<form name="form1" onsubmit="return formCheck()">
<input type="text" name="subject">
<input type="text" name="user">
<input type="submit">
</form>
그나마 안무식한 방법
<script language="javascript">
function formCheck(frm) {
if (frm.subject.value == "") {
alert("제목을 입력해 주세요");
frm.subject.focus();
return false;
}
if (frm.user.value == "") {
alert("이름을 입력해 주세요");
frm.user.focus();
return false;
}
return true;
}
</script>
<form name="form1" onsubmit="return formCheck(this)">
<input type="text" name="subject">
<input type="text" name="user">
<input type="submit">
</form>
자 위의 3가지 경우를 보자. 이 예제소스는 체크하는 것이 "제목", "이름" 밖에 없어서 그다지 코딩양에 많은 차이가 있나 싶을수 있지만 이 코드 3개를잘 들여다보면 꼭 코딩양 줄이는것이 문제가 아니라 나중에 페이지 수정할일이 생길때 얼마나 손쉽게 수정할수 있냐의 문제도 있다.
첫번째 [가장 무식한 방법]의 코드는 그야말로 무식하다 -_- 일단 쓸데 없이 document.form1 이라는 구문을 일일이 다 넣었다. 다른 코드보면 알것지만 다른 변수로 치환해서 사용하면 될것을 일일이 다 적었다.
두번째 [조금 무식한 방법]은 좀 많이 쓰인다. 근데 이것도 안좋은 점이 만약 폼이름이 form1에서 form2로 변경되었다면? 뭐...첫번째 방법때보다야 코드를 많이 바꿀필요는없지만 어쨌든 기존 소스의 formCheck함수에서 var frm = eval("document.form1"); 이 부분의 코드를 수정해야한다.
마지막 [그나마 안무식한 방법] 요건 그나마 안무식하다. 이건 form 이름까지 아예 함수로 인자로 넘겨버려서 폼 이름이 변경된다고해도 스크립트 부분에선 고칠것이 하나도 없다!
여기까진 가장 일반적인 폼 검증하는 방식이다. 사이트 크기가 작은경우야 상관 없지만 사이트 볼륨이 커지고 개발자가 한명이 아닌 몇십명이 될경우 각기 사용하는 스크립트 방식이 다 틀려진다.
경고창 하나 띄우는데도 개발자마다 "제목을 입력해주세요", "제목을 입력하셔야합니다","제목을 기입해주세요"..등등 천차만별이다. 큰 사이트는 처리해야할 폼 검증요소들도 많기 때문에 자칫 잘못하다간 document.form1 코드만 적다 하루 다가는 경우가 생긴다. -_-
존내 편한 폼 검증 스크립트
이런 여러가지 문제들 때문에 폼 검증 해주는 함수같은것을 하나로 묶어서 만들어 사용한다. 앞으로 사용하는 폼검증 함수는 실제로 국내 대기업(서열 3위인가 -_-?)의 EHR 모듈 만들때 실제로 사용했던 코드이다. 물론 강좌용으로 보안상 위험한것, 불필요한것은 없앴다 -_- 꽤나 검증이 된 함수이므로 왠만해선 버그가 별로 없을것다... -_-;;
잔말말고 일단 스크립트 부분을 살펴보자. 스크립트 잘 모르는 사람은 어렵다 생각할수 있겠지만 잘 보면 어려운것 별로 없다. -_- 그냥 오래 야리다보면 이해가 될것이다. 그래서 소스설명 없다! 주석으로 대신해라 -_-
// 폼 검증 함수
function checkForm(f) {
var fLen = f.elements.length;
var fObj; // 폼 요소
var fTyp; // 폼 요소 Type
var fVal; // 폼 요소 Value
var fMsg; // 경고 메시지 속성
var fNum; // 숫자만 입력 속성
var fMax; // 최대 길이 지정
var fMin; // 최소 길이 지정
var fMxN; // 최대값 지정
var fMnN; // 최소값 지정
var fMal; // 메일 FORMAT
for (i=0;i<fLen;i++) {
fObj = f.elements[i];
fTyp = toUpperCase(fObj.getAttribute("type"));
fVal = fObj.getAttribute("value");
fMsg = fObj.getAttribute("msg"); // 경고 메시지
fNum = fObj.getAttribute("chknum"); // 숫자만 기입 가능하도록
fMax = fObj.getAttribute("maxlen"); // 최대 입력글자수 제한
fMin = fObj.getAttribute("minlen"); // 최소 입력글자수 제한
fMxN = fObj.getAttribute("maxnum"); // 최대 숫자 제한
fMnN = fObj.getAttribute("minnum"); // 최소 숫자 제한
fMal = fObj.getAttribute("chkmail"); // 이메일 체크
if (fMsg != null && (fTyp == "TEXT" || fTyp == "HIDDEN" || fTyp == "TEXTAREA" || fTyp == "PASSWORD") && fVal.replace(/ /gi,"") == "") {
alert(fMsg + " 입력해 주세요");
if (fTyp != "HIDDEN") {fObj.focus();}
return false;
}
if (fMsg != null && (fTyp == "SELECT-ONE" || fTyp == "SELECT-MULTIPLE") && fVal =="") {
alert(fMsg + " 선택해 주세요");
fObj.focus(); return false;
}
if (fMsg != null && (fTyp == "RADIO" || fTyp == "CHECKBOX") && checkChecked(fObj) == false) {
alert(fMsg + " 선택해 주세요");
fObj.focus(); return false;
}
if (fNum != null && isNaN(fVal)) {
alert("숫자로만 입력해 주세요");
fObj.focus(); return false;
}
if (fMax != null && fMax < getLen(fVal)) {
alert("입력된 글자수가 "+fMax+"자보다 작아야합니다.n(영문 "+fMax+"자, 한글 "+Math.floor(fMax/2)+"자 까지 가능합니다.)");
fObj.focus(); return false;
}
if (fMin != null && fMin > getLen(fVal)) {
alert("입력된 글자수가 "+fMax+"자보다 커야합니다.");
fObj.focus(); return false;
}
if (fMxN != null && parseInt(fMxN) < parseInt(fVal)) {
alert("입력된 숫자는 "+fMxN+"보다 작아야합니다.");
fObj.focus(); return false;
}
if (fMnN != null && parseInt(fMnN) > parseInt(fVal)) {
alert("입력된 숫자는 "+fMnN+"보다 커야합니다.");
fObj.focus(); return false;
}
if (fMal != null && checkEmail(fVal) == false && fVal != "") {
alert("이메일 주소가 올바르지 않습니다");
fObj.focus(); return false;
}
}
return true;
}
// 폼에 해당하는 컨트롤들의 기본값 쉽게 셋팅해 주기
function initForm(f) {
var nLen; // form 요소의 갯수
var ival; // 각 요소의 default value 값 즉! 초기화하고자 하는값
var fTyp; // form 요소의 타입(select, radio, checkbox...)
for (var i = 0; i < f.elements.length; i++) {
fTyp = toUpperCase(f.elements[i].type);
ival = f.elements[i].ival;
if (ival && fTyp == "SELECT-ONE") {
nLen = f.elements[i].options.length;
for (var j = 0; j < nLen; j++) {
if (f.elements[i].options[j].value == ival)
f.elements[i].options[j].selected = true;
}
}
if (fTyp == "SELECT-MULTIPLE") {
nLen = f.elements[i].options.length;
for (var j = 0; j < nLen; j++) {
if (f.elements[i].options[j].value == f.elements[i].options[j].ival)
f.elements[i].options[j].selected = true;
}
}
if (ival && (fTyp == "RADIO" || fTyp == "CHECKBOX")) {
if (f.elements[i].value == ival)
f.elements[i].checked = true;
}
}
return true;
}
// 배열 요소일 경우 checked 된것이 있는지 확인
function checkChecked(obj) {
var fname = obj.form.name;
var objnm = obj.name;
var oElem = eval(fname+"."+objnm);
var ret = false;
if (typeof(oElem.length) == "undefined") {
if (oElem.checked) {
ret = true;
}
} else {
for (var i=0;i<oElem.length;i++) {
if (oElem[i].checked) {
ret = true;
}
}
}
return ret;
}
// 이메일 유효성 체크
function checkEmail(str){
var reg = /^((w|[-.])+)@((w|[-.])+).([A-Za-z]+)$/;
if (str.search(reg) != -1) {
return true;
}
return false;
}
// 문자 길이 반환 (영문 1byte, 한글 2byte 계산)
function getLen(str) {
var len;
var temp;
len = str.length;
var tot_cnt = 0;
for(k=0;k < len;k++){
temp = str.charAt(k);
if(escape(temp).length > 4)
tot_cnt += 2;
else
tot_cnt++;
}
return tot_cnt;
}
// 대문자 변환 ex) toUpperCase(문자)
function toUpperCase(str) {
var ret;
str != null ? ret = str.toUpperCase() : ret = "";
return ret;
}
위의 스크립트를 이용해서 실제로 HTML에 적용시킬때이다.
<script language="javascript" src="frmCheck.js"></script>
<script language="javascript">
function goSubmitProc(f) {
// 폼 검증 함수 실행
if (checkForm(f)) {
alert("Submit 한다");
}
return false;
}
</script>
<h3>폼 검증 함수 사용</h3>
<form name="frm" method="post" onsubmit="return goSubmitProc(this)">
<table>
<tr>
<td width="200">필수입력</td>
<td><input type="text" name="txtName" msg="이름을"></td>
</tr>
<tr>
<td>필수입력 + 숫자만</td>
<td><input type="text" name="year" msg="년도를" chknum></td>
</tr>
<tr>
<td>숫자만 + 최대값(12) + 최소값(3)</td>
<td><input type="text" name="month" maxnum="12" minnum="3" chknum></td>
</tr>
<tr>
<td>최대글자수(16) + 최소글자수(6)</td>
<td><input type="text" name="id" maxlen="16" minlen="6"></td>
</tr>
<tr>
<td>이메일체크</td>
<td><input type="text" name="email" chkmail></td>
</tr>
<tr>
<td>필수입력</td>
<td>
<select name="day" msg="일자를">
<option value="">- 선택 -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr>
<td>필수입력</td>
<td>
<input type="radio" name="sex" value="m" msg="성별을">M
<input type="radio" name="sex" value="F" msg="성별을">F
</td>
</tr>
<tr>
<td>필수입력</td>
<td>
<textarea name="content" cols="60" rows="5" msg="내용을"></textarea>
</td>
</tr>
</table>
<input type="submit">
</form>
코드보면 알겠지만 폼 검증하는지 안하는지도 모를정도이다. 스크립트 부분에서 단지 checkForm 함수만 실행해서 return 값의 true/false만 받아올뿐이다. 단지 경고창을 띄우기 위해서
<input type="text" name="txtName" msg="이름을">
이런식으로 msg란 속성에 값만 넣어주면 된다.
숫자를 체크하기 위해선
<input type="text" name="year" msg="년도를" chknum>
와 같이 chknum 속성만 지정해 주면 된다.
위의 3개의 에제들과 비교하면 상당한양의 코딩이 줄었다. 그리고 경고창의 문구까지 "~를 입력해주세요" 일정하다. 얼마나 e편한 코드인가 -_-;
사실 이러한 폼 검증 스크립트 방식은 당연히 내가처음이 아니다 나는 단지 이것 저것 폼검증 관련 함수들 모아서 내 나름대로 편하도록 만든것이다. 이 것보다 더 강력하고 확장성 좋은 폼 검증 함수들도 잘 찾아보면 있다. 그런 부분들은 스스로 공부해나가면 될듯 -_-...
폼 요소 기본값 셋팅해주는 함수
지금까지는 폼검증해주는 스크립트만 다루었는데 마지막으로 DB에 입력된 값을 다시 HTML로 가져올때 상당히 유용한 함수하나를 소개한다. 조금 프로그래밍 해본 사람은 알겠지만 폼의 select 요소나 checkbox, radio 요소들을 DB에 입력된 값을 보여주려 할때 (예를 들자면 수정 액션에서) 상당히 괴롭고 프로그래밍 하기 귀찮음을 알것이다. 이런 부분을 스크립트로 그나마 위의 스크립트 코드에서의 initForm 함수이다. HTML에서의 사용법은 아래와 같다.
폼 기본값 셋팅
<form name="frm2">
<table>
<tr>
<td>Select</td>
<td>
<select name="day" ival="3">
<option value="">- 선택 -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr>
<td>Radio</td>
<td>
<input type="radio" name="sex" value="m" ival="f">M
<input type="radio" name="sex" value="f" ival="f">F
</td>
</tr>
<tr>
<td>CheckBox</td>
<td>
<input type="checkbox" name="a" value="a" ival="a">
<input type="checkbox" name="b" value="b">
</td>
</tr>
</table>
<script>initForm(frm2);</script>
</form>
select 요소를 보면
<select name="day" ival="3">
이런식으로 ival속성에 값을 주었다. 다른 checkbox, radio 부분도 마찬가지로 ival 속성에 값을 주었다. 이 ival 약자는 initial value 란 내 나름대로의 의미의 약자이다 -_-.. 요렇게 지정한후에 폼 아래에서
<script>initForm(frm2);</script>
이렇게 스크립트 코드 한줄 추가하면 이 initForm 함수에서 이 ival에 있는 값으로 각 폼요소의 값들을 바꿔준다.
지금까지 폼 검증 방법과 함수 이용, 폼의 기본값 쉽게 셋팅해주는 방법에 대해서 알아봤다. 역시나 개발자는 귀차니즘에 있어야한다. 너무 부지런하면 일일이 손수 코딩해서 1000타로 가는 즐거움을 느낄수 있겠지만 그만큼 노는시간이 줄어들것이다.
댓글목록
등록된 댓글이 없습니다.
