본문 바로가기
JavaScript

JavaScript 회원가입(정규식, 서명, 별명, CKEditor5(자기소개))

by code2772 2022. 11. 28.

[ 목차 ]

    728x90
    반응형

    ✔ 전체 화면 

    ✔ HTML 

    <!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>회원가입</title>
    <script defer src="./js/script.js"></script>
    <link rel="stylesheet" href="./css/style.css">

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>



<!-- 버튼작업인 submit 발생 경우 js 파일에서 sendit()함수를 실행하여 조건을 확인하는 부분 -->
<!-- 버튼 같은거는 서브밋 -->
</head>
<body>
<h2 style="display:inline ;">* 회원가입</h2><h4 style="display:inline ;color: red;"> - 아래 필수 입력사항을 모두 입력해 주십시요.</h4>
<hr style="background-color: orange; height: 2px; border: 0;">
<form action="./regist.jsp" name="regform" id="regform" method="post" onsubmit="return sendit()">

<p>아이디 <input type="text" name = "userid" id = "userid" maxlength="20"> 최소 3자이상 입력하세요.</span></p>
<div style="margin-left: 150px;">* 영문자, 숫자,_만 입력 가능, 최소 3자이상 입력하세요</div>
<hr>
<p>패스워드 <input type="password" name = "userpw" id = "userpw" maxlength="20"> </p>
<hr>
<p>패스워드 확인 <input type="password" name = "userpw_re" id = "userpw_re" maxlength="20"> </p>
<hr>
<p>이름 <input type="text" name="name" id="name"> *공백없이 한글만 입력 가능</p>
<hr>
<p>별명 <input type="text" name="char" id="char"></p>
<div style="margin-left: 150px;">*공백없이 한글, 영문, 숫자만 입력가능 (한글2자, 영문자 4자 이상) <br>
*별명을 바꾸시면 앞으로 60일 이내에는 변경할 수 없습니다.</div>
<hr>
<p>이메일 : <input type="text" name="email" id="email"></p>
<hr>
<p>생년월일 <input type="date" name="date" id="date"></p>
<hr>
<p>성별 <select name="gender" id="gender">
<option value="">선택하세요</option>
<option value="남자">남자</option>
<option value="여자">여자</option>
</select></p>
<hr>
<p>전화번호 <input type="text" name="hp" id="hp"></p>
<hr>
<p>핸드폰번호 <input type="text" name="hp1" id="hp1"></p>
<hr>
<p>주소 <input type="text" name="zipcode" maxlength="5" id="sample6_postcode"style="width: 100px;" >-<input type="text" name="address1" id="sample6_address" style="width: 100px;"><button onclick="sample6_execDaumPostcode()" type="button" >우편번호검색</button></p>
<p> <input type="text" name="address3" id="sample6_extraAddress" style="width: 400px;"></p>
<p> <input type="text" name="address2" id="sample6_detailAddress" style="width: 400px;"></p>
<hr>
<p>서명
 <canvas id="drawCanvas" width="500" height="100" style=" position: relative; border: 1px solid #000;"></canvas>
</p>
<hr>
<p> 자기소개<div id="editor"></div>
<script >
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
</p>

<hr>
<p>메일링서비스 <input type="checkbox" id="hobby1" value="등산">정보 메일을 받습니다<p>
<hr>
<p>SMS 수신여부 <input type="checkbox" id="hobby2" value="등산">핸드폰 문자메세지를 받겠습니다.<p>
<hr>
<p>정보공개 <input type="checkbox" id="hobby3" value="등산">다른 분들이 나의 정보를 볼 수 있도록 합니다.<br>
<div style="margin-left: 150px;">정보공개를 바꾸시면 앞으로 0일 이내에는 변경이 안됩니다.</div><p>
<hr>
<p>추천인아이디 <input type="text" name = "rid" id = "rid" maxlength="20"> </p>
<hr>
<p>자동등록방지 <img src="캡처.PNG" style="height:50px ;"> <input type="text" name = "rid1" id = "rid1" maxlength="20"> *왼 쪽의 글자를 입력 </p>
<hr>
<!-- <p>주소 <input type="text" name="sample6_address"></p>

