반응형
소개할 소스는 자바스크립트 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에서 사용한 소스지만 자바스크립트 호환되므로 원하는 위치에 삽입하여 사용하시면 됩니다.
반응형
