정리 바로 긔
유효성검사
- 사용자가 입력한 데이터가 양식에 맞는지 검사하는 것
ex) 비밀번호와 비밀번호 확인의 값이 같은지 확인
아이디 또는 비밀번호의 복잡도가 만족하는지- 유효성검사를 통해서 맞지 않으면 false를 리턴하여 submit동작을 하지않게 처리
정규표현식
- 사전적 의미로 특정한 규칙을 가진 문자열의 집합
- 주로 프로그래밍 언어나 Text Editor등에서 문자열의 검색과 치환을 위한 용도로 사용
- 일반 조건문으로 다소 복잡할 수 있는 패턴을 정규표현식을 이용하면 간단하게 표현 가능
- 간단하게 표현 하는 만큼 가독성이 떨어져 표현식을 숙지해야 함
- 확장성에 따라 다양한 정규표현식이 존재하지만 기본적인 것은 비슷함
Meta문자
- 정규표현식에서 사용하는 기호
- 어떠한 의미가 있는 문자
^x
문자열의 시작을 표현 -> x로 시작하는 문자
x$
문자열의 끝을 표현 -> x로 끝나는 문자
.
임의의 한 문자 -> 모든 단일문자를 의미
(a.b)를 표현식으로 사용하면 a임의의 문자b가 들어와야한다. 어떠한 문자이던 상관없지만 .이 들어가는 공간에 무엇이든 들어와있어야 인식한다.
x+
앞의 문자가 1회 이상 반복 -> x가 1번 이상 반복
x*
앞의 문자가 0회 이상 반복 -> x가 0번 이상 반복
x?
앞의 문자가 존재하거나 존재하지 않을 때 사용
이게 대체 무슨말이냐면
/ab?c/를 표현식으로 사용한다면
검사하려는 문단에서 a와c사이에 b가 한번만 있거나 하나도 없는 것들을 검사한다는 뜻이다.
abc : O / ac : O / abbbbc : X
()
(xyz) 괄호안에 있는 내용을 그룹화
xyz가 연결되어있는 경우만 true리턴 / xy : X
[]
[xyz] 괄호사이에 존재하는 문자들 중 하나에 일치
x나y나z 이 셋중에 하나만 들어가있어도 true를 리턴
[^]
[^xyz] not을 표현한 것 / xyz를 제외한 문자를 의미한다.
[x-z]
범위를 표현하며 x~z 사이의 문자를 의미
x{n}
반복을 표현하며 x문자가 n번 반복
x{n,}
반복을 표현하며 x문자가 n번이상 반복
x{n,m}
반복을 표현하며 x문자가 최소 n번이상 최대 m번 이하 반복
\d / \D
역슬래쉬다 저 \ 어차피 같은 의미긴하다.
숫자를 의미안다
대문자는 숫자가 아닌걸 의미한다.
\s / \S
공백과 // 공백이 아닌경우를 의미한다..
\w / \W
w는 word를 표현하며 알파벳+숫자+_중의 한 문자임을 의미하고
대문자는 저 세 경우가 아닌 모든 문자를 의미한다.
Flag
- 정규표현식을 사용할 때 Flag를 사용하지 않으면 문자열에 대해서 검색을 한번만 처리하고 종료
- Flag는 사실 사용햐도 되고 사용하지 않아도 된다.
Flag 표현식
- g : Global -> 문자열 내의 모든 패턴을 찾음
- i : ignore case -> 대상 문자열에 대해서 대/소뮨자를 식별하지 않는 것을 으미
- m : Multi Line -> 대상 문자열이 다중 라이느이 문자열인 경우에도 검색하는 것을 의미
javascript에서 사용
- test() : 일치하는 문자열을 검사할 때 사용(true/false 반환)
- exec() : 일치하는 문자열을 찾을 때 사용 (정보를 가진 배열 반환)
- replace() : 일치하는 문자열을 찾아 대체할 때 사용
회원가입 만들기
다양한 조건을 만들어보기 위해 회원가입 코드를 간단하게 짜봤다.
<body>
<h1>회원가입</h1>
<hr>
<form action="join.html" method="post" autocomplete="">
<table>
<tr>
<th>아이디</th>
<td>
<input type="text" name="id">
<span class="comment">아이디가 조건에 맞지않습니다.</span>
</td>
</tr>
</table>
</form>
</body>아이디, 비밀번호, 비밀번호 확인, 이름, 전화번호, 이메일을 입력받을 건데, 모든 입력받는 항목이 이 위의 th/td의 형식을 따른다. 전화번호만 빼고.
아이디의 입력부터 살펴보자.
아이디
입력조건 : 아이디 검사(영어 소문자/숫자로 4~12글자)
코드//아이디 검사(영어 소문자/숫자로 4~12글자) const idReg = /^[a-z0-9]{4,12}$/; //정규표현식 변수 idReg const id=$("[name=id"); if(!idReg.test(id.val())){ //test()로 id의 값을 검사 id.next().text("아이디는 영어 소문자/숫자로 4~12글자입니다."); id.next().css("color","red"); e.preventDefault();//submit 기본이벤트 제거코드 / 조건에 안맞으면 submit못하게 막음 }else{ id.next().text("사용 가능한 아이디 입니다.") id.next().css("color","green"); };
소문자와 숫자 전체를 포함하도록 a-z,0-9조건을 주고 4글자이상 12글자 이하로 조건을 잡아서 idReg라는 변수에 이 조건을 넣어주었다.
그리고 html의 id를 선택해 변수에 넣어주고, idReg.test()를 통해 조건에 부합하는지 확인한다.
조건에 맞지 않다면 폼태그의 밑에있는(이 포스팅에는 안썼지만 밑에 있다.) input을 동작하지 않도록한다.
preventDefault(); : 해당하는 요소가 가지고있는 기본 이벤트 제거
그런데 이렇게하면 밑에 input[submit]을 클릭해야지만 이게 맞는 조건인지 아닌지 확인할 수 있다.
그래서 즉각적으로 반응하도록 코드를 바꿔줬다.
비밀번호 코드를 보자.
비밀번호
입력조건 : 비밀번호조건(소문자/대문자/숫자로 8~12글자);const pw = $("[name=pw]"); pw.on("change",function(){ const pwReg = /^[a-zA-Z0-9]{8,12}$/; if(!pwReg.test(pw.val())){ pw.next().text("비밀번호는 영어 소문자/대문자/숫자로 8~12글자입니다.") pw.next().css("color","red"); checkArr[1]=false; }else{ pw.next().text("사용 가능한 비밀번호 입니다.") pw.next().css("color","green"); checkArr[1] = true; }; });
또 안보이지만 위에 전역변수로 const checkArr[]을 넣어주었다.
그리고 pw의 변화가 생길때마다 즉각적으로 검사하도록 "change"를 넣어주었다.
만약 조건에 맞지않다면 checkArr에 false값을 넣어줄 것 이다.
다른 코드들도 다 이런 방식으로 코드를 짰는데. 전화번호만 다르다.
왜냐하면 전화번호는 하나의td에 input이 3개있기 때문이다.
전화번호
입력조건 : (전화번호1 : 010만가능, 전화번호2 : 숫자 3~4자리, 전화번호3 : 숫자4자리)const phone1 = $("[name=phone1]"); const phone2 = $("[name=phone2]"); const phone3 = $("[name=phone3]"); phone1.on("change",function(){ checkArr[4] = checkphone(phone1,phone2,phone3); }); phone2.on("change",function(){ checkArr[4] = checkphone(phone1,phone2,phone3); }); phone3.on("change",function(){ checkArr[4] = checkphone(phone1,phone2,phone3); });
이렇게 각각의 input을 선택해 변화가 있을때마다 checkphone()함수를 실행해서 확인했다.
function checkphone(phone1,phone2,phone3){
const phone1Reg = /(010)/;
const phone2Reg = /^[0-9]{3,4}$/;
const phone3Reg = /^[0-9]{4}$/;
if(phone1Reg.test(phone1.val())&&phone2Reg.test(phone2.val())&&phone3Reg.test(phone3.val())){
phone3.next().text("좋습니다.");
phone3.next().css("color","green");
return true;
}else{
phone3.next().text("(전화번호1 : 010만가능, 전화번호2 : 숫자 3~4자리, 전화번호3 : 숫자4자리)");
phone3.next().css("color","red");
return false;
};
}앞에는 010만 가능하니까 (010) 또는 010, 뒤에 2개는 뭐... 위에 설명 보면 알 수 있다고 믿는당.
귀찮아이...
마지막으로 이메일을 한번 보자.
이메일
입력조건 : 이메일(영어/숫자4~12자리@)const emailReg = /^[a-zA-z0-9]{4,12}@/; const email = $("[name=email]"); email.on("change",function(){ if(!emailReg.test(email.val())){ email.next().text("이메일(영어/숫자4~12자리@)"); email.next().css("color","red"); checkArr[5]=false; }else{ email.next().text("잘해쏘!!"); email.next().css("color","green"); checkArr[5]=true; } });
입력조건이 영어/숫자 4~12자리 이후 @가 들어오는 것 이다.
그래서 조건을 ^[a-zA-z0-9]{4,12}로 잡아주고 뒤에 @가 들어오도록 @를 붙여줬다. 그 후에 조건을 닫았다.
이 뒤에는 뭐 똑같다.
오늘은 이정도로 정리해본다. 안뇽!
