[Java script] 플러그인 사용안하고 정규식 체크(Validate)

Jquery 에서는 $.test() 메서드로,
PHP 에서는 preg_match() 함수로 사용

전화번호 체크 정규식

function isMobile(phoneNum) { 
  phoneNum;
  phoneNum = phoneNum.split('-').join('');
  //하이픈 없는버전
 var regExp =/(01[016789])([1-9]{1}[0-9]{2,3})([0-9]{4})$/; 
 //중간에 하이픈 넣는 버전
 var regExp = /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/
 
  
  var myArray; 
  if(regExp.test(phoneNum)){ 
    myArray = regExp.exec(phoneNum); 
    //핸드폰번호 형식에 해당하는 경우
    return true; 
  }else { 
   //핸드폰번호 형식에 해당하지 않는 경우
    return false; 
  } 
}

또는

function isCelluar(asValue) {
 
	var regExp = /^01(?:0|1|[6-9])-(?:\d{3}|\d{4})-\d{4}$/;
 
	return regExp.test(asValue); // 형식에 맞는 경우 true 리턴
 
}

추가정보. 1

//핸드폰 번호 사이에 - 를 넣고싶으면 ?
let userTel = // 인풋
userTel= userTel.val() //인풋에서 받아오는 value
userTel = userTel.substr(0,3) + "-" + userTel.substr(3,4) + "-" + userTel.substr(7,4) 
 
//출력
010-1234-5678

추가정보. 2 

//숫자만 입력 가능하게 하기
$(".phone").on('keyup',function(e) {
  $(this).val($(this).val().replace(/[^0-9]/gi,""))
});

추가정보. 3

 input type을 number 로 해야할경우
 mexlength를 인식 못함

html

<input type="number" class="pone" maxlength="11" oninput="maxLengthCheck(this)" />

js

function maxLengthCheck(object){
  if (object.value.length > object.maxLength){
    object.value = object.value.slice(0, object.maxLength);
  }    
}

 

이메일 체크 정규식

function isEmail(asValue) {
 
	var regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
 
	return regExp.test(asValue); // 형식에 맞는 경우 true 리턴	
 
}

 

비밀번호 체크 정규식

function isJobPassword(asValue) {
 
	var regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z]{8,10}$/; //  8 ~ 10자 영문, 숫자 조합
 
	return regExp.test(asValue); // 형식에 맞는 경우 true 리턴
 
}

 

이름 체크 정규식

//한글만 받을 경우 (띄어쓰기 불가)
var pattern = /^[가-힣]{2,4}$/;
 
//영문만 받을 경우 (띄어쓰기 가능 '\s' 는 공백을 의미한다.)
var pattern = /^[a-zA-Z]{2,10}\s[a-zA-Z]{2,10}$/;
 
//둘다 체크(혼용X ,  '|' 또는 이란 의미)
var pattern = /^[가-힣]{2,4}|[a-zA-Z]{2,10}\s[a-zA-Z]{2,10}$/;
 
적용
 
function btnSubmit() {
  // 확인 : 이름
  $('#name').val($('#name').val().trim());
  if(!chkName($('#name').val())) {
   alert('이름을 확인하세요.(한글 2~4자 이내)');
   $('#name').focus();
   return false;
  } else {
   return true;
  }
}

{2,4} = 2에서 4자 이내란 의미

 

정리

html

 <input type="text" class="userName" maxlength="10" placeholder="성함을 입력해주세요.">
 <input type="text" class="userPhone" maxlength="11" placeholder="전화번호를 입력해주세요.">

js

정규식 체크

var userName = $.trim($('.userName').val()) //이름 내 빈공간 제거한 값
var userPhone = $.trim($('.userPhone').val()) //전화번호 내 빈공간 제거한 값
 
if (userName === '') {
 // 만약 이름값이 비어있다면
 //userName항목에 포커스를 걸어주세요
 $('.userName').focus();
 
} else if (userName) {
 
}

 

주의 : 띄어쓰기 불가능

한글만 입력 가능	var 변수명 =  /^[가-힣]+$/;	길이 제한 두려면    /^[가-힣]{2,4}$/; 넣어주기
숫자만 입력 가능	var 변수명 =  /^[0-9]*$/;
영문만 입력 가능	var 변수명 = /^[a-zA-Z]+$/;
한글 + 영문만 입력가능 (혼용 x )	var 변수명 =  /^[가-힣a-zA-Z]+$/;
아이디( 영문 + 숫자)	var 변수명 = /^[a-zA-Z0-9]$/;	영어 대소문자, 숫자, - , _ 사용가능
비밀번호 (영문/숫자+ 특수문자)	var 변수명 = /^(?=.*[a-zA-Z])((?=.*\d)|(?=.*\W).{8,15})/;	8~15자 이내, 최소 1개의 숫자 혹은 특수문자 포함
( 영문 + 숫자 )	/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,15}/	적어도 소문자 하나, 대문자 하나, 숫자 하나가 포함되어 있는 문자열(8글자 이상 15글자 이하)
이메일 주소	var 변수명 = /^[a-z0-9_+.-]+@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/
전화번호	var 변수명 = /^\d{2,3}-\d{3,4}-\d{4}$?;	000      -      0000       -     0000 2~3자리       3~4자리         4자리
핸드폰번호	var 변수명 = /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/;	010 - 0000 - 0000
url	var 변수명 = /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$
도메인 형태, http:// https:// 포함안해도 되고 해도 되고	/^(((http(s?))\:\/\/)?)([0-9a-zA-Z\-]+\.)+[a-zA-Z]{2,6}(\:[0-9]+)?(\/\S*)?$/
도메인 형태, http:// https:// 포함하면 안됨	/^[^((http(s?))\:\/\/)]([0-9a-zA-Z\-]+\.)+[a-zA-Z]{2,6}(\:[0-9]+)?(\/\S*)?$/

 

function ValidUrl(str) {
 
  var pattern = new RegExp('^(https?:\\/\\/)?'+ // 프로토콜
 
  '((([a-z\d](([a-z\d-]*[a-z\d])|([ㄱ-힣]))*)\.)+[a-z]{2,}|'+ // 도메인명 <-이부분만 수정됨
 
  '((\\d{1,3}\\.){3}\\d{1,3}))'+ // 아이피
 
  '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // 포트번호
 
  '(\\?[;&a-z\\d%_.~+=-]*)?'+ // 쿼리스트링
 
  '(\\#[-a-z\\d_]*)?$','i'); // 해쉬테그들
 
  if(!pattern.test(str)) {
 
    return false;
 
  } else {
 
    return true;
 
  }
 
}
 
 
 
출처: https://dvlp.tistory.com/219 [DVLP]

참고 : for1123.tistory.com/30     참고 : okkks.tistory.com/927   참고: regexr.com/ 참고 : gocoding.tistory.com/93