reg = /^[가-힣]{2,7}$/i
reg.test(테스트할 대상): 'boolean을 반환'
🔹i: 대,소문자 구별없이 검사
🔹^: 처음부터 조건이 맞는지
🔹$: 마지막까지 조건이 맞는지
🔹[A-Za-z0-9_] === \w: 대문자, 소문자, 숫자, _ 조건이 맞는지
🔹{2,8}: 2자리 ~ 8자리까지 허용
🔹()? -> 있어도되고 없어도 된다
🔹(010|011|02|052): 010 또는 011 또는 ~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>regExp</title>
<style>
ul, li{margin:0; padding:0; list-style-type:none; }
.container{
width:1000px; margin:0 auto;
}
#formData>li{
float:left; border-bottom:1px solid #ddd; height:40px; line-height:40px;
}
#formData>li:nth-child(2n+1){
width:15%;
}
#formData>li:nth-child(2n){
width:85%;
}
#formData>li:last-of-type{
width:100%;
}
</style>
</head>
<body>
<script>
var data = "html, javascript";
//정규 표현식
var reg = /java1/i; //i는 대,소문자 구별없이검사를 해라(i를 생략하면 구별함)
//확인(true, false)
console.log( reg.test(data) )
function formCheck(){
// ^ : 처음부터 검색을 하라
// $ : 마지막까지 검색을 하라
//아이디 8~ 15글자 허용, 영어 대소문자, 숫자,_, 첫번째문자여야한다
//formCheck가 onsubmit이벤트에 true른 반환해줘야 member.jsp로 이동하도록 만든다. else '현재 화면 유지'
//{7,14} 7자리~ 14자리 허용, \w = [A-Za-z0-9_]
reg = /[A-Za-z]{1}[A-Za-z0-9_]{7,14}/i
if(!reg.test(document.getElementById("userId").value)){
alert("아이디를 잘못입력하였습니다! \n아이디 8~ 15글자 허용, 영어 대소문자, 숫자,_, 첫번째문자여야한다")
return false;
}
//이름검사: 한글 2-7글자까지 허용
reg = /^[가-힣]{2,7}$/i
if(!reg.test(document.getElementById("username").value)){
alert("이름은 한글로 2~7자리까지 허용")
return false;
}
//주민 번호 검사 831202-1256845 *빈칸 금지 *1자리 경우 생략가능
var jumin = document.getElementById("jumin1").value + "-";
jumin += document.getElementById("jumin2").value;
reg = /^[0-9]{2}[01][0-9][0-3][0-9][-][0-9]{7}/;
if(!reg.test(jumin)){
alert("주민번호가 잘못되었습니다.")
return false;
}
/** 이메일 검사 **
유형1)abcd@hanmail.net
유형2)abcd@naver.com
유형3)abcd@korea.co.kr
()? -> 있어도되고 없어도 된다
예)abcd@korea.co.kr ".kr이 있거나 없거나"
*/
reg = /^\w{8,15}[@][A-Za-z0-9]{2,8}[.][A-Za-z]{2,3}([.][A-Za-z]{2,3})?/i;
if(!reg.test(document.getElementById("email").value) ){
alert("메일 형식이 이상함!");
return false;
}
/*연락처 검사*/
var tel = document.getElementById("tel1").value + "-";
tel += document.getElementById("tel2").value + "-";
tel += document.getElementById("tel3");
reg = /^(010|02|031|032|033|041|042|051|052|053|054|061|062)[-][0-9]{3,4}-[0-9]{4}$/
if(!reg.test(tel)){
alert("전화번호 잘못입력하심")
return false;
}
return true;
//검색
}
function lenChk(input1, len, input2){
if(document.getElementById(input1).value.length >= len){
document.getElementById(input2).focus();
}
}
</script>
<div class="container">
<h1>정규 표현식</h1>
<!--
get:주소표시줄에 데이터가 보임
post: 데이터를 숨겨서 전송
action: 서버에서 실행할 파일명 or form태그에서 '폼 데이터'를 서버로 보낼 때 도착할 URL
> jsp는 HTML+Java 코드를 넣어 동적 웹피이지를 생성하는 웹어플리케이션 도구
> member.jsp에서 아이디와 비번을 서버로 가져와서 DB를 조회한다.
-->
<form method="post" action="member.jsp" onsubmit=" return formCheck()">
<ul id="formData">
<li>아이디</li>
<li><input type="text" name="userId" id="userId" value="ohsooman2"/></li>
<li>이름</li>
<li><input type="text" name="username" id="username" /></li>
<li>주민번호</li>
<li>
<input type="text" name="jumin1" id="jumin1" onkeyup ="lenChk('jumin1', 6,'jumin2')" maxlength="6" />
<input type="text" name="jumin2" id="jumin2" onkeyup ="lenChk('jumin2', 7, 'tel1')" maxlength="7" />
</li>
<li>이메일</li>
<li>
<input type="text" name="email" id="email" value="ohsoomansour@naver.com" />
</li>
<li>연락처</li>
<li>
<input type="text" name="tel1" id="tel1" onkeyup="lenChk('tel1', 3, 'tel2')" /> -
<input type="text" name="tel2" id="tel2" onkeyup="lenChk('tel2', 4, 'tel3')" /> -
<input type="text" name="tel3" id="tel3" onkeyup="lenChk('tel3', 4, 'email')" />
</li>
<li>
<!-- 아래의 3개의 태그들은 form태그 안의 submit을 클릭하면 submit이벤트가 발생한다. -->
<input type="submit" value= "등록"/>
<button>등록</button>
<input type="image" src="">
</li>
</ul>
</form>
</div>
</body>
</html>
풀스택eDot