정규 표현식 또는 정규식은 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이다. 정규 표현식은 많은 텍스트 편집기와 프로그래밍 언어에서 문자열의 검색과 치환을 위해 지원하고 있으며, 특히 펄과 Tcl은 언어 자체에 강력한 정규 표현식을 구현하고 있다.
주소 : https://regexr.com/
- 아이디 정규표현식 (영문자로 시작하는 영문자 또는 숫자 6~20자)
function id(val) { let regExp = /^[a-z]+[a-z0-9]{5,19}$/g; return regExp.test(val); }
2-1.비밀번호 정규표현식 (8 ~ 16자 영문, 숫자 조합)
function pw(val) { let regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z]{8,16}$/; return regExp.test(val); }
2-2.비밀번호 정규표현식 8 ~ 16자 영문, 숫자, 특수문자를 최소 한가지씩 조합)
function pw(val) { let regExp = /^(?=.*[a-zA-z])(?=.*[0-9])(?=.*[$`~!@$!%*#^?&\\(\\)\-_=+]).{8,16}$/; return regExp.test(val); }
- 휴대전화번호
function phone(val) { let regExp = /^01(?:0|1|[6-9])-(?:\d{3}|\d{4})-\d{4}$/; return regExp.test(phone);
- 이메일
function main(val) { let 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(val); }
결과
HTML
<body>
<div id="wrap">
<div class="contents">
<div class="section1">
<ul>
<li>
<h2>회원서비스</h2>
</li>
<li><a href="#" title="로그인"><span>로그인</span></a></li>
<li><a href="#" title="회원가입" class="join on"><span>회원가입</span></a></li>
<li><a href="#" title="아이디/비밀번호찾기"><span>아이디/비밀번호찾기</span></a></li>
</ul>
</div>
<div class="section2">
<div class="title">
<h1>회원가입</h1>
</div>
<div class="content">
<form action="member.php" id="member" method="post" name="member">
<ul>
<li>
<div class="line">
<img src="./img/dot.png" alt="불릿">표는 필수 입력 사항이며, [동일아이디검색] 및 [가입여부확인] 버튼을 반드시 눌러주세요.
</div>
</li>
<li>
<div class="left">
<label><span>사업장관리번호</span><img src="./img/dot.png" alt="불릿"></label>
</div>
<div class="right">
<input type="text" id="number" name="nember" required>
<button class="allBtn atype">사업장관리번호 확인</button>
<button class="allBtn popup">사업장관리번호 확인방법</button>
</div>
</li>
<li>
<div class="left">
<label><span>사업장기호</span><img src="./img/dot.png" alt="불릿"></label>
</div>
<div class="right">
<input type="text" id="giho" class="giho-input" name="giho" readonly placeholder="사업장관리번호확인 버튼을 클릭하여 검증하시면 자동입력 됩니다.">
</div>
</li>
<li>
<div class="left">
<label><span>단위사업장기호</span><img src="./img/dot.png" alt="불릿"></label>
</div>
<div class="right">
<button class="allBtn atype">단위사업장검색</button>
<input type="text" id="giho2" name="giho2" class="giho-input" readonly>
<button class="allBtn atype">가입여부확인하기 (실명확인)</button>
</div>
</li>
<li>
<div class="left">
<label><span>사업장관리아이디</span><img src="./img/dot.png" alt="불릿"></label>
</div>
<div class="right">
<input type="text" id="id" name="id" placeholder="영문+숫자 6~10자 이내" required><em class="point"></em>
<button class="allBtn atype check">아이디중복검색</button>
</div>
</li>
<li>
<div class="left">
<label><span>비밀번호</span><img src="./img/dot.png" alt="불릿"></label>
</div>
<div class="right">
<input type="password" id="pw" name="pw" class="pw-input" placeholder="영문+숫자+특수문자(!@#$) 각 1자 이상 포함하여 9~12자 이내" required><em class="point"></em>
</div>
</li>
<li>
<div class="left">
<label><span>비밀번호확인</span><img src="./img/dot.png" alt="불릿"></label>
</div>
<div class="right">
<input type="password" id="pw1" name="pw1" class="pw-input" placeholder="영문+숫자+특수문자(!@#$) 각 1자 이상 포함하여 9~12자 이내" required><em class="point"></em>
</div>
</li>
<li>
<div class="left">
<label><span>비밀번호 분실 시 확인 질문</span><img src="./img/dot.png" alt="불릿"></label>
</div>
<div class="right">
<select name="question" id="question" class="select-box">
<option >질문을 선택하세요</option>
<option value="나의 아버지 성함은?">나의 아버지 성함은?</option>
<option value="나의 그리운 고향은?">나의 그리운 고향은?</option>
<option value="나의 첫째아이 이름은?">나의 첫째아이 이름은?</option>
<option value="나의 초등학교 이름은?">나의 초등학교 이름은?</option>
<option value="input">직접입력</option>
</select>
<input type="text" id="selfinput" name="selfinput" placeholder="질문을 직접 입력해 주세요. 조회질문은 20자이내(공백포함) 입니다.">
</div>
</li>
<li>
<div class="left">
<label><span>비밀번호 분실 시 확인 답변</span><img src="./img/dot.png" alt="불릿"></label>
</div>
<div class="right">
<input type="text" id="answer" name="answer" class="answer-input" placeholder="조회 답변은 띄어쓰기 포함 10자 이내" required>
</div>
</li>
<li>
<div class="left">
<label><span>전화번호</span><img src="./img/dot.png" alt="불릿"></label>
</div>
<div class="right">
<input type="text" id="phone" name="phone" class="phone-input" placeholder='"- (하이픈)” 없이 입력 (예 : 01012345678) 전화번호 입력' required><em class="point"></em>
</div>
</li>
<li>
<div class="left">
<label><span>팩스번호</span></label>
</div>
<div class="right">
<input type="text" id="fax" name="fax" class="fax-input" placeholder='"- (하이픈)” 없이 입력 (예 : 01012345678) 전화번호 입력'><em class="point"></em>
</div>
</li>
<li>
<div class="left">
<label><span>업무담당자명</span><img src="./img/dot.png" alt="불릿"></label>
</div>
<div class="right">
<input type="text" id="person" name="person" class="person-input" placeholder="사업장의 소속된 직장 가입자 직원 또는 대표자" required>
</div>
</li>
<li>
<div class="left">
<label><span>이메일</span><img src="./img/dot.png" alt="불릿"></label>
</div>
<div class="right">
<input type="text" id="email1" name="email" class="email-input" required>
<span class="a">@</span>
<input type="text" id="email2" name="email" class="email-input">
<select name="question1" id="question1" class="select-box2">
<option value="">직접입력</option>
<option value="naver.com">naver.com</option>
<option value="daum.net">daum.net</option>
</select>
</div>
</li>
<li>
<div class="left">
<label><span>홈페이지주소</span></label>
</div>
<div class="right">
<input type="text" id="homepage" name="homepage" class="homepage-input" placeholder="http://">
</div>
</li>
<li>
<div class="left">
<label><span>소식지 수신여부</span></label>
</div>
<div class="right">
<input type="radio" class="news-input" id="news1" value="ok"><label class="newstxt" for="news1">받음</label>
<input type="radio" class="news-input" id="news2" value="no"><label class="newstxt" for="news2">안받음 (공단의 다양한 소식을 무료로 만나보세요)</label>
</div>
</li>
<li>
<div class="button-box">
<button class="submit">확인</button>
<button class="return">취소</button>
</div>
</li>
</ul>
</form>
</div>
</div>
</div>
</div>
</body>
CSS
*{margin: 0; padding: 0;}
a{text-decoration: none; color: #222;}
ul{list-style: none;}
em{font-style: normal;}
#wrap{width: 100%; margin-bottom: 500px;}
.contents{display: flex; width: 1180px; justify-content: space-between; margin: 50px auto;}
.contents .section1{flex-basis: 220px; }
.section1 ul{}
.section1 ul li{}
.section1 ul li h2{font-size: 28px; font-weight: 700; margin-bottom: 10px; border-bottom: 2px solid #222; padding-bottom: 20px;}
.section1 ul li a{display: block; padding: 10px 0; border-bottom: 1px solid #ccc; color: #333;}
.section1 ul li a.on{color: tomato; font-weight: 700;}
.section1 ul li a span{}
.contents .section2{flex-basis: 920px; height: 1000px;}
.section2 .title{width: 100%; height: 40px; margin-bottom: 20px;}
.section2 .line{width: 100%; border-bottom: 2px solid #222; padding: 10px 0 10px 10px;}
.section2 .line img{position: relative; top: -3px; left: -5px;}
.section2 ul li{border-bottom: 1px solid #ddd; display: flex; padding: 15px 0;}
.section2 ul li:first-child{border-bottom: none; padding: 0;}
.section2 ul li .left{flex-basis: 170px; padding-right: 5px;}
.section2 ul li .left label{display: block; padding-top: 10px;}
.section2 ul li .left label img{position: relative; left: 5px; top: -3px;}
.section2 ul li .right{ display: flex; position: relative; flex-wrap: wrap;}
.section2 ul li .right input{background: #fff2f2 ; border-radius: 5px; border: 1px solid #ffd7d2; height: 40px; padding: 0 10px; outline: none; margin-right: 10px;}
.section2 ul li .right .atype{background: #fff; border-radius: 5px; border: 1px solid #333; height: 42px; padding: 0 10px; color: #333; margin-right: 10px;}
.section2 ul li .right .atype:hover{background: rgb(243, 243, 243);}
.section2 ul li .right .popup{background: #44465c; border-radius: 5px; border: 1px solid #fff2ff; height: 42px; padding: 0 10px; color: #fff;}
.section2 ul li .right .popup:hover{background: #3b3b3b;;}
.section2 ul li .right .giho-input{background: rgb(243, 243, 243); height: 42px; padding: 0 10px; border: 1px solid #ccc;}
.section2 ul li .right #giho{width: 700px;}
.section2 ul li .right #giho{width: 700px;}
.section2 ul li .right .pw-input{width: 500px;}
.section2 ul li .right #question{display: block; width: 304px; margin-bottom: 5px;}
.section2 ul li .right #selfinput{width: 400px; display: none;}
.section2 ul li .right #selfinput.on{display: block;}
.section2 ul li .right #email2.color{background: #f1f1f1; color: #6c6c6c; border: 1px solid #ccc;}
.section2 ul li .right .answer-input{width: 500px;}
.section2 ul li .right .phone-input{width: 400px;}
.section2 ul li .right .fax-input{width: 400px; background: #fff; border: 1px solid #ededed;}
.section2 ul li .right .person-input{width: 500px;}
.section2 ul li .right .email-input{width: 150px;}
.section2 ul li .right .homepage-input{width: 400px; background: #fff; border: 1px solid #ededed;}
.section2 ul li .right select{background: #fff2f2 ; border-radius: 5px; border: 1px solid #ffd7d2; height: 40px; padding: 0 10px; outline: none; margin-right: 10px;}
.section2 ul li .right select option{}
.section2 ul li .right .select-box{width: 300px;}
.section2 ul li .right .select-box2{width: 130px;}
.section2 ul li .right span{position: relative; top: 8px; left: -5px;}
.section2 ul li .right .newstxt{position: relative; top: 8px; margin-right: 10px;}
.section2 ul li .button-box{width: 200px; margin: 10px auto;}
.section2 ul li .button-box button{width: 90px; border: none; outline: none; height: 50px; border-radius: 5px;}
.section2 ul li .button-box .submit{background: tomato; color: #fff; margin-right: 10px;}
.section2 ul li .right input.error{border: 2px solid red;}
.section2 ul li .right .select-box.error{border: 2px solid red;}
.point{position: absolute; bottom: -14px; left: 0; font-size: 11px; color: #f00;}
script
//아이디
$('#id').on({keyup:function(event){
event.preventDefault();
//영문+숫자 6~10자 이내
let regExp=/^(?=.*[A-Za-z])+(?=.*[0-9])+[A-Za-z0-9]{6,10}$/g;
let idValue=$(this).val().toString();
if(regExp.test(idValue)===false){
$(this).addClass('error');
else{
$(this).removeClass('error');
}
},focusout:function(event){
event.preventDefault();
let idValue=$(this).val().toString();
if(idValue===''){
$(this).removeClass('error');
$(this).next('.point').text('※필수입력값입니다.')/* 이부분 이상함 */
}
}
});
//아이디 중복확인
$('.check').on({click:function(e){
e.preventDefault();
let regExp=/^(?=.*[A-Za-z])+(?=.*[0-9])+[A-Za-z0-9]{6,10}$/g;
if($('#id').val()===''){
alert('아이디를 입력하세요.')
}else if(reeExp.test($('#id').val())===false){
alert('아이디를 확인하세요.')
}
}})
//비밀번호
$('#pw').on({keyup:function(event){
event.preventDefault();
//영문+숫자+특수문자(!@#$) 각 1자 이상 포함하여 9~12자 이내
let regExp=/^(?=.*[A-Za-z])+(?=.*[0-9])+(?=.*[!@#$])+[A-Za-z0-9!@#$]{9,12}$/g;
let pwValue=$(this).val().toString();
if(regExp.test(pwValue)===false){
$(this).addClass('error');
$(this).next('.point').text('영문+숫자+특수문자(!@#$) 각 1자 이상 포함하여 9~12자 이내값만 사용')
}
else{
$(this).removeClass('error');
$(this).next('.point').text('');
}
},focusout:function(event){
let pwValue=$(this).val().toString();
if(pwValue===''){
$(this).removeClass('error');
$(this).next('.point').text('※필수입력값입니다.');
}
}
});
//비밀번호확인
$('#pw1').on({keyup:function(event){
event.preventDefault();
//영문+숫자+특수문자(!@#$) 각 1자 이상 포함하여 9~12자 이내
let pwValue=$(this).val().toString();
if($('#pw').val()===pwValue){
$(this).removeClass('error');
$(this).next('.point').text('')
}
else{
$(this).addClass('error');
$(this).next('.point').text('비밀번호를 다시 확인해주세요')
}
},focusout:function(event){
let pwValue=$(this).val().toString();
if(pwValue===''){
$(this).removeClass('error');
$(this).next('.point').text('※필수입력값입니다.');
}
}
});
//분실질문
$('#question').on({
change:function(e){
e.preventDefault();
if($(this).val() === "input"){
$('#selfinput').addClass('on')
$('#selfinput').focus();
}
else{
$('#selfinput').removeClass('on')
}
}
});
//전화번호 -(하이픈) 없이 입력 (예 : 01012345678)
$('#phone').on({keyup:function(event){
event.preventDefault();
let regExp=/^01[06789]{1}[0-9]{3,4}[0-9]{4}$/;
let phValue=$(this).val().toString();
if(regExp.test(phValue)===false){
$(this).addClass('error');
$(this).next('.point').text('공백,하이픈 없이 입력해주세요.')
}else{
$(this).removeClass('error');
$(this).next('.point').text('')
}
},focusout:function(){
let phValue=$(this).val().toString();
if(phValue===""){
$(this).removeClass('error');
}
}
});
//팩스번호
//ex
//0505 1234 5555
//02 1234 5555
//031 1234 5555
$('#fax').on({keyup:function(event){
event.preventDefault();
let regExp=/^0[0-9]{1,3}[0-9]{3,4}[0-9]{4}$/;
let fxValue=$(this).val().toString();
if(regExp.test(fxValue)===false){
$(this).addClass('error');
$(this).next('.point').text('공백,하이픈 없이 입력해주세요.')
}else{
$(this).removeClass('error');
$(this).next('.point').text('')
}
},focusout:function(){
let fxValue=$(this).val().toString();
if(fxValue===""){
$(this).removeClass('error');
}
}
});
//email
$('#email1').on({keyup:function(event){
event.preventDefault();
let regExp=/^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z]){5,10}$/i;
let emValue=$(this).val().toString();
if(regExp.test(emValue)===false){
$(this).addClass('error');
/* $(this).next('.point').text('공백,하이픈 없이 입력해주세요.') */
}else{
$(this).removeClass('error');
/* $(this).next('.point').text('') */
}
},focusout:function(){
let emValue=$(this).val().toString();
if(emValue===""){
$(this).removeClass('error');
}
}
});
$('#question1').on({change:function(){
if($(this).val()!==''){
$('#email2').val($(this).val()).prop('disabled',true);
}else{
$('#email2').prop('disabled',false);
$('#email2').val('').focus();
}
}
});
1. script (아이디 , 아이디 중복확인)
//아이디 $('#id').on({keyup:function(event){ event.preventDefault(); //영문+숫자 6~10자 이내 let regExp=/^(?=.*[A-Za-z])+(?=.*[0-9])+[A-Za-z0-9]{6,10}$/g; let idValue=$(this).val().toString(); if(regExp.test(idValue)===false){ $(this).addClass('error'); else{ $(this).removeClass('error'); } },focusout:function(event){ event.preventDefault(); let idValue=$(this).val().toString(); if(idValue===''){ $(this).removeClass('error'); $(this).next('.point').text('※필수입력값입니다.')/* 이부분 이상함 */ } } }); //아이디 중복확인 $('.check').on({click:function(e){ e.preventDefault(); let regExp=/^(?=.*[A-Za-z])+(?=.*[0-9])+[A-Za-z0-9]{6,10}$/g; if($('#id').val()===''){ alert('아이디를 입력하세요.') }else if(reeExp.test($('#id').val())===false){ alert('아이디를 확인하세요.') } }})
01. ID
$('#id')
라는 이름을 가지고 on 그룹메서드를 사용하여 함수를 만든다.regExp
라는 변수명을 만들고정규식표현
을 사용하고영문 + 숫자 6~10자
이라고한다/^(?=.*[A-Za-z])+(?=.*[0-9])+[A-Za-z0-9]{6,10}$/g;
a-z
,A-Z
와0-9
이다 따로 값은 주지 않았다.마지막{6,10}
은 6에서 10이하의 값을 만들도록한다.
let idValue=$(this).val().toString();
은 idValue가 비어있으면alert('아이디를 입력하세요.')
라고alert
가 뜬다.
또 위의 정규식에 벗어난ex: 특수문자
를 사용하면if(regExp.test(idValue)===false)
에 의해 클래스error
가 추가된다.
02. ID 중복확인
아이디 중복검색 버튼인
<button class="allBtn atype check">아이디중복검색</button>
클래스
check
를 만들었었다.check
를on
메서드를 이용하여 클릭함수를 만든다.[문제해결] 아직 중복확인은 구현되지 않는다.
2. script (비밀번호 , 비밀번호 확인)
//비밀번호 $('#pw').on({keyup:function(event){ event.preventDefault(); //영문+숫자+특수문자(!@#$) 각 1자 이상 포함하여 9~12자 이내 let regExp=/^(?=.*[A-Za-z])+(?=.*[0-9])+(?=.*[!@#$])+[A-Za-z0-9!@#$]{9,12}$/g; let pwValue=$(this).val().toString(); if(regExp.test(pwValue)===false){ $(this).addClass('error'); $(this).next('.point').text('영문+숫자+특수문자(!@#$) 각 1자 이상 포함하여 9~12자 이내값만 사용') } else{ $(this).removeClass('error'); $(this).next('.point').text(''); } },focusout:function(event){ let pwValue=$(this).val().toString(); if(pwValue===''){ $(this).removeClass('error'); $(this).next('.point').text('※필수입력값입니다.'); } } }); //비밀번호확인 $('#pw1').on({keyup:function(event){ event.preventDefault(); //영문+숫자+특수문자(!@#$) 각 1자 이상 포함하여 9~12자 이내 let pwValue=$(this).val().toString(); if($('#pw').val()===pwValue){ $(this).removeClass('error'); $(this).next('.point').text('') } else{ $(this).addClass('error'); $(this).next('.point').text('비밀번호를 다시 확인해주세요') } },focusout:function(event){ let pwValue=$(this).val().toString(); if(pwValue===''){ $(this).removeClass('error'); $(this).next('.point').text('※필수입력값입니다.'); } } });
01. 비밀번호
아이디
pw
에on
메서드를 이용하여keyup
함수를 이용하여let regExp=/^(?=.*[A-Za-z])+(?=.*[0-9])+(?=.*[!@#$])+[A-Za-z0-9!@#$]{9,12}$/g;
ㄴ정규식 (영문+숫자+특수문자(!@#$) 각 1자 이상 포함하여 9~12자 이내) 를 기준으로
if(regExp.test(pwValue)===false)
조건문
에서test
를 사용하여 정규식을 기준으로 테스트를 하여true
,false
값이false
(정규식의 기준으로 입력하지 않음) 와 같다면
에러박스 효과와 함께$(this).next('.point').text('영문+숫자+특수문자(!@#$) 각 1자 이상 포함하여 9~12자 이내값만 사용')
text
가 뜬다.
그외에focusout
을 추가하여 동일한 기능을 넣는다.02. 비밀번호확인
확인은 위에 작성된
비밀번호
if($('#pw').val()===pwValue)
와 값이 같은지 여부를 확인하면 된다.
3. script (분실질문)
$('#question').on({ change:function(e){ e.preventDefault(); if($(this).val() === "input"){ $('#selfinput').addClass('on') $('#selfinput').focus(); } else{ $('#selfinput').removeClass('on') } } });
아이디
question
은select
박스로 되어있고option
의 값이 나오게 된다.
html
에서 직접입력option
에는value="input"
을 만들어 두었다.<option value="input">직접입력</option>
따라서
change function
을 사용하고 조건문this
의 밸류값이input
이라면#selfinput
에서 클래스on
이 추가된다.
on
이 추가되면
이렇게 직접입력창이 나타나면서 질문을 직접입력가능하다.
4. script (전화번호)
//전화번호 -(하이픈) 없이 입력 (예 : 01012345678) $('#phone').on({keyup:function(event){ event.preventDefault(); let regExp=/^01[06789]{1}[0-9]{3,4}[0-9]{4}$/; let phValue=$(this).val().toString(); if(regExp.test(phValue)===false){ $(this).addClass('error'); $(this).next('.point').text('공백,하이픈 없이 입력해주세요.') }else{ $(this).removeClass('error'); $(this).next('.point').text('') } },focusout:function(){ let phValue=$(this).val().toString(); if(phValue===""){ $(this).removeClass('error'); } } });
아이디
phone
에keyup
를 하면
*정규식 (하이픈 없이 01# / ### or #### (3~4자리) / #### (4자리)) 로 구성하였다.let regExp=/^01[06789]{1}[0-9]{3,4}[0-9]{4}$/;
마찬가지로 밸류값이 정규식에 맞는지 여부를 확인하고 에러 , 에러텍스트가 나타난다.
- 정규식 대로 올바르게 입력할 때
- 정규식 대로 올바르게 입력하지 않았을 때
5. script (이메일)
//email $('#email1').on({keyup:function(event){ event.preventDefault(); let regExp=/^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z]){5,10}$/i; let emValue=$(this).val().toString(); if(regExp.test(emValue)===false){ $(this).addClass('error'); /* $(this).next('.point').text('공백,하이픈 없이 입력해주세요.') */ }else{ $(this).removeClass('error'); /* $(this).next('.point').text('') */ } },focusout:function(){ let emValue=$(this).val().toString(); if(emValue===""){ $(this).removeClass('error'); } } }); $('#question1').on({change:function(){ if($(this).val()!==''){ $('#email2').val($(this).val()).prop('disabled',true); }else{ $('#email2').prop('disabled',false); $('#email2').val('').focus(); } } });
*이메일 정규식 (시작은 0-9, a-z, A-Z) 다음 (- _ .) 특수문자 허용 다음 (0-9, a-z, A-Z) 총 5~10자리수)
let regExp=/^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z]){5,10}$/i;
를 넣고 동일하게 정규식과 검사를 한다.