Post

[JavaScript] RegExp, 정규식을 이용한 input replace 유효성 체크

Posted Updated
By songmiok
7 min read

Javascript를 이용한 input value 유효성 검사 예제
value 입력 시 다음 칸으로 focus() 된다

1
2
3
4
5
6
7
8

<div class="input__wrap input__certy">
  <label for="">인증번호 4자리 입력</label>
  <input type="tel" maxlength="1" min="0" max="9" class="input__square" onlyNumber>
  <input type="tel" maxlength="1" min="0" max="9" class="input__square" onlyNumber>
  <input type="tel" maxlength="1" min="0" max="9" class="input__square" onlyNumber>
  <input type="tel" maxlength="1" min="0" max="9" class="input__square" onlyNumber>
  <span class="input__alert">잘못된 인증번호 입니다!</span>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

// signup
$(function(){
  $(document).on('keypress keyup keydown', 'input[onlyNumber]', function(e) {
    if (/[a-z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g.test(this.value)) { //한글 막기
      e.preventDefault();
      this.value = '';
    } else if (e.which != 8 && e.which != 0 //영문 e막기
      && e.which < 48 || e.which > 57    //숫자키만 받기
      && e.which < 96 || e.which > 105) { //텐키 받기
      e.preventDefault();
      this.value = '';
    } else if (this.value.length >= this.maxLength) { //1자리 이상 입력되면 다음 input으로 이동시키기
      this.value = this.value.slice(0, this.maxLength);
      if ($(this).next('input').length > 0) {
        $(this).next().focus();
      } else {
        $(this).blur();
      }
    }
  });
});

// 아래걸로
// 숫자만 입력 가능
$(document).on('keypress keyup keydown', 'input[onlyNumber]', function(e) {
  // console.log(e.which);
  if (/[a-z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g.test(this.value)) { //한글 막기
    e.preventDefault();
    this.value = '';
  } else if ( e.which != 8    //  backspace 허용
    && e.which != 0         // ??
    && e.which != 9     // Tab 허용
    && e.which != 116   // F5허용  //영문 e막기
    && e.which < 48 || e.which > 57    //숫자키 허용
    && e.which < 96 || e.which > 105) { //텐키 허용
    e.preventDefault();
    // this.value = '';
  }
});

기타 참고

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157

// 정규식
const regExpSpecial = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/g;   // 특수문자
const regExp_Special_comma = /[\{\}\[\]\/?.;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/g;   // 특수문자 (콤마허용)
const regExp_Special_dot = /[\{\}\[\]\/?,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/g;   // 특수문자 (.허용)
const regExpEmpty = /\s/g;   // 공백
const regExpNumber = /[0-9]/g;  // 숫자
const regExpEng = /[a-z|A-Z]/g; // 영어
const regExpKor = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g;   // 한글
const regExpEmail = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;   // 이메일
const regExpPhone2 = /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/;  // 핸드폰번호
const regExpTel = /^\d{2,3}-\d{3,4}-\d{4}$/;    // 일반번호
const regExpMoney = /\B(?=(\d{3})+(?!\d))/g;    // money
const regExpFee = /\B(?=(\d{3})+(?!\d))/g;

$(function(){
  // 자동완성 기능 제거
  $(document).find("input[onlyNumber], input[onlyCerty], input[onlyMoney], input[onlyTel], input[onlyNumber-password], input[onlyRate], input[onlyKor], input[onlyText], input[noGap]").attr("autocomplete", "off");

  // 숫자만 입력받기
  $(document).on("propertychange change keyup keypress keydown paste input", "input[onlyNumber]", function(e) {
    // if (regExpEmpty.test(this.value)         // 공백
    //   || regExpEng.test(this.value)          // 영어
    //   || regExpKor.test(this.value)          // 한글
    //   || regExpSpecial.test(this.value)) {   // 특문
    //   e.preventDefault();
    //   this.value = '';
    // }
    if ($(this).prop("readonly")) { return false; }
    if (this.value.length > $(this).attr("maxlength")) {
      this.value = this.value.slice(0, this.maxLength);
    }
    this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
  });
    
  // // 숫자만 입력받기 => 금액
  // $(document).on("keydown keypress keyup", "input[onlyMoney]", function(e){
  //   if (regExpEmpty.test(this.value)                // 공백
  //     || regExpEng.test(this.value)                 // 영어
  //     || regExpKor.test(this.value)                 // 한글
  //     || regExp_Special_comma.test(this.value)) {   // 특문(콤마허용)
  //     e.preventDefault();
  //     this.value = '';
  //   }
  //   let money = this.value;
  //   money = format_remove(money);
  //   this.value = Number(money).toLocaleString('ko-KR');
  // });
    
  // 숫자만 입력받기 => 금액
  $(document).on("propertychange change keyup keypress keydown paste input", "input[onlyMoney]", function(e) {
    this.value = this.value.replace(/[^0-9]/g, '');
    // if (regExpEmpty.test(this.value)                // 공백
    //   || regExpEng.test(this.value)                 // 영어
    //   || regExpKor.test(this.value)                 // 한글
    //   || regExp_Special_comma.test(this.value)) {   // 특문(콤마허용)
    //   e.preventDefault();
    //   this.value = '';
    // }
    let money = this.value;
    money = format_remove(money);
    this.value = Number(money).toLocaleString('ko-KR');
  });
    
  // 숫자만 입력받기 => 수수료 00.00
  $(document).on("propertychange change keyup keypress keydown paste input", "input[onlyRate]", function(e) {
    // this.value = this.value.replace(/[^0-9.]/g, '');
    this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
    // this.value = this.value.replace(/[..]/g, '.')
    // this.value = this.value.replace(/[^0-9]/g, '');
    this.value = this.value.replace(/^(\d{1,2})(\d{2})$/, `$1.$2`);
  });
    
  // 숫자만 입력받기 => 전화번호
  $(document).on("propertychange change keyup keypress keydown paste input", "input[onlyTel]", function(e) {
    this.value = this.value.replace(/[^0-9]/g, '');
    this.value = this.value.replace(/^(\d{2,3})(\d{3,4})(\d{3,4})$/, `$1-$2-$3`);
  });

  // input[type="number"] 키보드 방향키 막기
  $(document).on("keydown keypress keyup", "input[type='number']", function(e) {
    if (!((e.keyCode > 95 && e.keyCode < 106)
      || (e.keyCode > 47 && e.keyCode < 58)
      || e.keyCode == 8
      || e.keyCode == 9
      || e.keyCode == 0)
      || /[a-z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g.test(this.value)) {   // 숫자만 입력, 한글 막기
      return false;
    }
  });
    
  // 한글
  $(document).on("propertychange change keyup keypress keydown paste input", "input[onlyKor]", function(e) {
    // if (regExpEmpty.test(this.value)            // 공백
    //   || regExpNumber.test(this.value)         // 숫자
    //   || regExpEng.test(this.value)            // 영어
    //   || regExpSpecial.test(this.value)) {     // 특문
    //   e.preventDefault();
    //   this.value = '';
    // }
    this.value = this.value.replace(/[a-z0-9]|[ \[\]{}()<>?|`~!@#$%^&*-_+=,.;:\"'\\]/g, '');
    // /[a-z0-9]|[ \[\]{}()<>?|`~!@#$%^&*-_+=,.;:\"'\\]/g;
  });

  $(document).on("keypress", "input[onlyKor]", function() {
    if (!/[a-z0-9]|[ \[\]{}()<>?|`~!@#$%^&*-_+=,.;:\"'\\]/g.test(this.value) && e.keyCode != 13) {
      alert("한글만 입력해주세요");
    }
  });
    
  // 한글영문
  $(document).on("propertychange change keyup keypress keydown paste input", "input[onlyText]", function(e) {
    // if (regExpEmpty.test(this.value)            // 공백
    //   || regExpNumber.test(this.value)          // 숫자
    //   || regExpSpecial.test(this.value)) {      // 특문
    //   e.preventDefault();
    //   this.value = '';
    // }
    this.value = this.value.replace(/[0-9]|[ \[\]{}()<>?|`~!@#$%^&*-_+=,.;:\"'\\]/g, '');
    // /[a-z0-9]|[ \[\]{}()<>?|`~!@#$%^&*-_+=,.;:\"'\\]/g
    // /[^ㄱ-힣a-zA-Z]/gi
  });

  // 공백제거
  $(document).on("propertychange change keyup keypress keydown paste input", "input[noGap]", function(e) {
    // if (regExpEmpty.test(this.value)) {   // 공백
    //   e.preventDefault();
    //   this.value = '';
    // }
    this.value = this.value.replace(/\s/g,'');
  });
});

// 금액 콤마(,) 표시
function format_money(item){
  return item = Number(item).toLocaleString('ko-KR');
}

// 핸드폰번호 000-****-0000
function format_phone(phone){
  return phone = phone.replace(/(^02.{0}|^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/,"$1-****-$3");

}

// 핸드폰번호 000-0000-0000
function format_phone_all(phone){
  return phone = phone.replace(/(^02.{0}|^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/,"$1-$2-$3");
}

// 특수문자 제거
function format_remove(item){
  return item = item.replace(/[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/g, "");
}

// 공백제거
function format_noGap(item){
  return item = item.replace(/\s/g,'');
}
JavaScript
This post is licensed under CC BY 4.0 by the author.