[JavaScript] 정규표현식을 사용한 회원가입 예제

728x90

23. 09. 18

지난 시간에 배웠던 정규표현식을 회원가입에 적용시켜보는 시간을 가져보려고 해요.

먼저 Open with Live Server로 회원가입 페이지가 어떻게 구성되어 있는지 웹 브라우저에서 확인해볼게요.

전체 html, js 코드는 블로그 맨 아래에서 확인하실 수 있습니다.

필수로 있어야 할 유효성 목록입니다.

유효성 검사를 통과하지 못해 false를 반환할 때, 입력칸 리셋 및 마우스 커서 이동 처리
비밀번호는 아이디와 일치할 수 없도록 할 것
집주소는 API를 이용하여 zip-code를 입력받도록 처리
주민등록번호는 주민등록번호 계산식을 통해 올바른 주민등록번호만 입력되도록 처리
주민등록번호를 올바르게 입력했을 경우 자동으로 생년월일 데이터가 삽입될 것
관심분야(체크박스)는 최소 한 개 이상 체크할 것
자기소개는 입력 글자수에 제한을 둘 것
모든 유효성 검사를 통과했을 때만 가입하기 버튼을 눌렀을 때 메일창으로 넘어갈 것

아래는 html 코드입니다.

<form> 태그로 <table> 태그를 감쌌습니다.


<html>
  <head> </head>
  <body>
    <form>
      <table></table>
    </form>
  </body>
</html>

input type이 button인 "가입하기" 버튼을 눌렀을 때 유효성 검사를 실행할 수 있도록 onClick 이벤트를 넣어 userCheck() 함수가 실행되도록 했습니다.


<input align="center" type="button" onclick="userCheck()" value="가입하기" />

집주소 API는 다음(카카오)에서 제공하는 우편번호 검색 서비스를 이용했습니다.

우편번호 검색 버튼을 눌렀을 때 execDaumPostcode() 함수가 실행되고,

초기화 버튼을 눌렀을 때 execDaumPostcodeReset() 함수가 호출됩니다.


<td align="left">
  <input type="text" id="zipCode" placeholder="우편번호" readonly required />
  <input type="button" onclick="execDaumPostcode()" value="우편번호 찾기" />
  <input type="button" onclick="execDaumPostcodeReset()" value="초기화" /><br />
  <input type="test" id="address1" placeholder="도로명주소" size="40" readonly required /><br>
  <input type="text" id="address2" placeholder="지번주소" size="40" readonly /><br>
  <input type="text" id="address3" placeholder="상세주소" size="40" required />
  <!-- 다음(카카오)에서 제공하는 우편번호 검색 제공 서비스 -->
  <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
</td>

각 <input> 태그마다 required 속성을 추가하여 폼 데이터가 서버로 제출되기 전에 반드시 채워져 있어야 하는 입력 필드임을 지정했습니다.


<input type="" required />

아래는 JavaScript 코드입니다.

id="uid"인 아이디의 유효성 검사입니다.


  // 아이디 검사
  if (uid.value == "") {
    alert("아이디를 입력하세요.");
    uid.focus();
    return false;
  }

  let uidRegExp = /^[a-zA-z0-9]{4,12}$/;
  if (!uidRegExp.test(uid.value)) {
    alert("아이디는 영문 대소문자와 숫자 4~12자리로 입력해야 합니다!");
    uid.focus();
    uid.value = "";
    return false;
  }

id="pw"인 비밀번호의 유효성 검사입니다

입력한 비밀번호의 값이 아이디(uid)의 값과 일치하면 경고창이 뜹니다.


  // 비밀번호 검사
  if (pw.value == "") {
    alert("비밀번호를 입력하세요.");
    pw.focus();
    return false;
  }

  if (uid.value == pw.value) {
    alert("비밀번호는 아이디와 다르게 입력해야 합니다.");
    pw.focus();
    pw.value = "";
    return false;
  }

  let pwRegExp = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,25}$/;
  if (!pwRegExp.test(pw.value)) {
    alert("비밀번호는 영문자+숫자+특수문자 조합으로 8~25자리 사용해야 합니다.");
    pw.focus();
    pw.value = "";
    return false;
  }

id="pwChenk"인 비밀번호 확인의 유효성 검사입니다.

