javascript URL 유효성 처리 방법

입력값에 URL 주소만 허용해야 하는 상황이 발생했을 때, 정규식을 통해 간편하게 유효성 검사를 처리할 수 있으며, 유효성 검사 정책에 따른 커스터마이징도 가능하니 살펴보도록 하겠다.

 

 

 

 

 

 

 

 

정규식 사용

아래와 같이 URL 입력값에 대한 정규식 처리로 원하는 유효성 처리를 수행하였다.

# URL value
var url = $("#url").val();

# 정규식 표현 셋팅
let regex = /^(http(s)?:\/\/)([^\/]*)(\.)(com|net|kr|my|shop)(\/)/gi

# 유효성 처리결과
console.log(regex.test(url));

 

 

 

 

 

 

선언한 정규식에 대한 해설은 다음과 간다.

 

예시1> /^(http(s)?:\/\/)([^\/]*)(\.)(com|net|kr|my|shop)(\/)/gi

 

예시2> /^(http(s)?:\/\/)([a-z0-9\s.-]*)(\.)(com|net|kr|my|shop)(\/)/gi

 

• / : 정규식 시작
• ^ : 문자열의 시작
  • (http(s)?:\/\/) : http:// 또는 https:// 허용
  • : ([^\/]*) 
    
    • ^ 는 not 의미한다 즉, / 를 제외한 모든 문자열을 허용한다는 의미
  • ([a-z0-9\s.-]*)
    • a-z 0-9 . - 만 허용한다는 의미
  • (\.) : . 를 선언해야 한다.
  • (com|net|kr|my|shop) : 선언된 문자만 허용
  • (\/) : / 를 선언해야 한다.
• / : 정규식 끝
• g : 전역
• i : 대소문자 구분없음