24.05.09 과제(유효성검사)

[안소은]

회원가입

(필수 입력 필드만 입력하여 회원가입하기)

중복체크 버튼 리셋 영상

로그인 화면 Script

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203

<script>     'use strict';          let idCheckSw = 0;     let nickCheckSw = 0;          function fCheck() {         // 필수항목 입력여부 확인          let mid = document.getElementById("mid").value.trim();         let pwd = document.getElementById("pwd").value.trim();         let nickName = document.getElementById("nickName").value.trim();         let name = document.getElementById("name").value.trim();         let gender = myform.gender.value;         //let birthday = myform.birthday.value;         let homePage = document.getElementById("homePage").value.trim();         //let job = myform.job.value;         let email1 = myform.email1.value.trim();                           if(mid == "") {             alert("아이디를 입력하세요");             myform.mid.focus();             return false;         }         else if(pwd == "") {             alert("비밀번호를 입력하세요");             myform.pwd.focus();             return false;         }         else if(nickName == "") {             alert("닉네임을 입력하세요");             myform.nickName.focus();             return false;         }         else if(name == "") {             alert("이름을 입력하세요");             myform.name.focus();             return false;         }         else if(email1 == "") {             alert("이메일을 입력하세요");             myform.email1.focus();             return false;         }                  // 1.정규식을 이용한 유효성 검사처리         // 아이디와 닉네임은 중복체크 검사시에 수행...         let regPwd = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[\W_]).{4,20}$/;          let regName = /^[a-zA-Z가-힣]{2,10}$/;          let regEmail = /^[a-zA-Z0-9]([-_]?[a-zA-Z0-9])*$/i;         let regHomePage = /(https?:\/\/)?([a-zA-Z\d-]+)\.([a-zA-Z\d-]{2,8})([\/\w\.-]*)*\/?$/;         let regTel = /\d{2,3}-\d{3,4}-\d{4}$/;           if(!regPwd.test(pwd)) {             alert("비밀번호는 영문 대/소문자와 숫자, 특수문자를 포함하여 4~20자까지 가능합니다. 특수문자를 꼭 1개 이상 포함해주세요.");             document.getElementById("pwd").focus();             return false;         }         if(!regName.test(name)) {             alert("이름은 영문과 한글만 사용하여 2~10자까지 가능합니다.");             document.getElementById("name").focus();             return false;         }         if(!regEmail.test(email1)) {             alert("이메일 형식에 맞도록 작성해주세요.");             myform.email1.focus();             return false;         }                 if(homePage.length > 7){             if(!regHomePage.test(homePage)) {                 alert("홈페이지 주소 형식에 맞도록 작성해주세요.");                 document.getElementById("homePage").focus();                 return false;             }         }                  // 2.검사 후 필요한 내용들을 변수에 담아 회원가입 처리한다.                  let email2 = myform.email2.value;             let email = email1+"@"+email2;                          let tel1 = myform.tel1.value;             let tel2 = myform.tel2.value.trim();             let tel3 = myform.tel3.value.trim();         let tel = tel1+"-"+tel2+"-"+tel3;         if(tel2 != "" || tel3 != ""){             if(!regTel.test(tel)) {                 alert("전화번호 형식(000-0000-0000)에 맞도록 작성해주세요.");                 myform.tel2.focus();                 return false;             }                     }                  let postcode = myform.postcode.value + " ";         let roadAddress = myform.roadAddress.value + " ";         let detailAddress = myform.detailAddress.value + " ";         let extraAddress = myform.extraAddress.value + " ";         let address = postcode+"/"+roadAddress+"/"+detailAddress+"/"+extraAddress;                                    if(idCheckSw == 0){             alert("아이디 중복 체크를 수행해주세요.");             document.getElementById("midBtn").focus();         }         else if(nickCheckSw == 0) {             alert("닉네임 중복 체크를 수행해주세요.");             document.getElementById("nickNameBtn").focus();         }         else {             myform.email.value = email; // email 결합             myform.tel.value = tel;             myform.address.value = address;                          myform.submit();         }     }          // 아이디 중복체크     function idCheck() {         let regMid = /^[a-zA-Z0-9_]{4,20}$/;         let mid = myform.mid.value;         if(mid.trim() == "") {             alert("아이디를 입력하세요.");             myform.mid.focus();         }         else if(!regMid.test(mid)){             alert("아이디는 영문 대/소문자와 숫자, 밑줄을 포함하여 4~20자까지 가능합니다.");             document.getElementById("mid").focus();         }         else {             idCheckSw = 1;             $.ajax({                 url: "${ctp}/MemberIdCheck.mem",                 type: "get",                 data: {mid:mid},                 success: function(res) {                     if(res != 0) {                         alert("이미 사용중인 아이디 입니다. 다시 입력하세요.");                         idCheckSw = 0;                         myform.mid.focus();                     }                     else {                         alert("사용 가능한 아이디 입니다.");                         $("#midBtn").attr("disabled",true);                     }                 },                 error : function() {                     alert("전송 오류");                 }             });         }     }          // 닉네임 중복체크     function nickCheck() {         let nickName = document.getElementById("nickName").value.trim();         let regNickName = /^[a-zA-Z0-9가-힣]{2,10}$/;         if(nickName.trim() == "") {             alert("닉네임을 입력하세요.");             myform.nickName.focus();         }         else if(!regNickName.test(nickName)){             alert("닉네임은 영문과 한글, 숫자만 사용하여 2~10자까지 가능합니다.");             document.getElementById("nickName").focus();         }         else {             nickCheckSw = 1;             $.ajax({                 url: "${ctp}/MemberNickCheck.mem",                 type: "get",                 data: {nickName:nickName},                 success: function(res) {                     if(res != 0) {                         alert("이미 사용중인 닉네임 입니다. 다시 입력하세요.");                         nickCheckSw = 0;                         myform.nickName.focus();                     }                     else {                         alert("사용 가능한 닉네임 입니다.");                         $("#nickNameBtn").attr("disabled",true);                     }                 },                 error : function() {                     alert("전송 오류");                 }             });         }     }          // 입력창 누르면 스위치 리셋...?     window.xxxxonload = function(){         mid.addEventListener('click',function(){             idCheckSw = 0;             $("#midBtn").removeAttr("disabled");         });         nickName.addEventListener('click',function(){             nickCheckSw = 0;             $("#nickNameBtn").removeAttr("disabled");         });     }        </script> Colored by Color Scripter

cs

전화번호 / 홈페이지를 입력하지 않을 땐 유효성 검사를 패스하고 싶어서

각각 if(tel2 != "" || tel3 != "") 일때 유효성 검사

if(homePage.length > 7) 일때 유효성 검사 하도록 했는데요...

더 좋은 방법이 있을 것 같은데 거기까진 생각을 못하겠습니다...ㅠ

[행복]

프론트체크~ 잘 하셨네요.
tel완성본과 homePage완성내용으로 정규식체크하면 길이와 조건을 한번에 줄 수 있겠죠... 수고하셨어요