한번에는 못 끝낼거 같아서 ( 1 ) 으로 했다ㅏ,,
수업시간에 쓰던 코드를 변형해서 만들고 싶었는데
중간에 오류가 뜨고 , 그 이후 속도를 따라잡지 못해서 새로 시작하기로 했다.
우선 틀을 만들어 주었다.
<html> <head><title>Register With Us</title></head> <body> <form id="bi"> <label for="name">Username</label><br /> <input type="text" name="name" id="name" /><br /> <label for="name">Email</label><br /> <input type="text" name="email" id="email" /><br /> <label for="pass">Password</label><br /> <input type="password" name="pass" id="pass" /><br /> <label for="pass-check">Confirm Password</label><br /> <input type="password" id="pass2" /><br /> <input type="submit" id ="sumit" value="SUMIT" /> </form> </body> </html>
input 값을 확인하는 함수를 호출하는 checkAll( ) 함수를 만들었다.
function checkAll() { if (!checkMail(form.mail.value)) { return false; } else if (!checkPassword(form.pass.value, form.pass2.value)) { return false; } return true; }
checkMail 함수에서 폼에 입력된 값이 유효성 검사에 맞으면 true 를 return 해준다.
if 조건문 내로 들어가지 않으므로 다음 조건문을 실행하게 된다.
아래의 else if문도 마찬가지로 똑같이 수행한다.
함수의 매개변수로는 form 내에 있는 해당되는 input 태그의 id 의 값을 가져온다.
공백 확인 함수
function checkExistData(value, dataName) { if (value == "") { alert(dataName + " 입력해주세요"); return false; } return true; }
매개변수로 들어오는 value 는 input 태그의 값이고
dataName 은 해당되는 input 태그의 종류가 무엇인지 알려주는 String 변수이다.
값이 공백일 경우 alert 를 통해 공백임을 알리고
false 를 return 하면서 이 함수를 호출한 함수를 끝내버린다.
이메일 확인 함수
function checkMail(email) { //mail이 입력되었는지 확인하기 if (!checkExistData(email, "이메일을")) return false; var emailRegExp = /^[A-Za-z0-9_]+[A-Za-z0-9] *[@]{1}[A-Za-z0-9]+[A-Za-z0-9]*[.]{1}[A-Za-z]{1,3}$/; if (!emailRegExp.test(email)) { alert("이메일 형식이 올바르지 않습니다"); form.email.value = ""; form.email.focus(); return false; } return true; //확인이 완료되었을 때 }
이메일 정규표현식
1. ^[A-Za-z0-9_]+[A-Za-z0-9]
-
이메일의 경우 첫글자 _가 허용되므로 첫번째 글자 검사식을 따로 둔다.
-
그 뒤 영문 대/소문자 숫자만 사용 할 수 있게 조건을 건다.
2. * [ @ ] { 1 } : @는 반드시 하나만 입력되어야 한다.
3. * [ . ] { 1 } : .은 반드시 하나만 입력되어야 한다.
4. [A-Za-z]{1,3} : 최소 한글자 최대 세글자 까지 입력 가능하다.
정규표현식과 이메일의 값이 일치하지 않을 경우 조건문을 실행하며,
이메일 값이 정규표현식에 만족할 경우 return true 된다.
비밀번호 확인 함수
function checkPassword(id, passw, pass2) { //비밀번호가 입력되었는지 확인하기 if (!checkExistData(pass, "비밀번호를")) return false; //비밀번호 확인이 입력되었는지 확인하기 if (!checkExistData(pass2, "비밀번호 확인을")) return false; var password1RegExp = /^[a-zA-z0-9]{4,12}$/; //비밀번호 유효성 검사 if (!password1RegExp.test(pass)) { alert("비밀번호는 영문 대소문자와 숫자 4~12자리로 입력해야합니다"); form.pass.value = ""; form.pass.focus(); return false; } //비밀번호와 비밀번호 확인이 맞지 않다면.. if (pass != pass2) { alert("두 비밀번호가 맞지 않습니다."); form.pass.value = ""; form.pass2.value = ""; form.pass2.focus(); return false; } return true; //확인이 완료되었을 때 }
비밀번호가 만족해야할 조건
-
영문 대/소문자와 숫자 4~12자리로 입력할 것
-
비밀번호 두번 입력했을 때 두번 다 일치할 것
, ,, ,,
https://li-yo.tistory.com/ 티스토리 블로그 이전 하였습니다.
사진에 있는거 headers를 header로 바꾸면 작동하실듯합니다.