<form name="frmTest">
<!-- 이름은 한글이 포함된 문자열이 반드시 필요하다-->
<input name='name' id='name:m:h' type='text' alt="이름">
<!-- 나이는 반드시 필요하지는 않지만 입력되었다면 0 ~ 999 범위내어서 입력가능하다.(정규식사용) -->
<input name='age' id='age:/^\d{1,3}$/i' type='text' alt="나이">
<!-- 이메일은 반드시 필요하지는 않지만 입력되었다면 올바른 이메일 형식으로 입력해야한다. -->
<input name='email' id='email:e' type='text' alt="이메일">
</form>
[체크방법]
<script language="javascript">
// Validation 체크 -- 한줄로 끝....^^
if (!new Validation(document.frmTest).checkAll()) return;
...
...
...
</script>
======================================================================================
//***********************************************************
//** Form의 Validation을 체크한다.
//**
//** - pyukcho (pyukcho@gmail.com)
//** --------------------------------------------------------
// ** - 2006/07/14 - name 대신 id를 사용하게 변경
// ** - 2006/08/16 - ajax post를 위한 checkbox 값 처리 변경
//************************************************************
function Validation(formObj) {
this.form = formObj; // 대상폼 폼
this.postStr = "";
// 내부 메세지 설정
this.message = new Dictionary();
this.message.put( "m" , "반드시 입력해야 하는 값입니다.");
this.message.put( "/" , "입력값이 지정된 형식과 일치 하지 않습니다.");
this.message.put( "f" , "입력값이 실수형이 아닙니다.");
this.message.put( "i" , "입력값이 정수형이 아닙니다.");
this.message.put( "l" , "입력값이 Long형이 아닙니다.");
this.message.put( "H" , "입력값은 한글을 포함할 수 없습니다.");
this.message.put( "h" , "입력값은 한글이 포함되어 있지 않습니다.");
this.message.put( "e" , "Email 형식이 올바르지 않습니다.");
this.message.put( "y" , "년도 형식이 올바르지 않습니다.");
this.message.put( "d" , "날짜형식이 올바르지 않습니다.");
// form Object를 Ajax로 전달하기 위해서 폼객체를 UTF8로 인코딩된 str 형태로 반경한다.
this.getFormToPost = function() {
return this.postStr;
}
// 전체 폼 체크
this.checkAll = function () {
return this.checkAllInput() && this.checkAllSelect() && this.checkAllTextarea();
}
// <input type="text"> 체크
this.checkAllInput = function () {
for (var i=0; i< this.form.elements.length; i++) {
if (this.form.elements[i].tagName == "INPUT") {
if ( !this.checkObject(this.form.elements[i])) return false;
}
// Ajax에서 사용할 Post 값을 설정
var flag = true;
var objValue= this.form.elements[i].value;
if(this.form.elements[i].tagName == "INPUT" && this.form.elements[i].type == "radio") {
flag = this.form.elements[i].checked ? true : false;
} else if (this.form.elements[i].tagName == "INPUT" && this.form.elements[i].type == "checkbox") {
flag = this.form.elements[i].checked ? true : false;
// objValue = flag ? "Y" : "N";
}
this.postStr += flag ? this.form.elements[i].name + "=" + encodeURIComponent(objValue) + "&" : "";
}
return true;
}
this.checkAllSelect = function () {
for (var i=0; i< this.form.elements.length; i++) {
if (this.form.elements[i].tagName == "SELECT") {
if ( !this.checkObject(this.form.elements[i])) return false;
}
}
return true;
}
this.checkAllTextarea = function () {
for (var i=0; i< this.form.elements.length; i++) {
if (this.form.elements[i].tagName == "TEXTAREA") {
if ( !this.checkObject(this.form.elements[i])) return false;
}
}
return true;
}
// 하나의 입력항목에 대한 체크
this.checkObject = function(eleObj) {
// var lio = eleObj.name.lastIndexOf(":");
// id를 있다면 ID 기반으로 없다면 name 기반으로 옵션 체크를 한다.
var splitName = (isNullObject(eleObj.id) ? eleObj.name.split(":") : eleObj.id.split(":") );
var objValue = eleObj.value;
if (splitName.length > 1) {
// 해당 Object의 validation값 체크
var objValidationFlag = true;
for ( var j = 1; j < splitName.length ; j++) {
switch (splitName[j].charAt(0) ) {
// 필수 입력 처리
case "m":
objValidationFlag = isMandatory(objValue);
break;
// Regular 항목 체크
case "/":
objValidationFlag = isEmpty(objValue) ? true : isSearch(objValue, splitName[j]);
break;
// Float 체크
case "f":
objValidationFlag = isEmpty(objValue) ? true : isFloat(objValue);
break;
// Int 체크
case "i":
objValidationFlag = isEmpty(objValue) ? true : isInt(objValue);
break;
// Long 체크
case "l":
objValidationFlag = isEmpty(objValue) ? true : isLong(objValue);
break;
// 한글이 포함되어 있는가 검사
case "h":
objValidationFlag = isEmpty(objValue) ? true : isHangul(objValue);
break;
// 한글이 포함되어 있지 않은가 체크
case "H":
objValidationFlag = isEmpty(objValue) ? true : !isHangul(objValue);
break;
// Email 체크
case "e":
objValidationFlag = isEmpty(objValue) ? true : isEmail(objValue);
break;
// 년도체크
case "y":
objValidationFlag = isEmpty(objValue) ? true : isYear(objValue);
break;
// 날짜체크
case "d":
objValidationFlag = isEmpty(objValue) ? true : isDate(objValue);
break;
}
if(!objValidationFlag) {
var msg = "[" + (isNullObject(eleObj.alt) ? splitName[0] : eleObj.alt) + "]";
msg += " 필드 => \n" + this.message.get(splitName[j].charAt(0));
alert(msg);
try{eleObj.focus();} catch (e) {}
return false;
}
}
// 존재하는가 체크
var intendedObj = document.getElementsByName(splitName[0])[0];
if (isNullObject(intendedObj)) {
// input 타입의 새로운 객체 생성
var newObj = document.createElement("INPUT");
newObj.type = "hidden";
newObj.name = splitName[0];
newObj.id = splitName[0];
newObj.value = objValue
this.form.appendChild(newObj);
} else {
// TODO: 동일 이름의 객체가 두개 이상일 수 있다.
// - 지금은 하나만 만든다.
intendedObj.value = objValue
}
}
return true;
}
}
//***********************************************************
//** 각종 Validation 체크 함수
//***********************************************************
function check_m(el) {
return isMandatory(el) ;
}
function isMandatory(el) {
return (el == "" || el == null) ? false : true;
}
function isSearch(el, pattern) {
eval("var fm = " + pattern + ";");
var p = el.search(fm);
return (p == -1 ? false : true);
}
function isFloat(el) {
if (isNaN(parseFloat(el))) {
return false;
}
return true;
}
function isInt(el) {
if (isNaN(parseInt(el)) ||
(parseInt(el) != parseFloat(el))) {
return false;
}
return true;
}
function isLong( el) {
return isInt(el);
}
function isNullObject(el){
return (el == "undefined" || el==null) ? true : false;
}
function isEmpty(el){
return ( el == null || el == "" ) ? true : false;
}
function isEmail(el) {
var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i
return (el.search(filter) == -1 ? false : true);
}
// 한글 체크하는것이 아니라 유니코드체크하는것이네.. 쩝.. ^^;;
// 머 크게 문제는 없겠지...
function isHangul(el) {
return (escape(el).search(/%u/i) == -1 ? false : true );
}
function trim(str){
return str.replace(/(^\s*)|(\s*$)/ig, "");
}
function isYear(str) {
return isSearch(str, "/^\d{0,4}$/i"); // <- /^\d{4}$/i
}
function isDate(str) {
return isSearch(str, "/^(\d{1,4})\\/((0[1-9])|(1[0-2]))\\/((0[1-9])|([1-2][0-9])|(3[0-1]))$/i");
}
'JAVA HTML JAVASCRIPT > 소오스' 카테고리의 다른 글
jQuery / Method / .find() (0) | 2020.03.20 |
---|---|
유효성검사(validation), 데이터 바인딩, 타입 변환 (0) | 2020.03.12 |
spring - Maven 을 이용한 프로젝트 생성 및 활용(3) (0) | 2020.02.26 |
spring - Maven 을 이용한 프로젝트 생성 및 활용(2) (0) | 2020.02.26 |
spring - Maven 을 이용한 프로젝트 생성 및 활용(1) (0) | 2020.02.26 |