위에서 입력한 비밀번호(pw)의 값과 일치하지 않으면 경고창이 뜹니다.


  // 비밀번호 확인 검사
  if (pwCheck.value == "") {
    alert("비밀번호 확인을 입력하세요.");
    pwCheck.focus();
    return false;
  }

  if (pwCheck.value != pw.value) {
    alert("비밀번호가 일치하지 않습니다.");
    pwCheck.focus();
    pwCheck.value = "";
  }

  let pwCheckRegExp = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,25}$/;
  if (!pwCheckRegExp.test(pwCheck.value)) {
    alert("비밀번호는 영문자+숫자+특수문자 조합으로 8~25자리 사용해야 합니다.");
    pwCheck.focus();
    pwCheck.value = "";
    return false;
  }

id="mail"인 이메일의 유효성 검사힙니다. "@"와 "."이 반드시 포함되어야 합니다.


  // 이메일 검사
  if (mail.value == "") {
    alert("이메일을 입력하세요.");
    mail.focus();
    return false;
  }

  let emailRegExp = /^[A-Za-z0-9_]+[A-Za-z0-9]*[@]{1}[A-Za-z0-9]+[A-Za-z0-9]*[.]{1}[A-Za-z]{1,3}$/;

  if (!emailRegExp.test(mail.value)) {
    alert("이메일 형식이 올바르지 않습니다.");
    mail.focus();
    mail.value = "";
    return false;
  }

id="userName"인 이름의 유효성 검사입니다. 한글만 입력할 수 있습니다.


  //  이름 검사
  if (userName.value == "") {
    alert("이름을 입력하세요.");
    userName.focus();
    return false;
  }

  let userNameRegExp = /^[가-힣]{2,4}$/;

  if (!userNameRegExp.test(userName.value)) {
    alert("이름이 올바르지 않습니다. (2~4글자 한글만 입력)");
    userName.focus();
    userName.value = "";
    return false;
  }

id="zipCode"인 집주소 유효성 검사입니다.


  // 집주소 검사
  if (zipCode.value == "") {
    alert("집주소를 입력하세요.");
    zipCode.focus();
    return false;
  }

  if (address3.value == "") {
    alert("상세주소를 입력하세요.");
    zipCode.focus();
    return false;
  }

  let address3RegExp = /[가-힣0-9].{2,25}/;
  if (!address3RegExp.test(address3.value)) {
    alert("상세주소를 다시 입력해주세요 (ex. A동 101호)");
    address3.focus();
    address3.value = "";
    return false;
  }

집주소의 경우 "우편번호 검색" 버튼을 눌렀을 때 execDaumPostcode() 함수가 실행됩니다.

버튼을 누르면 우편번호를 검색할 수 있는 팝업창이 뜨고 주소를 선택했을 때, 선택한 우편번호(data.zonecode)를 getElementById("")로 해당 id 값을 불러와 데이터를 각각의 폼 양식에 자동으로 삽입하게 합니다.


const execDaumPostcode = () => {
  new daum.Postcode({
    oncomplete: function (data) {
      // 우편번호(data.zonecode)를 ID가 zip-code인 양식에 삽입
      document.getElementById("zipCode").value = data.zonecode;
      document.getElementById("address1").value = data.address;
      document.getElementById("address2").value = data.jibunAddress;
      document.getElementById("address3").focus();
    },
  }).open();
};

또한, 초기화 버튼을 눌렀을 때는 우편번호의 모든 값이 null이 되면서 우편번호를 다시 검색할 수 있도록 합니다.


const execDaumPostcodeReset = () => {
  document.getElementById("zipCode").value = null;
  document.getElementById("address1").value = null;
  document.getElementById("address2").value = null;
  document.getElementById("address3").value = null;
};

주민등록번호는 앞자리와 뒷자리를 각각 id="num1", id="num2"로 나누어 계산식을 통해 유효성을 검사합니다


  // 주민등록번호 검사
  if (unm1.value == "" || unm2.value == "") {
    alert("주민번호를 입력하세요.");
    unm1.focus();
    return false;
  }

  let num1 = document.getElementById("unm1");
  let num2 = document.getElementById("unm2");

  let arrNum1 = new Array();
  let arrNum2 = new Array();

  for (let i = 0; i < num1.value.length; i++) {
    arrNum1[i] = num1.value.charAt(i);
  }

  for (let i = 0; i < num2.value.length; i++) {
    arrNum2[i] = num2.value.charAt(i);
  }

  let tempSum = 0;

  for (let i = 0; i < num1.value.length; i++) {
    tempSum += arrNum1[i] * (2 + i);
  } // 주민번호 검사방법을 적용하여 앞 번호를 모두 계산하여 더함

  for (let i = 0; i < num2.value.length - 1; i++) {
    if (i >= 2) {
      tempSum += arrNum2[i] * i;
    } else {
      tempSum += arrNum2[i] * (8 + i);
    }
  } // 같은방식으로 앞 번호 계산한것의 합에 뒷번호 계산한것을 모두 더함

  if ((11 - (tempSum % 11)) % 10 != arrNum2[6]) {
    alert("올바른 주민번호가 아닙니다.");
    num1.value = "";
    num2.value = "";
    num1.focus();
    return false;
  }

