한길(One Way)

■ Front-End ■/JavaScript

[JavaScript] 정규표현식 입력검증

한길(One Way) 2023. 2. 28.

목차

    [JavaScript] 정규표현식 입력검증
    자바스크립트는 객체 기반 함수형 스크립트 언어이며 웹에서 중요한 위치를 차지하고  있다.

     

    정규표현식(Regular Expressions)을 사용하여 입력검증을 해본다. 표현식에 위배되는 값을 입력하고 버튼을 클릭하면 해당하는 항목의 정규표현식이 출력된다. 예제의 값을 입력하고 클릭하면 정상적으로 지나간다.

     

     

    ▣ RegExp.html

    <html>
<head>
<title>RegExp</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<style>
body, td {
    font-family: verdana;
    font-size: 12px;
}
</style>

<script type="text/javascript">
    var regNumber = /^[0-9]+$/; // 숫자만 1개 이상
    var regAlpha = /^[a-zA-Z]+$/; // 영문자만 1개 이상
    var regNumAlpha = /^[0-9a-zA-Z]+$/; // 영문/숫자만 1개 이상
    
    // 첫글자는 영문 이후에는 4~12개를 채우는 영문, 숫자, 언더바(_)
    var regUserId = /^[a-zA-Z]{1}[a-zA-Z0-9_-]{4,12}$/; 
    // 첫 2~3개 숫자, 데시(-), 3~4개 숫자, 데시(-), 4개의 숫자
    var regPhone = /^[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}$/; 
    
    var regEmail = /^[_a-zA-Z0-9-]+@[._a-zA-Z0-9-]+.[a-zA-Z]+$/; // 이메일 규칙
    
    function checkNumber() {
       with (document.mainForm) {
          if (regNumber.test(txt_number.value) == false) {
              alert(regNumber);
              txt_number.select();
              txt_number.focus();
              return false;
          }
       }
    }
    function checkAlpha() {
       with (document.mainForm) {
          if (regAlpha.test(txt_alpha.value) == false) {
              alert(regAlpha);
              txt_alpha.select();
              txt_alpha.focus();
              return false;
          }
       }
    }
    function checkNumAlpha() {
       with (document.mainForm) {
          if (regNumAlpha.test(txt_num_alpha.value) == false) {
              alert(regNumAlpha);
              txt_num_alpha.select();
              txt_num_alpha.focus();
              return false;
          }
       }
    }
    function checkUserid() {
       with (document.mainForm) {
          if (regUserId.test(txt_userid.value) == false) {
              alert(regUserId);
              txt_userid.select();
              txt_userid.focus();
              return false;
          }
       }
    }
    function checkPhone() {
       with (document.mainForm) {
          if (regPhone.test(txt_phone.value) == false) {
              alert(regPhone);
              txt_phone.select();
              txt_phone.focus();
              return false;
          }
       }
    }
    function checkEmail() {
       with (document.mainForm) {
          if (regEmail.test(txt_email.value) == false) {
              alert(regEmail);
              txt_email.select();
              txt_email.focus();
              return false;
          }
       }
    }
</script>
</head>

<body>
    <form name="mainForm">
       <table width="500" border="1" cellspacing="0" cellpadding="1" bordercolorlight="#E0E0E0" bordercolordark="#FFFFFF">
          <tr style="background-color: #FFFFCC">
              <td width="100">제목</td>
              <td>예제</td>
              <td>항목</td>
              <td>버튼</td>
          </tr>
          <tr>
              <td>숫자</td>
              <td>0123456789</td>
              <td><input type="text" name="txt_number" size="12" value="ABC"></td>
              <td><input type="button" value="checkNumber" onclick="checkNumber()" style="width: 140px"></td>
          </tr>
          <tr>
              <td>알파벳</td>
              <td>Apple</td>
              <td><input type="text" name="txt_alpha" size="12" value="123"></td>
              <td><input type="button" value="checkAlpha" onclick="checkAlpha()" style="width: 140px"></td>
          </tr>
          <tr>
              <td>영수조합</td>
              <td>Apple123</td>
              <td><input type="text" name="txt_num_alpha" size="12" value="#A01$"></td>
              <td><input type="button" value="checkNumAlpha" onclick="checkNumAlpha()" style="width: 140px"></td>
          </tr>
          <tr>
              <td>아이디</td>
              <td>tuser01</td>
              <td><input type="text" name="txt_userid" size="12" value="user01#"></td>
              <td><input type="button" value="checkUserid" onclick="checkUserid()" style="width: 140px"></td>
          </tr>
          <tr>
              <td>연락처</td>
              <td>010-1234-1234</td>
              <td><input type="text" name="txt_phone" size="12" value="123-123"></td>
              <td><input type="button" value="checkPhone" onclick="checkPhone()" style="width: 140px"></td>
          </tr>
          <tr>
              <td>이메일</td>
              <td>test@test.com</td>
              <td><input type="text" name="txt_email" size="12" value="test@a"></td>
              <td><input type="button" value="checkEmail" onclick="checkEmail()" style="width: 140px"></td>
          </tr>
       </table>
    </form>
</body>
</html>

     

    ▣ 결과화면

    처음 로딩하고 입력항목을 보면 표현식에 위배되는 값이 있다.

    [JavaScript] 정규표현식 입력검증

      

    ▣ 버튼 클릭

    해당하는 항목의 정규표현식이 출력.

    [JavaScript] 정규표현식 입력검증

      

     

    728x90
    저작자표시 비영리

    '■ Front-End ■ > JavaScript' 카테고리의 다른 글

    [JavaScript] 이미지 업로드 하기전 표시하기 (ImageViewer )  (0) 2023.02.28
    [JavaScript] 모달창에서 부모창의 함수호출  (0) 2023.02.28
    [JavaScript] 모달창에 값 주고 받기  (0) 2023.02.28
    [JavaScript] 동적으로 테이블 생성  (0) 2023.02.28
    [JavaScript] 이벤트 핸들러 [2]  (1) 2023.02.28

    댓글

    티스토리툴바