<p>상세주소 <input type="text" name="sample6_detailAddress"></p>
<p>참고사항 <input type="text" name="sample6_extraAddress"></p> -->
<p id="b"><button style="color: orangered ;text-align: center; width:200px;height:50px;font-size: 20px; background-color: orangered; color: white; border-radius: 5%;">확인</button></p>
</form>
</body>
</html>

     

    ✔ CSS

    function sendit(){

    const userid = document.getElementById('userid');
    const userpw = document.getElementById('userpw');
    const userpw_re = document.getElementById('userpw_re')
    const name = document.getElementById('name');
    const hp = document.getElementById('hp');
    const hp1 = document.getElementById('hp1');
    const email = document.getElementById('email');
    const gender = document.getElementsByName('gender');
    const char = document.getElementById('char');

    // 정규 표현식
    const expIdText = /^(?=.*[a-z])(?=.*[A-Z])[A-Za-z0-9]{3,16}$/; 
    // 3~16 자리이며 대문자 소문자 한자 이상 각각 들어가야 하며 숫자까지만 사용가능
    const expPwText = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/;
    const expNameText = /^[가-힣]+$/;
    const expHpText = /^\d{3}\d{3,4}\d{4}$/;// - 제거
    const expHp1Text = /^\d{3}\d{3,4}\d{4}$/;// - 제거
    const expEmailText = /^[A-Za-z0-9\-\.]+@[A-Za-z0-9\-\.]+\.[A-Za-z0-9]+$/;
    const expChartext = /^[가-힣]{2,}[a-zA-Z]{4,}\d{0,}$/;

  

  
    if(userid.value == ''){
        alert('아이디를 입력하세요');
        userid.focus();
        return false;
    }
    if(!expIdText.test(userid.value)){
        alert('아이디는 3자 이상 16자 이하이며 대문자 소문자는 각각 1개 이상 \n들어가야 하며 숫자까지 사용 가능합니다.');
        userid.focus();
        return false;
    }

    if(userpw.value==''){
        alert('비밀번호를 입력하세요');
        userpw.focus();
        return false;
    }

    if(!expPwText.test(userpw.value)){
        alert('비밀번호 형식을 확인하세요\n소문자,대문자,숫자,특수문자 1개씩 꼭 입력해야합니다');
        userpw.focus();
        return false;
    }

    if(userpw.value != userpw_re.value){
        alert('비밀번호와 비밀번호 확인의 값이 다릅니다');
        userpw_re.focus;
        return false;
    }

    if(!expNameText.test(name.value)){
        alert('이름은 한글로 입력하세요');
        name.focus();
        return false;
    }

    if(!expChartext.test(char.value)){
        alert('별명 확인하세요 한글, 영어 순으로 2자 / 4자');
        char.focus();
        return false;
    }

    if(!expEmailText.test(email.value)){
        alert('이메일 형식을 확인하세요');
        email.focus();
        return false;
    }

    if(regform.gender.value == ""){
        alert('성별을 선택하세요');
        regform.gender.focus();
        return false;
    }


    if(!expHpText.test(hp.value)){
        alert('휴대폰번호 형식을 확인하세요\n하이픈(-)을 제거해야 합니다.');
        hp.focus();
        return false;
    }

    if(!expHpText.test(hp1.value)){
        alert('휴대폰번호 형식을 확인하세요\n하이픈(-)을 제거해야 합니다.');
        hp1.focus();
        return false;
    }

 


   
 


    return true;
    
}