생년월일 유혀성 검사입니다.

(올바른) 주민등록번호를 기반으로, 년/월/일 정보를 추출하여 각각의 필드에 값을 자동으로 삽입합니다.


  // 생일
  let birthYear = arrNum1[0] === "1" || arrNum1[0] === "2" ? "19" : "20";
  // 년도 정보를 완성하고 year 필드에 설정
  year.value = birthYear + arrNum1[0] + arrNum1[1];
  // 월, 일 정보를 추출하여 각각의 필드에 설정
  let birthMonth = parseInt(arrNum1[2] + arrNum1[3]);
  let birthDay = parseInt(arrNum1[4] + arrNum1[5]);

  document.getElementById("Month").value = birthMonth;
  document.getElementById("Day").value = birthDay;

관심분야 유효성 검사입니다.

체크박스의 갯수만큼 반복문을 돌고 체크된 게 없으면 경고창이 뜨고, 체크된 값을 찾으면 true를 반환하며 반복문을 빠져나갑니다.


  // 관심분야
  let checkboxes = document.getElementsByName("01");
  let isChecked = false;
  for (let i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      isChecked = true;
      break;
    }
  }

  if (!isChecked) {
    alert("관심분야는 최소 1개 이상 선택해야 합니다.");
    return false;
  }

id="intro"인 자기소개 유효성 검사입니다.

사용자가 입력한 글자수가 조건을 만족하지 않으면 경고창이 뜹니다. (200자 이상, 1000자 이하)


  // 자기소개
  let intro = document.getElementById("my_intro");
  if (intro.value == "") {
    alert("자기소개를 입력하세요. (200자 이상, 1000자 이하)");
    intro.focus();
    return false;
  } else if (!(intro.value.length >= 200 && intro.value.length <= 1000)) {
    alert("자기소개는 200자 이상 1000자 이하로 입력해야 합니다.");
    my_intro.focus();
    return false;
  }

마지막으로 모든 유효성 검사를 통과했을 때 "가입하기" 버튼을 눌렀을 때 회원가입이 완료되었다는 alert 창이 뜨면서 메일창으로 넘어가는 코드입니다.


  alert("회원가입이 완료되었습니다!");
  // ${mail.value}는 수신자의 이메일 주소, subject 파라미터는 이메일의 제목, 그리고 body 파라미터는 이메일 본문
  window.location.href = `mailto:${mail.value}?subject=회원가입 완료&body=회원가입을 환영합니다.`;
  return true;

?= 기호는?

정규표현식에서 사용하는 전방탐색(lookahead)입니다.
- 전방탐색은 특정 패턴이 나중에 따라오는 다른 패턴 앞에 있는지 확인하는 데 사용됩니다.

?= : 긍정적인 전방탐색 (Positive Lookahead)

이전의 주어진 패턴이 후속 패턴 앞에 있어야 일치한다는 것을 의미합니다.

?! : 부정적인 전방탐색 (Negative Lookahead)

이전의 주어진 패턴이 후속 패턴 앞에 없어야 일치한다는 것을 의미합니다.

".", "*" 기호는?

"."은 임의의 단일 문자를 나타내며, "*"은 직전 요소가 0번 이상 반복되는 것을 의미합니다.
- 즉 *의 경우 있어도 되고 없어도 된다는 의미가 됩니다.

예를들어 (?=.*[a-zA-Z])라고 쓰면 "한 개 이상의 임의 문자가 뒤따르며, 그 중 하나 이상이 a-z 또는 A-Z인 문자를 포함해야 함"을 의미합니다. 즉, 해당 정규표현식은 비밀번호 등에서 영문자가 최소 한 개 포함되어야 한다는 조건을 체크할 때 사용됩니다.

