보관함
즐겨찾기
좋아요
최근목록
커뮤니티
건강/의학
문화/엔터
영상/사진
쇼핑/생활
경제/금융
IT/과학
스포츠
여행
음식/요리/맛집
유아/아동
교육/학습
어플/프로그램
유튜브
카페
블로그
자료/파일/문서공유
기타
전체보기
전체개요
 
회사명 : 모아요넷
대표자 : 전현미
조회수:182

폼입력시 필수 입력사항을 간단하게 제작하는 방법입니다

0
폼입력시 필수 입력사항을 간단하게 제작하는 방법입니다

폼 양식을 작성할때 아이디,이메일,이름 작성할때

입력되지 않은경우 

아이디를 입력하세요

이메일을 입력하세요

이름을 입력하세요 라는 필수 입력사항을 만들때 사용하는 방법입니다

if 문으로 value값의 유무를 통해서 작업할수 있지만

그렇게 하지 않고

입력양식에 요소를 추가 하여 처리 하는 방법입니다

 

writeSubmit(form) 함수를 활용합니다

입력하는 곳에는

<input type="text" name="user_id" value="" s_required itemname="아이디">

이렇게 s_required itemname="아이디" 요소를 추가 하면 됩니다

<script>
/******************************************************************/
/* 폼 체크를 위한 함수시작       */
/******************************************************************/
function writeSubmit(form){
var arrAttr  = new Array ("s_required", "trim", "minlength", "email", "nospace");
    wrestMsg = "";
    wrestFld = null;
    var attr = null;

    // 해당폼에 대한 요소의 갯수만큼 돌려라
    for (var i = 0; i < form.elements.length; i++) {
// Input tag 의 type 이 text, file, password 일때만
        if (form.elements[i].type == "text" || 
form.elements[i].type == "file" || 
            form.elements[i].type == "password" ||
form.elements[i].type == "select-one" || 
            form.elements[i].type == "textarea") {
            // 배열의 길이만큼 돌려라
            for (var j = 0; j < arrAttr.length; j++) {
// 배열에 정의한 속성과 비교해서 속성이 있거나 값이 있다면
                if (form.elements[i].getAttribute(arrAttr[j]) != null) {
switch (arrAttr[j]) {
case "s_required"  : wrestRequired(form.elements[i]); break;
                        case "trim"      : wrestRequired(form.elements[i]); break;
                        case "minlength" : wrestMinlength(form.elements[i]); break;
                        case "email"     : wrestEmail(form.elements[i]); break;
                        case "nospace"   : wrestNospace(form.elements[i]); break;
                        default : break;
                    }
                }
            }
        }
}

    // 필드가 null 이 아니라면 오류메세지 출력후 포커스를 해당 오류 필드로 옮김
    // 오류 필드는 배경색상을 바꾼다.
    if (wrestFld != null) {
alert(wrestMsg);
//      wrestFld.style.backgroundColor = wrestFldBackColor;
        try{wrestFld.focus();}catch(e){}
        return false;
    }

    if (form.oldsubmit && form.oldsubmit() == false)  {
return false;
    }

    return true;
}

function wrestItemname(fld){
        var itemname = fld.getAttribute("itemname");
        if (itemname != null && itemname != "")
            return itemname;
        else
            return fld.name;
}

// 양쪽 공백 없애기
function wrestTrim(fld){
var pattern = /(^s*)|(s*$)/g; // s 공백 문자
    fld.value = fld.value.replace(pattern, "");
    return fld.value;
}

function wrestRequired(fld){
if (wrestTrim(fld) == "") {
if (wrestFld == null) {
if(fld.type == "select-one"){
wrestMsg = wrestItemname(fld) + "을(를) 선택해주세요.
";
}else{
wrestMsg = wrestItemname(fld) + "는(은) 필수 입력사항입니다.
";
}
wrestFld = fld;
}
    }
}

    // 최소 길이 검사
function wrestMinlength(fld){
var len = fld.getAttribute("minlength");
    if (fld.value.length < len) {
if (wrestFld == null) {
wrestMsg = wrestItemname(fld) + "는(은) 최소 " + len + "자 이상 입력하세요.
";
            wrestFld = fld;
        }
    }
}

// 전자메일주소 형식 검사
function wrestEmail(fld){
    if (!wrestTrim(fld)) return;
//var pattern = /(S+)@(S+).(S+)/; 전자메일주소에 한글 사용시
    var pattern = /([0-9a-zA-Z_-]+)@([0-9a-zA-Z_-]+).([0-9a-zA-Z_-]+)/;
if (!pattern.test(fld.value)) {
if (wrestFld == null) {
wrestMsg = wrestItemname(fld) + "는(은) 전자메일주소 형식이 아닙니다.
";
                wrestFld = fld;
            
        }
    }
}
/******************************************************************/
/* 폼 체크를 위한 함수 끝       */
/******************************************************************/
</script>
<script>
    function WRITE(){
        var form=document.form;
        if(writeSubmit(form)==false){
            return;
        }
        form.submit();
        
    }
