php <form> 유효성 검사 , 아스키코드, get , post

2022. 11. 8. 12:31ㆍphp

1. 필수항목 처리/문자열의 길이

전송버튼의 type 값이 submit 이 아닌 이유는 onclick에 값으로 javascript 검사 시스템을 적용시켰기 때문이다.

type 값을 submit 으로 적용할 경우 script function을 적용해도 바로 전송처리된다.

<head>
<script>
 function check_input()    //저장하기 버튼 클릭시 검사
   {
       if (!document.member_form.idname.value || document.member_form.idname.value.length>8
	   || document.member_form.idname.value.indexOf(" ")>-1)   //아이디 필수항목 처리
      {
          alert("아이디를 입력하세요");  
		  document.member_form.idname.value=null;  
          document.member_form.idname.focus();   //커서를 아이디 텍스트 박스에 위치한다.
          return false; // if문 에 return false 로 나머지 if문을 계산하기 전에 function을 빠져나간다
      }

      if (!document.member_form.pass.value)  //패스워드 필수항목 처리
      {
          alert("비밀번호를 입력하세요");    
          document.member_form.pass.focus();
          return false;
      }

      if (!document.member_form.pass2.value)  //패스워드 재입력 필수항목 처리
      {
          alert("비밀번호확인을 입력하세요");    
          document.member_form.pass2.focus();
          return false;
      }

      if (document.member_form.pass.value != 
            document.member_form.pass2.value)    
			// 패스워드와 패스워드 재확인이 동일하지 않으지 검사
      {
          alert("비밀번호가 일치하지 않습니다.\n다시 입력해주세요.");    
          document.member_form.pass.focus();
          document.member_form.pass.select();  //입력했던 비밀번호를 미리 선택해 준다.
          return false;
      }

      document.member_form.submit();  // form의 action 속성에 명시된 insert.php로 이동한다.
   }
</script>
</head>

<body>
   <form name="member_form" action="insert.php" method="post"> <!-- action="" 전송 타켓 파일 -->
     <ul>
      <li>
          <label for="idname">아이디</label>
          <input type="text" id="idname" name="idname"> *8자 이내로 만들어주세요
      </li>
      <li>
          <label for="pass">패스워드</label>
          <input type="text" id="pass" name="pass">
      </li>
      <li>
          <label for="pass2">패스워드 재확인</label>
          <input type="text" id="pass2" name="pass2">
      </li>
      <li>
      	 <input type="button" value="전송" onclick="check_input()">
      </li>
     </ul>
   </form>

코드해석

document.member_form.idname.value.indexOf(" ")>-1

문서의 member_form 안에 idname 안에 value(값) 의 indexOf(" ") ( 띄어쓰기 값의 위치를 index 값으로 찾는다 ) >-1 ( 그 위치의 index 값이 -1 보다 클때 ( 존재할때) ) 

=> document.member_form.idname.value 안에 띄어쓰기 값이 존재할 때

2.정규 표현식

숫자, 영어,한글 = /[0-9|a-z|A-Z|ㄱ-ㅎ|ㅏ-ㅣ|가-힝]/

<head>
<meta charset="utf-8">
<title>form검사</title>
<script>
 function check_input(){
  tvalue = document.member_form.idname;
  onvalue = tvalue.value;
  
  count=0;
  for (i=0;i<onvalue.length;i++){
    ls_one_char = onvalue.charAt(i);

    if(ls_one_char.search(/[0-9|a-z|A-Z|ㄱ-ㅎ|ㅏ-ㅣ|가-힝]/) == -1) {
       count++;
    }
  }
  if(count!=0) {
    alert("검색시 숫자, 영문, 한글만 사용 가능 \n 다시입력하세요.") ;
    tvalue.value = "";
    tvalue.focus();
    return false;
  }
 }
</script>
</head>

<body>
   <form name="member_form" action="insert.php" method="post">
     <ul>
      <li>
          <label for="idname">아이디</label>
          <input type="text" id="idname" name="idname" onkeyup="return check_input()"> <!-- onkeyup -> 키보드를 눌럿다 뗄 때 이벤트 -- > 
          * 한글+영문+숫자만 입력가능
      </li>
      <li>
      	 <input type="submit" value="전송" >
      </li>
     </ul>
   </form>
