정규표현식(regular Expression : regex)
문자열에서 특정 문자 조합을 찾기 위한 패턴입니다. 문자열 패턴을 검색, 매칭하거나 변환하는 데 유용하며 다양한 문자열 작업에서 활용됩니다.
정규표현식 생성
1. 리터럴 표기
/정규 표현식 패턴/
/ ~ / : 시작과 끝.
^ : 패턴의 시작.
[ ] : 안의 문자를 찾음.
[x-z] : x~z사이의 문자를 하나 찾음.
[a-z] : 영문 소문자를 사용
[A-Z] : 영문 대문자를 사용
[가-힣] : 한글을 사용
x+ : x가 1번 이상 반복.
x$ : x로 끝남.
^x : x로 시작.
/d : 숫자.
x{n} : x를 n번 반복한 문자를 찾음.
x{n,m} : x를 n번이상 m번이하 반복한 문자를 찾음.
\x : 예외처리('x를 포함하겠다'는 의미.) (예: 이메일에 -, . 을 포함하고 싶을 때: \-\.)
ex) 아이디 패턴 만들기
- 영문 대문자 또는 소문자 -> 패턴은 []
- 4자 이상 20자 이하 -> 길이는 {}
/^[A-Za-z]{4,20}$/ 주의할 점 : 띄어쓰기없이작성
ex) 이름 패턴 만들기
- 한글만 사용
- +를 줘서 글자수는 무제한
- + 뒤에는 다른 글자 안오게 $로 끝났다는 것을 의미
/^[가-힣]+$/
ex) 휴대폰 번호(010-111-1111 또는 010-1111-1111)
- \d는 숫자의미 {3}으로 3자리로 설정
- 중간에 - 넣어줘서 -가 무조건 필요하게
- {3,4}로 3자 이상 4자 이하
/^\d{3}-\d{3,4}-\d{4}$/
ex) 이메일 패턴 만들기
- 영문대문자또는소문자,숫자로시작
- @과 .이 포함되어야함
- -과 .이 이메일 아이디에 들어가도됨
- []의 바깥쪽에 있는 애는 \ 안넣어도됨
/^[A-Za-z0-9\-\.]+@[A-Za-z0-9\-\.]+\.+[A-Za-z]+$/
정규표현식 적용 함수
test() : 정규표현식의 대입한 문자열이 패턴과 적합하면 true 아니면 false를 리턴
<HTML>
<h2>회원가입</h2>
<form action="#" name="regform" id="regform" method="post" onsubmit="return sendIt()">
<!-- onsubmit 이벤트를 넣으면 버튼이 눌려 submit이 되면 그 전에 return sendIt()을 진행. -->
<!--false면 action이 진행되지 않고 true면 action이 진행됨 -->
<input type="hidden" id="isssn" value="n">
<!--sendit에 이 값이 n이면 못넘어게가게하고 유효성검증이 되면 y로 바꿔서 넘어가게해야함-->
<p>아이디 : <input type="text" name="userid" id="userid" maxlength="20"></p>
<p>비밀번호 : <input type="password" name="userpw" id="userpw" maxlength="20"></p>
<p>비밀번호 확인 : <input type="password" name="userpw_re" id="userpw_re" maxlength="20"></p>
<p>이름 : <input type="text" name="name" id="name" maxlength="10"></p>
<p>휴대폰번호 : <input type="text" name="hp" id="hp" maxlength="20"></p>
<p>이메일 : <input type="text" name="email" id="email" maxlength="50"></p>
<p>성별 : <label for="male">남자</label> <input type="radio" name="gender" value="남자" checked>
<label for="female">여자</label><input type="radio" name="gender" value="여자"></p>
<p>주민등록번호 : <input type="text" name="ssn1" id="ssn1" maxlength="6" class="ssn"> -
<input type="password" name="ssn2" id="ssn2" maxlength=" 7" class="ssn">
<button type="button" onclick="isssn1()">주민등록번호 검증</button></p>
<p> 우편번호 : <input type="text" name="zipcode" id="sample6_postcode" maxlength="5">
<button type="button" onclick="sample6_execDaumPostcode()">우편번호찾기</button> </p>
<p>주소 : <input type="text" name="address1" id="sample6_address"></p>
<p>상세주소 : <input type="text" name="address2" id="sample6_detailAddress"></p>
<p>참고사항 : <input type="text" name="address3" id="sample6_extraAddress"></p>
<p><button>가입완료</button> <button type="reset">다시작성</button></p>
</form>
<script src="./js/script.js" defer></script>
function sendIt(){
//객체를 불러와 객체의 정보(text)를 받아서 조건과 맞는지 체크
const userid = document.getElementById('userid')
const userpw = document.getElementById('userpw')
const userpw_re = document.getElementById('userpw_re')
const name = document.getElementById('name')
const hp = document.getElementById('hp')
const email = document.getElementById('email')
const ssn1 = document.getElementById('ssn1')
const ssn2 = document.getElementById('ssn2')
const isssn = document.getElementById('isssn')
//정규표현식으로 체크
const expIdText = /^[A-Za-z]{4,20}$/
const expPwText = /^(?=.*[A-Za-z])(?=.*[!@#$%^&*=+])(?=.*[0-9]).{4,20}$/
// (?=.*[내용]) = 뭐든 들어와도되는데 순서 상관없이 내용 중 하나 이상은 꼭 들어와야 된다
const expNameText = /^[가-힣]+$/
const expHpText = /^\d{3}-\d{3,4}-\d{4}$/
const expEmailText = /^[A-Za-z0-9\-\.]+@[A-Za-z0-9\-\.]+\.[A-Za-z]+$/
if(!expIdText.test(userid.value)){
alert('아이디는 4자 이상 20자 이하의 영문자로 입력하세요')
userid.focus() //커서가 userid 위에 있게끔 설정
return false
}
if(!expPwText.test(userpw.value)){
alert('비밀번호 4자 이상 20자 이하의 영문,숫자,특수문자를 1자 이상 꼭 포함해야합니다')
userpw.focus()
return false
}
if(userpw.value!=userpw_re.value){
alert('비밀번호가 일치하지 않습니다')
userpw_re.focus()
return false
}
if(!expNameText.test(name.value)){
alert('이름은 한글로 입력해주세요')
name.focus()
return false
}
if(!expHpText.test(hp.value)){
alert('-을 포함하여 전화번호를 입력해주세요')
hp.focus()
return false
}
if(!expEmailText.test(email.value)){
alert('이메일 주소를 확인해주세요')
email.focus()
return false
}
if(!(ssn1.value.length == 6) && !(ssn1.value.length ==7)){
alert('주민등록번호를 입력해주세요')
ssn1.focus()
return false
}
if(isssn.value = 'n'){
ssn1.focus()
return false
}
return true
}<주민번호 유효성 검사>
function isssn1() {
const ssn1 = document.getElementById('ssn1');
const ssn2 = document.getElementById('ssn2');
const isssn = document.getElementById('isssn')
const ssn = ssn1.value + ssn2.value //+라서 자동형변환이 안됨, -같은거 였으면 됨
// alert(ssn)
// 방법1 = 인덱스 ssn[0] 방법2 substr
const key = [2, 3, 4, 5, 6, 7, 8, 9, 2, 3, 4, 5];
let total = 0
for(let i = 0; i < 12; i++){
total += parseInt(ssn[i]) * key[i]
}
let result = total % 11
result = 11 - result
if(result >= 10) result = result % 10 //한줄이라 {} 생략
if (result == Number(ssn[12])) {
alert('주민번호가 유효합니다');
isssn.value = 'y'
console.log(isssn.value)
} else {
alert('주민번호가 유효하지 않습니다');
ssn1.focus()
}
}<주민번호 앞자리 입력이 완료되면 뒷자리로 커서 자동 이동
+ 내용 수정 시 hidden의 value= "n"으로 재설정하기.>
window.onload = function(){
const ssn1 = document.getElementById('ssn1')
const ssn2 = document.getElementById('ssn2')
const isssn = document.getElementById('isssn')
ssn1.addEventListener('keyup',()=>{if(ssn1.value.length > 5) ssn2.focus()})
ssn1.addEventListener('keydown',()=>{isssn.value = 'n'})
ssn2.addEventListener('keydown',()=>{isssn.value = 'n'})
const ssn_new = document.querySelectorAll('.ssn')
ssn.forEach((s)=>{s.addEventListener('input',()=>{
document.getElementById('issn').value = 'n'
})})
}<우편번호 검색 시스템을 쉽게 적용할 수 있는 유용한 사이트.>
https://postcode.map.daum.net/guide
Daum 우편번호 서비스
우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.
postcode.map.daum.net
'웹 > JavaScript' 카테고리의 다른 글
| JavaScript 심화 (0) | 2023.11.06 |
|---|---|
| 이벤트(Event) (0) | 2023.10.30 |
| Node 메서드 (0) | 2023.10.29 |
| Form객체/Document 객체 등 (1) | 2023.10.29 |
| Interval, Timeout 함수 (0) | 2023.10.28 |