</script>
<?=$user_id?>
<form name="form" method="post" action="<?=$_SERVER[PHP_SELF]?>" enctype="multipart/form-data">
    <div>아이디</div>
    <div><input type="text" name="user_id" value="" s_required itemname="아이디"></div>
    <div><input type="text" name="user_id1" value="" s_required itemname="아이디1"></div>
    <div><input type="text" name="user_id2" value="" s_required itemname="아이디2"></div>
    <div><input type="button" value="보내기" onclick="WRITE()"></div>
</form>
유사한정보
자바스크립트 object 관려 내용을 json 형식으로 확인하는 방법  Jquery 프로그램 소스
자바스크립트 object 관려 내용을 json 형식으로 확인하는 방법
0
자바스크립트 object 관려 내용을 json 형식으로 확인하는 방법
0
페이지 뷰에서 확대 축소할때 확대되거나 축소된 크기를 반환하는 이벤트  Jquery 프로그램 소스
페이지 뷰에서 확대 축소할때 확대되거나 축소된 크기를 반환하는 이벤트
0
페이지 뷰에서 확대 축소할때 확대되거나 축소된 크기를 반환하는 이벤트
0
input text에서 onchange 같은 이벤튼  Jquery 프로그램 소스
input text에서 onchange 같은 이벤튼
0
input text에서 onchange 같은 이벤튼
0
아이디로 스크롤 부드럽게 이동하게 하는 방법  Jquery 프로그램 소스
아이디로 스크롤 부드럽게 이동하게 하는 방법
0
아이디로 스크롤 부드럽게 이동하게 하는 방법
0
리스너 형탱로 클릭이벤트 호출하는 방법 Jquery 프로그램 소스
리스너 형태로 클릭이벤트 호출하는 방법
0
리스너 형태로 클릭이벤트 호출하는 방법
0
스타일 여러게를 한꺼번에 변경하는 방법  Jquery 프로그램 소스
스타일 여러게를 한꺼번에 변경하는 방법
0
스타일 여러게를 한꺼번에 변경하는 방법
0
프레임이 여러게 있는경우 접근하는 방법  Jquery 프로그램 소스
프레임이 여러게 있는경우 접근하는 방법
0
프레임이 여러게 있는경우 접근하는 방법
0
체크시 텍스트 문구 변경하는 방법  Jquery 프로그램 소스
체크시 텍스트 문구 변경하는 방법
0
체크시 텍스트 문구 변경하는 방법
0
태그의 노드(node) 접근하는 방법  Jquery 프로그램 소스
태그의 노드(node) 접근하는 방법
0
태그의 노드(node) 접근하는 방법
0
0
0
투명하게 변경하기 위한 방법 fadeTo  Jquery 프로그램 소스
투명하게 변경하기 위한 방법 fadeTo
0
투명하게 변경하기 위한 방법 fadeTo
0
0
0
show() blind사용할때 상하좌우 블라인드 되게 처리하는 방법  Jquery 프로그램 소스
show() blind사용할때 상하좌우 블라인드 되게 처리하는 방법
0
show() blind사용할때 상하좌우 블라인드 되게 처리하는 방법
0
부모창에서 자식창(iframe)에 변수,함수 접근하는 방법  Jquery 프로그램 소스
부모창에서 자식창(iframe)에 변수,함수 접근하는 방법
0
부모창에서 자식창(iframe)에 변수,함수 접근하는 방법
0
display가 none인지 display인지 알아내는 방법  Jquery 프로그램 소스
display가 none인지 display인지 알아내는 방법
0
display가 none인지 display인지 알아내는 방법
0
블루비  자바스크립트 CSS HTML 이미지슬라이드 갤러리 소스 웹소스 프로그램소스 프로그램
웹프로그램(HTML, 자바스크립트, CSS, Ajax, Jquery 등) 관련 소스를 다운로드 받을
0
웹프로그램(HTML, 자바스크립트, CSS, Ajax, Jquery 등) 관련 소스를 다운로드 받을
0
드림코딩 코딩 프로그램 개발 소스
유튜브 채널로 프로그램 코딩 관련 공부를 할수 있는 채널입니다
0
유튜브 채널로 프로그램 코딩 관련 공부를 할수 있는 채널입니다
0
단순 텍스트를 이미지로 만드는 방법 (텍스트 이미지 만들기)  PHP 프로그램 소스
단순 텍스트를 이미지로 만드는 방법 (텍스트 이미지 만들기)
0
단순 텍스트를 이미지로 만드는 방법 (텍스트 이미지 만들기)
0