아래는 전체 html, JavaScript 코드입니다.


<!-- <input> 태그의 required 속성: 폼 데이터(form data)가 서버로 제출되기 전 반드시 채워져 있어야 하는 입력 필드를 명시 -->
<!DOCTYPE html>
<html>
  <head>
    <title>유효성 검사 예제</title>
  </head>
  <body>
    <form>
      <table
        width="720"
        height="120"
        border="1"
        align="center"
        bordercolor="#CFEFFC"
      >
        <tr>
          <td colspan="2" align="center" bgcolor="#CFEFFC">
            <b>회원 기본 정보</b>
          </td>
        </tr>
        <tr align="center">
          <td width="150px" bgcolor="#E8F7FD">
            <b>아이디</b>
          </td>
          <td align="left">
            <input type="text" id="uid" size="10" maxlength="15" required />
            4~12자의 영문 대소문자와 숫자로만 입력
          </td>
        </tr>
        <tr align="center">
          <td bgcolor="#E8F7FD">
            <b>비밀번호</b>
          </td>
          <td align="left">
            <input type="password" id="pw" size="10" maxlength="15" required />
            8~25자의 영문자+숫자+특수문자 조합
          </td>
        </tr>
        <tr align="center">
          <td bgcolor="#E8F7FD">
            <b>비밀번호 확인</b>
          </td>
          <td align="left">
            <input
              type="password"
              id="pwCheck"
              size="10"
              maxlength="15"
              required
            />
          </td>
        </tr>
        <tr align="center">
          <td bgcolor="#E8F7FD">
            <b>메일주소</b>
          </td>
          <td align="left">
            <input type="text" id="mail" size="15" required />
            예) id@domain.com
          </td>
        </tr>
        <tr align="center">
          <td bgcolor="#E8F7FD">
            <b>이름</b>
          </td>
          <td align="left">
            <input
              type="text"
              id="userName"
              size="15"
              maxlength="10"
              required
            />
          </td>
        </tr>
        <tr align="center">
          <td bgcolor="#E8F7FD">
            <b>집주소</b>
          </td>
          <td align="left">
            <input
              type="text"
              id="zipCode"
              placeholder="우편번호"
              readonly
              required
            />
            <input
              type="button"
              onclick="execDaumPostcode()"
              value="우편번호 찾기"
            />
            <input
              type="button"
              onclick="execDaumPostcodeReset()"
              value="초기화"
            /><br />
            <input
              type="test"
              id="address1"
              placeholder="도로명주소"
              size="40"
              readonly
              required
            /><br />
            <input
              type="text"
              id="address2"
              placeholder="지번주소"
              size="40"
              readonly
            /><br />
            <input
              type="text"
              id="address3"
              placeholder="상세주소"
              size="40"
              required
            />
            <!-- 다음에서 제공하는 우편번호 검색 제공 서비스 -->
            <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
          </td>
        </tr>
        <tr>
          <td colspan="2" align="center" bgcolor="#CFEFFC">
            <b>개인 신상 정보</b>
          </td>
        </tr>
        <tr>
          <td align="center" bgcolor="#E8F7FD"><b>주민등록번호</b></td>
          <td>
            <input
              type="password"
              id="unm1"
              size="10"
              maxlength="6"
              placeholder="6자리"
              required
            />
            -
            <input
              type="password"
              id="unm2"
              size="10"
              maxlength="7"
              placeholder="7자리"
              required
            />
          </td>
        </tr>
        <tr align="center">
          <td bgcolor="#E8F7FD">
            <b>생일</b>
          </td>
          <td align="left">
            <input
              type="text"
              name="bir"
              id="year"
              size="5"
              maxlength="4"
              required
              readonly
            />년
            <select name="bir" id="Month">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
            </select>
            월
            <select name="bir" id="Day">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
              <option value="13">13</option>
              <option value="14">14</option>
              <option value="15">15</option>
              <option value="15">16</option>
              <option value="17">17</option>
              <option value="18">18</option>
              <option value="19">19</option>
              <option value="20">20</option>
              <option value="21">21</option>
              <option value="22">22</option>
              <option value="23">23</option>
              <option value="24">24</option>
              <option value="25">25</option>
              <option value="26">26</option>
              <option value="27">27</option>
              <option value="28">28</option>
              <option value="29">29</option>
              <option value="30">30</option>
              <option value="31">31</option>
            </select>
            일
          </td>
        </tr>
        <tr align="center">
          <td bgcolor="#E8F7FD">
            <b>관심분야</b>
          </td>
          <td align="left" id="hobby" required>
            <input type="checkbox" name="01" value="컴퓨터" />컴퓨터
            <input type="checkbox" name="01" value="인터넷" />인터넷
            <input type="checkbox" name="01" value="여행" />여행
            <input type="checkbox" name="01" value="영화감상" />영화감상
            <input type="checkbox" name="01" value="음악감상" />음악감상
          </td>
        </tr>
        <tr align="center">
          <td bgcolor="#E8F7FD">
            <b>자기소개</b>
          </td>
          <td align="left">
            <textarea
              id="my_intro"
              cols="85"
              rows="8"
              maxlength="1000"
              required
            ></textarea>
            <div id="text_count"></div>
          </td>
        </tr>
      </table>
      <table width="720" height="50" border="0" align="center">
        <tr>
          <td align="right">
            <input
              align="center"
              type="button"
              onclick="userCheck()"
              value="가입하기"
            />
          </td>
          <td align="left"><input type="reset" value="다시 입력" /></td>
        </tr>
      </table>
    </form>
    <script src="test.js"></script>
  </body>
