정규표현식

정규 표현식 또는 정규식은 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이다. 정규 표현식은 많은 텍스트 편집기와 프로그래밍 언어에서 문자열의 검색과 치환을 위해 지원하고 있으며, 특히 펄과 Tcl은 언어 자체에 강력한 정규 표현식을 구현하고 있다.

정규표현식 테스트 사이트

주소 : https://regexr.com/

간단한 예제

  1. 아이디 정규표현식 (영문자로 시작하는 영문자 또는 숫자 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);
}
  1. 휴대전화번호
function phone(val) {
	let regExp = /^01(?:0|1|[6-9])-(?:\d{3}|\d{4})-\d{4}$/;
 	return regExp.test(phone);
  1. 이메일
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-Z0-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를 만들었었다. checkon 메서드를 이용하여 클릭함수를 만든다.

[문제해결] 아직 중복확인은 구현되지 않는다.

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. 비밀번호

아이디 pwon 메서드를 이용하여 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')
        }
    }
});

아이디questionselect 박스로 되어있고 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');
    }
}
});

아이디 phonekeyup 를 하면
*정규식 (하이픈 없이 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;

를 넣고 동일하게 정규식과 검사를 한다.

0개의 댓글