if (window.addEventListener) {
    window.addEventListener('load', InitEvent, false);
}
var canvas, context, tool;
function InitEvent() {
    canvas = document.getElementById('drawCanvas');
    if (!canvas) {
   alert("캔버스 객체를 찾을 수 없음");
   return;
    }
    if (!canvas.getContext) {
   alert("Drawing Contextf를 찾을 수 없음");
   return;
    }
    context = canvas.getContext('2d');
    if (!context) {
   alert("getContext() 함수를 호출 할 수 없음");
   return;
    }
    // Pencil tool 객체를 생성 한다.
    tool = new tool_pencil();
    canvas.addEventListener('mousedown', ev_canvas, false);
    canvas.addEventListener('mousemove', ev_canvas, false);
    canvas.addEventListener('mouseup', ev_canvas, false);
    canvas.addEventListener('touchstart', ev_canvas, false);
    canvas.addEventListener('touchmove', ev_canvas, false);
    canvas.addEventListener('touchend', ev_canvas, false);
}
function tool_pencil() {
    var tool = this;
    this.started = false;

    // 마우스를 누르는 순간 그리기 작업을 시작 한다. 
    this.mousedown = function (ev) {
   context.beginPath();
   context.moveTo(ev._x, ev._y);
   tool.started = true;
    };
    // 마우스가 이동하는 동안 계속 호출하여 Canvas에 Line을 그려 나간다
    this.mousemove = function (ev) {
   if (tool.started) {
       context.lineTo(ev._x, ev._y);
       context.stroke();
   }
    };
    // 마우스 떼면 그리기 작업을 중단한다
    this.mouseup = function (ev) {
   if (tool.started) {
       tool.mousemove(ev);
       tool.started = false;
   }
    };

    // 마우스를 누르는 순간 그리기 작업을 시작 한다. 
    this.touchstart = function (ev) {
   context.beginPath();
   context.moveTo(ev._x, ev._y);
   tool.started = true;
    };
    // 마우스가 이동하는 동안 계속 호출하여 Canvas에 Line을 그려 나간다
    this.touchmove = function (ev) {
   if (tool.started) {
       context.lineTo(ev._x, ev._y);
       context.stroke();
   }
    };
    // 마우스 떼면 그리기 작업을 중단한다
    this.touchend = function (ev) {
   if (tool.started) {
       tool.touchmove(ev);
       tool.started = false;
   }
    };
}
// Canvas요소 내의 좌표를 결정 한다.
function ev_canvas(ev) {
    if (ev.layerX || ev.layerX == 0) { // Firefox 브라우저
   ev._x = ev.layerX;
   ev._y = ev.layerY;
    }
    else if (ev.offsetX || ev.offsetX == 0) { // Opera 브라우저
   ev._x = ev.offsetX;
   ev._y = ev.offsetY;
    }
    else if (ev.targetTouches[0] || ev.targetTouches[0].pageX == 0) {  //핸드폰
   var left = 0;
   var top = 0;
   var elem = document.getElementById('drawCanvas');

   while (elem) {
       left = left + parseInt(elem.offsetLeft);
       top = top + parseInt(elem.offsetTop);
       elem = elem.offsetParent;
   }

   ev._x = ev.targetTouches[0].pageX - left;
   ev._y = ev.targetTouches[0].pageY - top;
    }
    // tool의 이벤트 핸들러를 호출한다.
    var func = tool[ev.type];
    if (func) {
   func(ev);
    }
}

function onClear() {
    canvas = document.getElementById('drawCanvas');
    context.save();
   context.setTransform(1, 0, 0, 1, 0, 0);
   context.clearRect(0, 0, canvas.width, canvas.height);
   context.restore();
}





function sample6_execDaumPostcode() {
    new daum.Postcode({
        oncomplete: function(data) {
            // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

            // 각 주소의 노출 규칙에 따라 주소를 조합한다.
            // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
            var addr = ''; // 주소 변수
            var extraAddr = ''; // 참고항목 변수

            //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
            if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
                    addr = data.roadAddress;
            } else { // 사용자가 지번 주소를 선택했을 경우(J)
                    addr = data.jibunAddress;
            }

            // 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
            if(data.userSelectedType === 'R'){
                // 법정동명이 있을 경우 추가한다. (법정리는 제외)
                // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
                if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
                    extraAddr += data.bname;
                }
                // 건물명이 있고, 공동주택일 경우 추가한다.
                if(data.buildingName !== '' && data.apartment === 'Y'){
                    extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                }
                // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
                if(extraAddr !== ''){
                    extraAddr = ' (' + extraAddr + ')';
                }
                // 조합된 참고항목을 해당 필드에 넣는다.
                document.getElementById("sample6_extraAddress").value = extraAddr;
                
            } else {
                document.getElementById("sample6_extraAddress").value = '';
            }

            // 우편번호와 주소 정보를 해당 필드에 넣는다.
            document.getElementById('sample6_postcode').value = data.zonecode;
            document.getElementById("sample6_address").value = addr;
            // 커서를 상세주소 필드로 이동한다.
            document.getElementById("sample6_detailAddress").focus();
        }
    }).open();
}

     

    ✔ JS

    
 