</body>

3. email 검사

<head>
<meta charset="utf-8">
<title>form검사</title>
<script>
 function check_input()    //저장하기 버튼 클릭시 검사
   {
     var emailID = document.member_form.email.value;
     atpos = emailID.indexOf("@");  //문자열에서 특정문자를 찾아서 인덱스 반환 0부터
	 //alert(atpos);
     dotpos = emailID.lastIndexOf("."); //문자열에서 특정문자를 뒤에서부터 찾아서 인덱스 반환
        //alert(dotpos);
     if (atpos < 1 || dotpos < 3 || !emailID) 
   {
       alert("Please enter correct email ID");
       document.member_form.email.focus(); 
       document.member_form.email.value = ''; 
       return false;
   }
      document.member_form.submit();  // form의 action 속성에 명시된 insert.php로 이동한다.
   }
</script>
</head>

<body>
   <form name="member_form" action="insert.php" method="post">
     <ul>
      <li>
          <label for="idname">이메일</label>
          <input type="text" id="email" name="email"> 
      </li>
    
      <li>
      	 <input type="button" value="전송" onclick="check_input()">
      </li>
     </ul>
   </form>
</body>

4. 아스키코드 ( 키보드에 존재하는 버튼, 입력값을 숫자로 나타낸것 )

  • a~z : 97~122
  • A~z : 65~90
  • 0~9 : 48~57
  • @(64) #(65) $(66)
  • 스페이스바 : 32

5. 한글과 숫자만 입력 가능

<head>
<meta charset="utf-8">
<title>form검사</title>
<script>

function onlyEng(objtext1) {
   var inText = objtext1.value;
   var ret;
   //alert(inText.charCodeAt(0));
   for (var i = 0; i < inText.length; i++) {
       ret = inText.charCodeAt(i);  //키보드 키값(아스키코드) i 번째에 존재하는 문자열의 아스키 코드값을 리턴
	   //alert(inText.charCodeAt(i));
       // if ((ret < 48) || (ret > 57 && ret < 65) || (ret > 90 && ret < 97)) { // 한글은 허용
      if ((ret > 122) || (ret < 48) || (ret > 57 && ret < 65) || (ret > 90 && ret < 97)) { 
	   // 한글,특수문자 허용않음
          alert("영문자와 숫자만을 입력하세요\n\n한글과 특수문자는 안됩니다.");
          objtext1.value = "";
          objtext1.focus();
          return false;
      }
   }
}


</script>
</head>

<body>
   <form name="member_form" action="insert.php" method="post">
     <ul>
      <li>
          <label for="idname">아이디</label>
          <input type="text" id="idname" name="idname" onkeyup="onlyEng(member_form.idname);"> *영문과 숫자만 입력
      </li>

      <li>
      	 <input type="submit" value="전송" onclick="">
      </li>
     </ul>
   </form>
</body>

6. get, post

  • get 의 경우 전송되는 data의 값이 url 에 표시된다 ( 쇼핑몰 사이트의 주소 링크가 긴 이유 )
  • post 의 경우 전송되는 data의 값이 url 에  표시되지 않는다.
  • data 값을 받을 때 $_REQUEST 를 사용하면 두가지 방식 모두 data를 받을 수 있다.

사용하지 않음

php.ini  파일의 register_globals = On 으로 수정하면.

get/post로 넘어온 변수를 바로 사용할 수 있다.

<?
  echo  $idname." 입니다.<br>";
  echo  $pass." 입니다.<br>";
?>

6-1 get 방식으로 변수 값을 넘길때.

<a href="insert.php?a=1&b=apple">처리</a>

<?
  echo  $_GET["a"]." 입니다.<br>";
  echo  $_GET["b"]." 입니다.<br>";
?>

 

'php' 카테고리의 다른 글

PHP API 함수로 데이터 불러오기  (0) 2022.11.11
php 2차원 배열과 문자열 내장함수 / 전역변수와 정적변수  (0) 2022.11.07
php 기본 문법과 제어문  (0) 2022.11.07

관련글

티스토리툴바