Vue.js 자바스크립트 ip 주소 확인 정규표현식

소개할 소스는 자바스크립트 ip 주소 마스킹 소스와 ip 확인 정규식입니다. Vue.js에서 작업해 Watch 등이 보이긴 하는데, 자바스크립트 소스만 참고하시면 되니깐 큰 문제는 없습니다.

1. 세자리 마다 . dot 추가하는 정규표현식

@Watch('inputIp')

onIpChange(value: any, oldValue: any) {

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

  if (/^(\d{3})(\d)/.test(value)) {

    ip = value.replace(/^(\d{3})(\d)/, '$1.$2');

  }

  if (/^(\d{3}.\d{3})(\d)/.test(value)) {

    ip = value.replace(/^(\d{3}.\d{3})(\d)/, '$1.$2');

  }

  if (/^(\d{3}.\d{3}.\d{3})(\d)/.test(value)) {

    ip = value.replace(/^(\d{3}.\d{3}.\d{3})(\d)/, '$1.$2');

  }

}

괄호 가운데 \d{3}. 을 통해 세자리마다 dot 점을 추가합니다.

만약, 192.168.0. 이런식으로 사용해도 문제 없는 소스니깐 일단 사용해 보시길 권합니다.

2. IP 유효성 체크

this.inputIp = ip;

if

(/^(?!.*\.$)((?!0\d)(1?\d?\d|25[0-5]|2[0-4]\d)(\.|$)){4}$/g.test(this.inputIp) === true)

Vue.js에서 사용한 소스지만 자바스크립트 호환되므로 원하는 위치에 삽입하여 사용하시면 됩니다.