input[type=date]::-webkit-datetime-edit-text {
  -webkit-appearance: none;
  display: none;
}
input[type=date]::-webkit-datetime-edit-month-field{
  -webkit-appearance: none;
  display: none;
}
input[type=date]::-webkit-datetime-edit-day-field {
  -webkit-appearance: none;
  display: none;
}
input[type=date]::-webkit-datetime-edit-year-field {
  -webkit-appearance: none;
  display: none;
}

input{text-align: center;}


div{
  margin: 0, auto;
  color: grey;
  font-size: 12px;
}

#canvas {
  width: 300px;
  height: 50px;
  border: 1px solid black;
}

 #userid{margin-left: 100px;}
 #userpw{margin-left: 85px;}
 #userpw_re{margin-left: 48px;} 
 #name{margin-left: 115px;} 
 #char{margin-left: 115px;} 
 #email{margin-left: 90px;} 
 #date{margin-left: 80px;} 
 #gender{margin-left: 110px;} 
 #hp{margin-left: 80px;} 
 #hp1{margin-left: 65px;} 
 #sample6_postcode{margin-left: 110px;} 
 /* #sample6_address{margin-left: 70px;}  */
 #sample6_extraAddress{margin-left: 150px;} 
 #sample6_detailAddress{margin-left: 150px;} 
 #drawCanvas{margin-left: 110px;}
 
 #hobby1{margin-left: 55px;}
 #hobby2{margin-left: 48px;}
 #hobby3{margin-left: 85px;} 

 #rid{margin-left: 48px;}
 
img{margin-left: 45px;}
#b{
  margin-left: 0, auto;
  text-align: center;
}

#userpw{
  text-align: center;
  margin: 0, auto;
} 

