2013년 11월 26일 화요일

입력값 검사 Java Script

회원등록 폼이나 기타 다른 입력폼에서 필수입력값이나
사용자가 입력한 값을 검사 하는 스크립트입니다.
함수화를 해서 두고 두고 써먹을 수 있으며,
정규표현식 검사를 지정해 줄수 있기 때문에,
편리합니다.

코드를 변경할 필요가 없으며, select 필드도 선택을 했는지 검사 할수
있습니다.

사용자가 *반/드/시* 변경해야할 부분은 ㉠ ~ ㉤ 까지의 부분입니다.

㉠ 은 form 의 이름입니다.
㉡ 은 정규표현식 패턴검사할 목록입니다. (필드 이름과 표현식은 = 으로 구분되며 필드의 구분은 , 로 구분합니다.)
㉢ 은 널값 즉 공백이나 빈값으로 입력되었는지 검사하는 필드의 목록 (마찬가지 , 로 구분)
㉣ 은 필드이름의 배열로 반드시 존재해야 하며, 필드이름 과 경고창에서의
한글로 표시될 필드의 이름 배열입니다. (필드 이름과 표현식은 = 으로 구분되며 필드의 구분은 , 로 구분합니다.)
㉤ 은 select 필드 의 선택검사 부분입니다. (, 로 구분됩니다.)

주의) 코드의 다른 부분은 변경하지 않아도 되구여, 다만 필드의 배열을
정확히 해주어야 합니다. 한개라도 없는 필드이거나, 철자가 틀리면
에러납니다.

참고) ㉠㉡㉢㉤ 은 옵션이며, ㉣ 은 반드시 존재해야 합니다.

적용) 폼태그에 다음과 같이 걸어주면, 설정해준 대로 검사를 하게됩니다.
<form name="..." onsubmit="return condition_value_chk()">


예제 코드)
<script>

// 필수입력값 검사 함수
function condition_value_chk() {
㉠// 폼이름
var form_name = "confirm";

㉡// 패턴검사 목록
var patten_chk = "social1=^[0-9]{6}$,social2=^[0-9]{7}$,email=^[_0-9a-zA-Z-]+(\.[_0-9a-zA-Z-]+)*@[0-9a-zA-Z-]+(\.[0-9a-zA-Z]+)*$";
㉢// 널값 검사 목록
var not_null = "user_name,social1,social2,email";

㉣// 필드이름 배열
var fields = "user_name=이름,social1=주민등록번호 앞자리,social2=주민등록번호 뒷자리,email=이메일 주소";

㉤// 리스트 널값 검사 목록
var not_null_radio = "job";

// 필드배열 생성
if (typeof fields != "undefined") {
var f_arr = fields.split(/,/);
var map = new Array();
for (i in f_arr) {
temp = f_arr[i].split(/\s*=\s*/);
key = temp[0];
val = temp[1];
map[key] = val;
}
}

// 공백필드 검사
if (typeof not_null != "undefined") {
nulls = not_null.split(/,/);
for (i in nulls) {
temp = nulls[i];
myform = eval('document.' + form_name + '.' + temp);
str = myform.value.replace(/\s*/, "");
if (str == "") {
myalert(map[temp], "필수항목이므로 생략할 수 없습니다.\n\n정확히 입력해주세요.");
myform.focus();
return false;
exit;
}
}
}

// 패턴검사
if (typeof patten_chk != "undefined") {
pattens = patten_chk.split(/,/);
for (i in pattens) {
temp = pattens[i].split(/\s*=\s*/);
key = temp[0];
val = temp[1];
val = eval('/'+ val + '/');
myform = eval('document.' + form_name + '.' + key);
str = myform.value;
if (!str.match(val)) {
myalert(map[key], "입력 값 오류 입니다. \n\n정확한 값을 입력해 주세요.");
myform.focus();
return false;
exit;
}
}
}

// 리스트 널 값 검사
if (typeof not_null_radio != "undefined") {
radios = not_null_radio.split(/,/);
for (i in radios) {
temp = radios[i];
myform = eval('document.' + form_name + '.' + temp);
str = myform.options[myform.selectedIndex].value.replace(/\s*/, "");
if (str == "") {
myalert(map[temp], "필수항목이므로 생략할 수 없습니다.\n\n한가지 항목을 선택해주세요.");
myform.focus();
return false;
exit;
}
}
}

return true;
}

function myalert(field, msg) {
alert("입력 항목 - " + field + "\n\n" + msg);
}

</script>

댓글 없음:

댓글 쓰기