회원가입시 아이디나 패스워드 등 유효성을 검사해 주어야 하는데 이때 jQuery의 정규식 표현을 이용하여 유효성을 검사할 수 있다.
var userIdCheck = RegExp(/^[A-Za-z0-9_\-]{5,20}$/);RegExp는 정규표현식을 사용하기 위한 객체이다. 정규표현식은 /와 /사이에 식을 넣어서 사용한다.
위와 같이 변수에 정규 표현식을 저장해 놓고, 다음과 같이 사용할 수 있다.
if(userIdCheck.test($('#userId').val())){
console.log("정규표현식에 맞지 않음");
}자주쓰는 정규표현식
숫자만 입력 가능 : /[^0-9]$/
^는 문자의 시작 부분에 대응하여 $는 끝 부분과 대응하여 숫자만 입력 했는지 검사할 수 있다.
한글만 입력가능 : /[^가-힣]$/
영어만 입력 가능 : /[^a-zA-Z]$/
a-z는 소문자 A-Z는 대문자를 의미하며 소문자와 대문자만 있는지 검사할 수 있으며 /^[a-z]$/i 처럼 사용할 수도 있다.
i는 대소문자를 구분하지 않는다는 것이다. ex) var enCheck = RegExp(/[^a-z]/gi);
영문만 입력 예제
<!DOCTYPE html>
<html>
<head>
<script src="./jquery-3.4.1.min.js"></script>
</head>
<body>
<input type="text" id="test">
<script>
var enCheck = RegExp(/[^a-zA-Z]$/);
$('#test').keyup(function(){
if(enCheck.test($('#test').val())){
console.log("영어 아님 "+$('#test').val());
$('#test').val($('#test').val().replace(/[^a-z]/gi,''));
}
});
</script>
</body>^[a-z]이면 소문자로 시작하는지 [^a-z]면 소문자를 제외하고다. if문에서 영어가 아닌지 검사하여 아니면 로그를 찍고 아닌 문자를 replace로 지워버린다.
회원가입 정규표현식 예제
var userIdCheck = RegExp(/^[A-Za-z0-9_\-]{5,20}$/);
var passwdCheck = RegExp(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^*()\-_=+\\\|\[\]{};:\'",.<>\/?]).{8,16}$/);
var nameCheck = RegExp(/^[가-힣]{2,6}$/);
var nickNameCheck = RegExp(/^[가-힣a-zA-Z0-9]{2,10}$/);
var emailCheck = RegExp(/^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/);
var birthdayCheck = RegExp(/^(19|20)[0-9]{2}(0[1-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])$/);
var phonNumberCheck = RegExp(/^01[0179][0-9]{7,8}$/);userIdCheck : 영문 대.소문자, 숫자 _,-만 입력 가능하고 5에서 20자리를 입력했는지 체크한다 {}사이에는 n과 m을 입력하여 n과 m사이의 값을 입력했는지 체크한다. n만 입력했을 경우 n자리 수 만큼 입력했는지 체크한다.
passwdCheck : 패스워드 체크에서는 영문 대문자와 소문자, 숫자, 특수문자를 하나 이상 포함하여 8~16자가 되는지 검사를 한다.
nameCheck : 2~6글자의 한글만 입력하였는지 검사
nickNameCheck : 한글과 영어, 숫자만 사용하였는지 검사
emailCheck : 이메일 형식에 맞게 썻는지 검사 ex)aa01@aa.aa
birthdayCheck : 생년월일을 형식에 맞게 썻는지 검사 19또는 20으로 시작하여 0~9까지의 수개 2개까지 하여 년도 그 뒤에 0이면1~9 1이면 1~2(1월부터 12월까지기 때문에) 이런식으로 검사를 해준다.
phonNumberCheck : 01로 시작하여 그 다음은 0,1,7,9 중 하나와 매칭되는지 체크한뒤 7~8자리인지 검사한다.
'프로그래밍 > jQuery & javaScript' 카테고리의 다른 글
| jqGrid 사용 예제 (v5.3.2, v4.4.3) (2) | 2019.07.17 |
|---|---|
| jQuery 이미지 클릭 시 크게 보기 (9) | 2019.06.26 |
| jQuery 파일 업로드 미리보기(preview) (3) | 2019.06.24 |
| jQuery 동적태그 이벤트 (0) | 2019.06.21 |
| jQuery Select Box 컨트롤 (내용 추가, 삭제 등) (0) | 2019.06.12 |