</html>


const userCheck = () => {
  // 아이디 검사
  if (uid.value == "") {
    alert("아이디를 입력하세요.");
    uid.focus();
    return false;
  }

  let uidRegExp = /^[a-zA-z0-9]{4,12}$/;
  if (!uidRegExp.test(uid.value)) {
    alert("아이디는 영문 대소문자와 숫자 4~12자리로 입력해야 합니다!");
    uid.focus();
    uid.value = "";
    return false;
  }

  // 비밀번호 검사
  if (pw.value == "") {
    alert("비밀번호를 입력하세요.");
    pw.focus();
    return false;
  }

  if (uid.value == pw.value) {
    alert("비밀번호는 아이디와 다르게 입력해야 합니다.");
    pw.focus();
    pw.value = "";
    return false;
  }

  let pwRegExp = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,25}$/;
  if (!pwRegExp.test(pw.value)) {
    alert("비밀번호는 영문자+숫자+특수문자 조합으로 8~25자리 사용해야 합니다.");
    pw.focus();
    pw.value = "";
    return false;
  }

  // 비밀번호 확인 검사
  if (pwCheck.value == "") {
    alert("비밀번호 확인을 입력하세요.");
    pwCheck.focus();
    return false;
  }

  if (pwCheck.value != pw.value) {
    alert("비밀번호가 일치하지 않습니다.");
    pwCheck.focus();
    pwCheck.value = "";
  }

  let pwCheckRegExp = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,25}$/;
  if (!pwCheckRegExp.test(pwCheck.value)) {
    alert("비밀번호는 영문자+숫자+특수문자 조합으로 8~25자리 사용해야 합니다.");
    pwCheck.focus();
    pwCheck.value = "";
    return false;
  }

  // 이메일 검사
  if (mail.value == "") {
    alert("이메일을 입력하세요.");
    mail.focus();
    return false;
  }

  let emailRegExp =
    /^[A-Za-z0-9_]+[A-Za-z0-9]*[@]{1}[A-Za-z0-9]+[A-Za-z0-9]*[.]{1}[A-Za-z]{1,3}$/;

  if (!emailRegExp.test(mail.value)) {
    alert("이메일 형식이 올바르지 않습니다.");
    mail.focus();
    mail.value = "";
    return false;
  }

  //  이름 검사
  if (userName.value == "") {
    alert("이름을 입력하세요.");
    userName.focus();
    return false;
  }

  let userNameRegExp = /^[가-힣]{2,4}$/;

  if (!userNameRegExp.test(userName.value)) {
    alert("이름이 올바르지 않습니다. (2~4글자)");
    userName.focus();
    userName.value = "";
    return false;
  }

  // 집주소 검사
  if (zipCode.value == "") {
    alert("집주소를 입력하세요.");
    zipCode.focus();
    return false;
  }

  if (address3.value == "") {
    alert("상세주소를 입력하세요.");
    zipCode.focus();
    return false;
  }

  let address3RegExp = /[가-힣0-9].{2,25}/;
  if (!address3RegExp.test(address3.value)) {
    alert("상세주소를 다시 입력해주세요 (ex. A동 101호)");
    address3.focus();
    address3.value = "";
    return false;
  }

  // 주민등록번호 검사
  if (unm1.value == "" || unm2.value == "") {
    alert("주민번호를 입력하세요.");
    unm1.focus();
    return false;
  }

  let num1 = document.getElementById("unm1");
  let num2 = document.getElementById("unm2");

  let arrNum1 = new Array();
  let arrNum2 = new Array();

  for (let i = 0; i < num1.value.length; i++) {
    arrNum1[i] = num1.value.charAt(i);
  }

  for (let i = 0; i < num2.value.length; i++) {
    arrNum2[i] = num2.value.charAt(i);
  }

  let tempSum = 0;

  for (let i = 0; i < num1.value.length; i++) {
    tempSum += arrNum1[i] * (2 + i);
  } // 주민번호 검사방법을 적용하여 앞 번호를 모두 계산하여 더함

  for (let i = 0; i < num2.value.length - 1; i++) {
    if (i >= 2) {
      tempSum += arrNum2[i] * i;
    } else {
      tempSum += arrNum2[i] * (8 + i);
    }
  } // 같은방식으로 앞 번호 계산한것의 합에 뒷번호 계산한것을 모두 더함

  if ((11 - (tempSum % 11)) % 10 != arrNum2[6]) {
    alert("올바른 주민번호가 아닙니다.");
    num1.value = "";
    num2.value = "";
    num1.focus();
    return false;
  }

  // 생일
  let birthYear = arrNum1[0] === "1" || arrNum1[0] === "2" ? "19" : "20";
  // 년도 정보를 완성하고 year 필드에 설정
  year.value = birthYear + arrNum1[0] + arrNum1[1];
  // 월, 일 정보를 추출하여 각각의 필드에 설정
  let birthMonth = parseInt(arrNum1[2] + arrNum1[3]);
  let birthDay = parseInt(arrNum1[4] + arrNum1[5]);

  document.getElementById("Month").value = birthMonth;
  document.getElementById("Day").value = birthDay;

  // 관심분야
  let checkboxes = document.getElementsByName("01");
  let isChecked = false;
  for (let i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      isChecked = true;
      break;
    }
  }

  if (!isChecked) {
    alert("관심분야는 최소 1개 이상 선택해야 합니다.");
    return false;
  }

  // 자기소개
  let intro = document.getElementById("my_intro");
  if (intro.value == "") {
    alert("자기소개를 입력하세요. (200자 이상, 1000자 이하)");
    intro.focus();
    return false;
  } else if (!(intro.value.length >= 200 && intro.value.length <= 1000)) {
    alert("자기소개는 200자 이상 1000자 이하로 입력해야 합니다.");
    my_intro.focus();
    return false;
  }

  alert("회원가입이 완료되었습니다!");
  // ${mail.value}는 수신자의 이메일 주소, subject 파라미터는 이메일의 제목, 그리고 body 파라미터는 이메일 본문
  window.location.href = `mailto:${mail.value}?subject=회원가입 완료&body=회원가입을 환영합니다.`;
  return true;

  // document.getElementById("frm").submit();
};

const execDaumPostcode = () => {
  new daum.Postcode({
    oncomplete: function (data) {
      // 우편번호(data.zonecode)를 ID가 zip-code인 양식에 삽입
      document.getElementById("zipCode").value = data.zonecode;
      document.getElementById("address1").value = data.address;
      document.getElementById("address2").value = data.jibunAddress;
      document.getElementById("address3").focus();
    },
  }).open();
};

const execDaumPostcodeReset = () => {
  document.getElementById("zipCode").value = null;
  document.getElementById("address1").value = null;
  document.getElementById("address2").value = null;
  document.getElementById("address3").value = null;
};

728x90

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

'2023-02 몰입형 SW 정규 교육' 카테고리의 다른 글

웹 프로그래밍 개념 (Web Programming) (0)	2023.09.19
[JavaScript] 회원가입 예제 (정규표현식 미사용) (0)	2023.09.19
[JavaScript] 정규표현식 (0)	2023.09.18
[JavaScript] ver, let, const 차이점 (0)	2023.09.18
JavaScript (2) (0)	2023.09.15

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[JavaScript] 정규표현식을 사용한 회원가입 예제

'2023-02 몰입형 SW 정규 교육' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역