form 유효성 검사

2022. 2. 7. 11:50ㆍStudy/PHP&MySQL

form을 이용한 회원가입 시 사용되는 유효성 검사

버튼 타입 submit 사용 시, 버튼을 클릭하지 않아도 체크할 수 있으며 input에 required를 넣어주면 좋다.

 

 

 

insert.php

<meta charset="utf-8">

<?
    echo "전송이 완료되었습니다.<br>";

    // echo  $_POST["idname"]." 입니다.<br>";
    // echo  $_POST["pass"]." 입니다.<br>";
?>

 

ex1.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form검사</title>
    <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 (!document.member_form.pass.value){  // value 값이 false면 (없으면)
                alert("비밀번호를 입력하세요");    
                document.member_form.pass.focus();
                return false;   // 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">
        <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>
    
</body>
</html>

 

ex2.html (정규식표현)

문자열.chaAt(index) 문자열에서 인덱스에 해당하는 문자 하나를 리턴
문자열.search() 문자열에서 괄호 안의 값이 있는지 검색하여 값이 있으면 0을 리턴,
없으면 -1을 리턴
/[0-9}a-z|A-Z|ㄱ-ㅎ|ㅏ-ㅣ|가-힝]/ 한글, 영문, 숫자를 표현하는 정규식 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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); // charAt(index) 해당 인덱스의 글자 1개를 빼낸다.

            if(ls_one_char.search(/[0-9|a-z|A-Z|ㄱ-ㅎ|ㅏ-ㅣ|가-힝]/) == -1) { // 문자열 search(숫자,영문,한글)인지 검색
                count++; // 숫자, 영문, 한글을 입력하지 않았으면 count 1
            }
        }
        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()" required> 
                * 한글+영문+숫자만 입력가능
            </li>
            <li>
                <input type="submit" value="전송" >
            </li>
        </ul>
    </form>
</body>
</html>

 

ex3.html (이메일 검사)

문자열.indexOf("@"); 문자열에서 특정 문자를 찾아 그 인덱스 번호를 리턴,
해당 문자가 없으면 -1이 리턴된다
문자열.lastIndexOf("."); indexOf와 같지만 뒤에서부터 찾는다. (인덱스번호는 동일) 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form검사</title>
    <script>
        function check_input(){ //저장하기 버튼 클릭시 검사
        
            var emailID = document.member_form.email.value;
            
            // null값 처리 (필수항목 처리)
            if(!emailID){
                alert("이메일을 입력하세요");
                document.member_form.email.focus();
                return false;
            }
            
            //문자열에서 특정문자를 찾아서 인덱스 반환 0부터, 없으면 -1을 반환
            atpos = emailID.indexOf("@");

            //문자열에서 특정문자를 뒤에서부터 찾아서 인덱스 반환
            dotpos = emailID.lastIndexOf(".");

            if (atpos < 1 || dotpos < 3 ){  // 아이디나 도메인주소를 안쓴 경우를 방지하기 위해
                alert("Please enter correct email ID");
                document.member_form.email.focus() ; 
                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" required>
            </li>

            <li>
                <input type="button" value="전송" onclick="check_input()">
            </li>
        </ul>
    </form>
</body>
</html>

 

ex4.html (매개변수, 키보드 키값(아스키코드))

모든 문자들은 그 해당 문자의 아스키코드값(10진수)을 가지고 있다.

ASCII (American standard code for information interchange code)란 미국 표준 정보교환 코드로 컴퓨터 내부에서 문자를 표현하는데 사용된다.

  • A(65) ~ Z (90)
  • a(97) ~ z(122)
  • 0(48) ~ 9(57)
  • @(64), #(35), $(36)
문자열.charCodeAt(index); 문자열의 해당 인덱스값의 문자를 아스키코드값으로 반환
문자열.formCharCode(아스키코드값); 아스키코드값을 받아 문자열로 반환 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form검사</title>
    <script>

        function onlyEng(objtext1) {
            var inText = objtext1.value; // 아이디 입력값
            var ret;

            for (var i = 0; i < inText.length; i++) {
                ret = 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)) {
                if( !((ret >= 48 && ret >= 57) || (ret >=65 && ret <= 90) || (ret >=97 && ret <= 122) || (ret == 64) || (ret == 35) || (ret == 36) || (inText.length > 8) ) ){
                    // 한글,특수문자 허용않음
                    alert("영문자와 숫자, @, #, $ 만을 입력하세요\n한글과 다른 특수문자는 안됩니다.\n8자 이내로 입력하세요");
                    objtext1.value = "";
                    objtext1.focus();
                    return false;
                }
            }
            return true;
        }
        
        </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);" required>
                *영문자와 숫자, @, #, $ 만을 입력하세요, 8자 이내로 입력하세요
            </li>

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

 

 

 

 

 

'Study > PHP&MySQL' 카테고리의 다른 글

MySQL 명령어, DB Table  (0) 2022.02.08
get / post  (0) 2022.02.08
php 배열과 함수  (0) 2022.02.04
php 기본문법  (0) 2022.02.04
XAMPP MySQL 새로운 계정 생성하기  (0) 2022.02.03

관련글

댓글 0

티스토리툴바