vue.js 휴대폰(전화) 번호 입력 폼(1) - 숫자만 입력 제어

vue.js에서 input 영역에 휴대폰 번호를 입력하는 것을 개발해야할 일이 생겨서 테스트 할겸 정리하게 되었습니다. 기존에 jquery 소스들은 많지만 vue.js에서 간단하게 할수 있는 방법을 찾아서 정리해보고자 글을 씁니다.

화면은 지난번 글에서 생성한 기본 nuxt.js 프로젝트를 이용하도록 하겠습니다.

 

소스

<template>
  <div class="container">
    <div>
      <Logo />
      <h1 class="title">
        전화번호 테스트
      </h1>
    </div>
    1. input number type<br>
    <input
      v-model="mobileNo"
      type="number"
      maxlength="11"
      placeholder="-를 제외하고 입력해주세요."
      oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
    >
    <br>
    2. input text type<br>
    <input v-model="number" type="text" maxlength="11" placeholder="-를 제외하고 입력해주세요." oninput="javascript: this.value = this.value.replace(/[^0-9]/g, '');">
  </div>
</template>

<script>
export default {
  data () {
    return {
      mobileNo: '',
      number: ''
    }
  }
}
</script>

 

index.html에 조금 수정하여 전화번호 테스트를 위한 input을 생성하였습니다.

 

화면

 

설명

input type이 number, text 2개의 케이스로 전화번호 입력 폼을 제어해보았습니다. type의 장단점을 작성해보겠습니다.

•  input type = number

장점 : 전화번호 입력 폼에 부합하는 숫자만 입력된다.

단점 : maxlength 가 적용되지 않는다.

> maxlength 가 적용되지 않지만 input 폼에 maxlength 을 선언하고 oninput 을 이용하여 스크립트 제어 처리한다.

if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);

•  input type = text

장점 : maxlength가 적용되어 휴대폰 번호 길이 제어가 용이하다.

단점 : 숫자만 입력되도록 스크립트 제어가 필요하다.

> oninput 을 이용하여 스크립트 제어 처리한다.

this.value = this.value.replace(/[^0-9]/g, '');

 

이번에는 간단하게 휴대폰 번호 입력 제어를 해보았습니다. 다음편은 -(하이픈) 적용을 해보도록 하겠습니다.