[ Angular ] 정규식 한글 입력 막기

.HTML

<input type="text" [(ngModel)]="id" (keyup)="check('id')" (keydown)="keyCheck(id)" [maxlength]="12" />

가장먼저 실행되고, 길게 눌렀을때 연속적으로 실행하는 keydown을 사용했습니다.

keypress는 영어나 숫자로 변경해서 입력 할 때까지 적용되지 않고, keyup은 한글 완성이 되지 않았을 경우 남게 됩니다.

 

keydown, keypress, keyup 비교 확인하기

 

.TS

keyCheck(e: any) {
    const exptext = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;
    console.log(exptext.test(this.id));
    if(exptext.test(this.id)) {
      this.id = this.id.replace(exptext, '');
    }
}

 

정규식

// 영어만
const eng = /^[a-zA-Z]*$/;

// 숫자만
const num = /^[0-9]*$/;

// 영어 + 숫자
const engNum =  /^[a-zA-Z0-9]*$/;

// 이메일
const email = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+$/;

// 핸드폰
const phone = /^\d{2,3}-\d{3,4}-\d{4}$/;

// 주민등록번호
const resident = /\d{6} \- [1-4]\d{6}/;

// 8자리 이상 영문 + 숫자 + 특수문자 조합
const password = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/;