body{
  width: 700px;
 margin: 0 auto;
}

     

    ✔ 회원가입 페이지 서명 부분

    🔏 HTML 서명

    <p>서명
                <canvas id="drawCanvas" width="500" height="100" style=" position: relative; border: 1px solid #000;"></canvas>
            </p>
     
    🔏 JS 서명
     
    if (window.addEventListener) {
        window.addEventListener('load', InitEvent, false);
    }
    var canvas, context, tool;
    function InitEvent() {
        canvas = document.getElementById('drawCanvas');
        if (!canvas) {
        alert("캔버스 객체를 찾을 수 없음");
        return;
        }
        if (!canvas.getContext) {
        alert("Drawing Contextf를 찾을 수 없음");
        return;
        }
        context = canvas.getContext('2d');
        if (!context) {
        alert("getContext() 함수를 호출 할 수 없음");
        return;
        }
        // Pencil tool 객체를 생성 한다.
        tool = new tool_pencil();
        canvas.addEventListener('mousedown', ev_canvas, false);
        canvas.addEventListener('mousemove', ev_canvas, false);
        canvas.addEventListener('mouseup', ev_canvas, false);
        canvas.addEventListener('touchstart', ev_canvas, false);
        canvas.addEventListener('touchmove', ev_canvas, false);
        canvas.addEventListener('touchend', ev_canvas, false);
    }
    function tool_pencil() {
        var tool = this;
        this.started = false;

        // 마우스를 누르는 순간 그리기 작업을 시작 한다.
        this.mousedown = function (ev) {
        context.beginPath();
        context.moveTo(ev._x, ev._y);
        tool.started = true;
        };
        // 마우스가 이동하는 동안 계속 호출하여 Canvas에 Line을 그려 나간다
        this.mousemove = function (ev) {
        if (tool.started) {
            context.lineTo(ev._x, ev._y);
            context.stroke();
        }
        };
        // 마우스 떼면 그리기 작업을 중단한다
        this.mouseup = function (ev) {
        if (tool.started) {
            tool.mousemove(ev);
            tool.started = false;
        }
        };

        // 마우스를 누르는 순간 그리기 작업을 시작 한다.
        this.touchstart = function (ev) {
        context.beginPath();
        context.moveTo(ev._x, ev._y);
        tool.started = true;
        };
        // 마우스가 이동하는 동안 계속 호출하여 Canvas에 Line을 그려 나간다
        this.touchmove = function (ev) {
        if (tool.started) {
            context.lineTo(ev._x, ev._y);
            context.stroke();
        }
        };
        // 마우스 떼면 그리기 작업을 중단한다
        this.touchend = function (ev) {
        if (tool.started) {
            tool.touchmove(ev);
            tool.started = false;
        }
        };
    }
    // Canvas요소 내의 좌표를 결정 한다.
    function ev_canvas(ev) {
        if (ev.layerX || ev.layerX == 0) { // Firefox 브라우저
        ev._x = ev.layerX;
        ev._y = ev.layerY;
        }
        else if (ev.offsetX || ev.offsetX == 0) { // Opera 브라우저
        ev._x = ev.offsetX;
        ev._y = ev.offsetY;
        }
        else if (ev.targetTouches[0] || ev.targetTouches[0].pageX == 0) {   //핸드폰
        var left = 0;
        var top = 0;
        var elem = document.getElementById('drawCanvas');

        while (elem) {
            left = left + parseInt(elem.offsetLeft);
            top = top + parseInt(elem.offsetTop);
            elem = elem.offsetParent;
        }

        ev._x = ev.targetTouches[0].pageX - left;
        ev._y = ev.targetTouches[0].pageY - top;
        }
        // tool의 이벤트 핸들러를 호출한다.
        var func = tool[ev.type];
        if (func) {
        func(ev);
        }
    }

    function onClear() {
        canvas = document.getElementById('drawCanvas');
        context.save();
        context.setTransform(1, 0, 0, 1, 0, 0);
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.restore();
    }

    ✔ 자기소개 부분 CKEditor5

    🔏 자기소개 HTML

    <p> 자기소개<div id="editor"></div>
            <script >
                ClassicEditor
                  .create( document.querySelector( '#editor' ) )
                  .catch( error => {
                    console.error( error );
                  } );
              </script>
          </p>
     
     
     
    🔏 별명 공백없이 한글, 영문, 숫자만 입력 한글 최소 2자리, 영어 2자리
     
    if(!expChartext.test(char.value)){
            alert('별명 확인하세요 한글, 영어 순으로 2자 / 4자');
            char.focus();
            return false;
        }
     
     
     
    🔏 성별 선택부분 HTML
     
    <p>성별 <select name="gender" id="gender">
                <option value="">선택하세요</option>
                <option value="남자">남자</option>
                <option value="여자">여자</option>
            </select></p>
     
    🔏 성별 선택부분 JS
     

        if(regform.gender.value == ""){
            alert('성별을 선택하세요');
            regform.gender.focus();
            return false;
        }
     
    ✔ 다른 아이디, 비밀번호, 이메일, 휴대폰 등 형식은 과거 자료 참고
     

     

    반응형
    저작자표시 비영리 변경금지

    'JavaScript' 카테고리의 다른 글

    Window, DOM 차이 자바스크립트  (0) 2023.09.24
    자바스크립트 파일 용량 제한과 여부  (0) 2023.08.24
    JavaScript JSON  (0) 2022.11.17
    JavaSript Promise Object  (0) 2022.11.15
    JavaScript(주석, 예외처리, 모듈, 가위바위보/ 퀴즈 문제)  (0) 2022.11.14

    관련글

    티스토리툴바