Top 49 회원 가입 유효성 검사 Trust The Answer

You are looking for information, articles, knowledge about the topic nail salons open on sunday near me 회원 가입 유효성 검사 on Google, you do not find the information you need! Here are the best content compiled and compiled by the https://toplist.maxfit.vn team, along with other related topics such as: 회원 가입 유효성 검사 회원가입 유효성 검사 jquery, 스프링 회원가입 유효성 검사, 아이디 유효성 검사, 자바스크립트 유효성 검사, Ajax 아이디 유효성 검사, jsp 회원가입 유효성 검사, 회원가입 유효성 검사 기획, Form 유효성 검사

HTML5 – N16 – Back to Basic – HTML 16화 – 입력폼 – 전송방식, 필수입력, 이름, 이메일, 유효성 검사등

[js] 자바스크립트 회원가입 유효성 검사(ft. form input 정규식)

Article author: goddino.tistory.com
Reviews from users: 49918 Ratings
Top rated: 4.6
Lowest rated: 1
Summary of article content: Articles about [js] 자바스크립트 회원가입 유효성 검사(ft. form input 정규식) 회원가입 페이지의 유효성 검사에 대하여 알아보겠습니다. 유효성 검사 회원가입 양식을 작성할 때, 필수요소를 빼먹거나, 비밀번호나 전화번호 등이 … …
Most searched keywords: Whether you are looking for [js] 자바스크립트 회원가입 유효성 검사(ft. form input 정규식) 회원가입 페이지의 유효성 검사에 대하여 알아보겠습니다. 유효성 검사 회원가입 양식을 작성할 때, 필수요소를 빼먹거나, 비밀번호나 전화번호 등이 … 회원가입 페이지의 유효성 검사에 대하여 알아보겠습니다. 유효성 검사 회원가입 양식을 작성할 때, 필수요소를 빼먹거나, 비밀번호나 전화번호 등이 정보를 잘못 입력했을 경우, 유효성 검사를 통하여 사용자가..
Table of Contents:

유효성 검사

유효성 검사항목

회원가입 form의 유효성 검사 방법

form input

유효성 검사의 핵심

화면 보기 (Result클릭)

태그

최근글

[js] 자바스크립트 회원가입 유효성 검사(ft. form input 정규식)

회원가입 페이지의 유효성 검사에 대하여 알아보겠습니다.

유효성 검사

회원가입 양식을 작성할 때, 필수요소를 빼먹거나, 비밀번호나 전화번호 등이 정보를 잘못 입력했을 경우,

유효성 검사를 통하여 사용자가 회원가입 정보를 잘못 입력하는 경우를 사전에 방지해주고,

비밀번호 재확인을 통하여 사용자로 하여금 본인이 입력한 데이터를 보다 정확하게 인지 시켜줍니다.

최근에 개인정보를 입력하는 사용자와 개인정보 데이터를 보관, 관리하는 개발자 입장에서

최대한 오류를 줄이기 위하여 좀 더 쉽게 정보를 입력하고, 관리하는 방법으로 폼들이 변화되고 있습니다.

최근 사용하는 폼 유형으로 회원가입 폼을 html으로 마크업 해보고,

javascript를 이용하여 유효성 검사를 하겠습니다. (사용자 데이터를 처리하는 php 작업은 제외)

유효성 검사항목

· 필수 입력 요소: 아이디, 패스워드, 이름, 성별 체크, 이메일, 약관 동의

· 패스워드 입력 시 영문자, 숫자, 특수기호 조합

· 패스워드 일치할 것

· 전화번호 입력시 숫자만 입력

추가 구현 · 아이디 중복체크 클릭 시 팝업창 오픈

· 이메일 옵션 체크 시 뒤에 주소 자동 입력

· 주소 검색 시 우편번호 검색 팝업창 오픈

회원가입 form의 유효성 검사 방법

회원가입 양식 html

아이디

비밀번호

비밀번호 재확인

이름

생년월일

성별여 남

전화번호 ex “-“없이 숫자만 입력

이메일@

주소

기본주소

상세주소

약관동의약관에 동의합니다.

css

폼의 디자인이므로 중요하지 않습니다.

javascript 유효성 검사

//joinform_check 함수로 유효성 검사 function joinform_check() { //변수에 담아주기 var uid = document.getElementById(“uid”); var pwd = document.getElementById(“pwd”); var repwd = document.getElementById(“repwd”); var uname = document.getElementById(“uname”); var female = document.getElementById(“female”); var male = document.getElementById(“male”); var mobile = document.getElementById(“mobile”); var email_id = document.getElementById(“email_id”); var agree = document.getElementById(“agree”); if (uid.value == “”) { //해당 입력값이 없을 경우 같은말: if(!uid.value) alert(“아이디를 입력하세요.”); uid.focus(); //focus(): 커서가 깜빡이는 현상, blur(): 커서가 사라지는 현상 return false; //return: 반환하다 return false: 아무것도 반환하지 말아라 아래 코드부터 아무것도 진행하지 말것 }; if (pwd.value == “”) { alert(“비밀번호를 입력하세요.”); pwd.focus(); return false; }; //비밀번호 영문자+숫자+특수조합(8~25자리 입력) 정규식 var pwdCheck = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,25}$/; if (!pwdCheck.test(pwd.value)) { alert(“비밀번호는 영문자+숫자+특수문자 조합으로 8~25자리 사용해야 합니다.”); pwd.focus(); return false; }; if (repwd.value !== pwd.value) { alert(“비밀번호가 일치하지 않습니다..”); repwd.focus(); return false; }; if (uname.value == “”) { alert(“이름을 입력하세요.”); uname.focus(); return false; }; if (!female.checked && !male.checked) { //둘다 미체크시 alert(“성별을 선택해 주세요.”); female.focus(); return false; } var reg = /^[0-9]+/g; //숫자만 입력하는 정규식 if (!reg.test(mobile.value)) { alert(“전화번호는 숫자만 입력할 수 있습니다.”); mobile.focus(); return false; } if (email_id.value == “”) { alert(“이메일 주소를 입력하세요.”); email_id.focus(); return false; } if (!agree.checked) { //체크박스 미체크시 alert(“약관 동의를 체크하세요.”); agree.focus(); return false; } //입력 값 전송 document.join_form.submit(); //유효성 검사의 포인트 } //아이디 중복체크 팝업창(현재 공백문서) function id_check() { //window.open(“팝업될 문서 경로”, “팝업될 문서 이름”, “옵션”); window.open(“”, “”, “width=600, height=200, left=200, top=100”); } //이메일 옵션 선택후 주소 자동 완성 function change_email() { var email_add = document.getElementById(“email_add”); var email_sel = document.getElementById(“email_sel”); //지금 골라진 옵션의 순서와 값 구하기 var idx = email_sel.options.selectedIndex; var val = email_sel.options[idx].value; email_add.value = val; } //우편번호 검색 팝업창(현재 공백문서) function search_address() { window.open(“”, “b”, “width=600, height=300, left=200, top=100”); }

form, input

form과 관련된 작업은 데이터를 저장하거나 검색, 수정하는 일인데 이런 작업은 모두 데이터베이스를 기반으로 합니다.

눈에 보이는 박스나 버튼 같은 폼의 형태를 만드는 것은 html 태그를 사용하고,

그 폼에 입력한 사용자 정보를 처리하는 것은 asp, php, jsp 같은 서버 프로그래밍을 사용합니다.

form태그 사용할 때,

· 회원가입 페이지

· 로그인 창

· 쇼핑몰 주문서

form 태그

· form 태그는 input, label과 같은 모든 form요소는 form 태그 안에 있어야 합니다.

· form 태그의 속성은 name, action, method

· action: form 태그 안의 데이터 처리할 페이지. 데이터를 보내는 목적지

· method: 데이터 전송 방식(주소가 데이터 주소창에 보이는 get 방식, 안 보이는 post 방식)

get 주소창에 사용자가 입력한 내용이 그대로 드러남, 바로 보내기 때문에 빠름, 보안성이 나쁨

post 주소창에 사용자가 입력한 내용이 안 보임, 감추는 작업 때문에 느림, 보안성 좋음, 대부분 사용

(ft. 이렇게 이해해보세요. post는 영어로 우편, 편지이고, 편지에 담아서 전송하므로 내용을 남들이 볼 수가 없지요! 그래서 post 방식이라고 합니다.)

· name: 폼의 이름. 한 문서 안의 여러 개의 form 태그가 있을 경우, 구분을 위해 사용

· form태그에 name을 꼭 써야 하는 이유: javascript에서 제어하기 위해

· target action: 태그에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정

유효성 검사의 핵심

유효성 검사의 핵심은

가입하기 버튼의 type은 submit이 아니라 button입니다.

submit은 입력값 그대로 보내기 할 때 사용하고, button은 입력된 값이 경우에 따라 다르게 사용될 경우 사용합니다.

회원가입 폼은 입력값이 맞는지 유효성 여부를 검사하고 보내기를 하므로

type은 button이고, javascript에서 joinform_check 함수를 이용하여 유효성 검사를 한 후, submit을 처리합니다.

화면 보기 (Result클릭)

[JS] 회원가입 유효성 검사

반응형
[HTML 레이아웃] [HTML 코드]
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 < body > < form name = form method = "post" onsubmit = "return checkAll()" > < table width = 750 border = "1px" align = center > < tr > < th colspan = "2" bgcolor = "#E4F7BA" > 회원 기본 정보 < / th > < / tr > < tr > < td > 아이디 < / td > < td > < input type = "text" name = "userId" > 4 ~12자의 영문 대소문자와 숫자로만 입력 < / td > < / tr > < tr > < td > 비밀번호 < / td > < td > < input type = "password" name = "password1" > 4 ~12자의 영문 대소문자와 숫자로만 입력 < / td > < / tr > < tr > < td > 비밀번호 확인 < / td > < td > < input type = "password" name = "password2" > < / td > < / tr > < tr > < td > 메일주소 < / td > < td > < input type = "text" name = "mail" > 예)[email protected] < / td > < / tr > < tr > < td > 이름 < / td > < td > < input type = "text" name = "name" > < / td > < / tr > < tr > < td > 주민등록번호 < / td > < td > < input type = "text" name = "identi1" style = "width:70px" > – < input type = "password" name = "identi2" style = "width:70px" > < / td > < / tr > < tr > < td > 관심분야 < / td > < td > < input type = "checkbox" name = "favorite" value = "컴퓨터" > 컴퓨터 < input type = "checkbox" name = "favorite" value = "인터넷" > 인터넷 < input type = "checkbox" name = "favorite" value = "여행" > 여행 < input type = "checkbox" name = "favorite" value = "영화감상" > 영화감상 < input type = "checkbox" name = "favorite" value = "음악감상" > 음악감상 < / td > < / tr > < tr > < td > 자기소개 < / td > < td > < textarea name = "introduceMyself" id = intro name = intro cols = 50 rows = 10 > < / textarea > < / td > < / tr > < / table > < p align = center > < input type = "submit" name = "join" value = "회원 가입" > < input type = "reset" name = "reset" value = "다시 입력" > < / p > < / form > < / body > Colored by Color Scripter cs

코드설명

1 < form name = form method = "post" onsubmit = "return checkAll()" > cs submit 버튼을 누르면 script의 checkAll()가 호출된다.
[JavaScript 코드]
코드설명

checkAll()함수에서는 각각의 input값을 확인하는 함수를 호출하는 함수이다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 function checkAll() { if ( ! checkUserId(form.userId.value)) { return false ; } else if ( ! checkPassword(form.userId.value, form.password1.value, form.password2.value)) { return false ; } else if ( ! checkMail(form.mail.value)) { return false ; } else if ( ! checkName(form. name .value)) { return false ; } else if ( ! checkBirth(form.identi1.value, form.identi2.value)) { return false ; } else if ( ! checkFavorite()) { return false ; } else if ( ! checkIntro()) { return false ; } return true ; } } Colored by Color Scripter s

조건문을 보면 checkUserId함수에서 폼에 입력된 값이 유효성 검사에 맞으면 true를 return해준다.

따라서 if조건문 내로 들어가지 않으므로 다음 조건문을 실행하게 된다.

아래의 else if문도 마찬가지로 똑같이 수행한다.

함수의 매개변수로는 form내에 있는 해당되는 input태그의 id의 값을 가져온다.

1 2 3 4 5 6 7 8 // 공백확인 함수 function checkExistData(value, dataName) { if (value = = “” ) { alert (dataName + ” 입력해주세요!” ); return false ; } return true ; } Colored by Color Scripter cs

checkAll함수를 제외한 모든 함수에 첫번째로 들어가 있는 코드가 공백 확인 함수이다.

유효성 검사하면서 값이 공백이라면 “영문 대소문자와 숫자 4~12자리로 입력해야합니다!”라고 출력해도 되지만 공백임을 알려주기 위해 따로 함수로 빼내었다.

매개변수로 들어오는 value는 input태그의 값이고 dataName은 해당되는 input태그의 종류가 무엇인지 알려주는 String 변수이다.

값이 공백일 경우 alert를 통해 사용자에게 공백임을 알리고 false를 return하면서 이 함수를 호출한 함수를 끝내버린다.

이제부터 각각의 유효성 검사 함수를 알아보자.

먼저 볼 함수는 id를 검사하는 함수이다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function checkUserId(id) { //Id가 입력되었는지 확인하기 if ( ! checkExistData(id, “아이디를” )) return false ; var idRegExp = / ^[a – zA – z0 – 9 ]{ 4 , 12 }$ / ; //아이디 유효성 검사 if ( ! idRegExp.test(id)) { alert ( “아이디는 영문 대소문자와 숫자 4~12자리로 입력해야합니다!” ); form.userId.value = “” ; form.userId.focus(); return false ; } return true ; //확인이 완료되었을 때 } Colored by Color Scripter cs 함수 매개변수로 넘어오는 값은 input태그에 들어가는 값이다.

3라인은 방금전 언급했던 공백확인 함수이다. 만약 id의 값이 공백일 경우 checkExistData함수에서는 false를 return해주므로 !에 의해 if조건문은 true가 된다. 4라인에서 return false를 해주면서 checkAll함수 2번3번 라인에서 script가 끝난다.

이어서 6라인은 아이디 유효성을 검사하는 정규표현식(Regular Expression)이다. 위의 코드에서 사용한 정규표현식을 간단하게 언급하고 가면.. → / : 자바스크립트의 정규표현식의 처음과 끝을 의미한다. → [ ] : 문자셋이다. 예를 들면 [a-z]라고 적을경우 정규표현식에 만족해야하는 값들은 반드시 a~z사이의 값만 넣을 수 있다. → ^ : 문장의 처음을 뜻한다. → $ : 문장의 마지막을 뜻한다. → { } : 문자열 길이를 뜻한다. 예를 들어 {4,12}일 경우 최소 길이 4, 최대 길이 12이다.

/^[a-zA-z0-9]{4,12}$/ 을 분석하면.. → 영문 대/소문자, 숫자만 사용할 수 있고 길이는 최소 4, 최대 12를 만족해야 정규표현식에 만족한다.

정규표현식에 대해 더 알아보고싶으면 → https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%EC%A0%95%EA%B7%9C%EC%8B%9D 여기 들어가서 참고하면 된다.

if조건문에서 test는 정규표현식과 id의 값이 일치하는지 아닌지 확인하는 함수이다.

일치하면 true를 return 일치하지 않으면 false를 return한다.

만약 일치하지 않을 경우 사용자에게 해당 조건을 알려주는 알림창을 띄워준다.

그리고 폼에 입력된 값을 공백으로 초기화하고 포커스를 맞춰준다.

정규표현식과 id의 값이 같을 경우 return true를 하고 다음 함수를 실행한다.

다음은 비밀번호 검사 함수이다.

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 function checkPassword(id, password1, password2) { //비밀번호가 입력되었는지 확인하기 if ( ! checkExistData(password1, “비밀번호를” )) return false ; //비밀번호 확인이 입력되었는지 확인하기 if ( ! checkExistData(password2, “비밀번호 확인을” )) return false ; var password1RegExp = / ^[a – zA – z0 – 9 ]{ 4 , 12 }$ / ; //비밀번호 유효성 검사 if ( ! password1RegExp.test(password1)) { alert ( “비밀번호는 영문 대소문자와 숫자 4~12자리로 입력해야합니다!” ); form.password1.value = “” ; form.password1.focus(); return false ; } //비밀번호와 비밀번호 확인이 맞지 않다면.. if (password1 ! = password2) { alert ( “두 비밀번호가 맞지 않습니다.” ); form.password1.value = “” ; form.password2.value = “” ; form.password2.focus(); return false ; } //아이디와 비밀번호가 같을 때.. if (id = = password1) { alert ( “아이디와 비밀번호는 같을 수 없습니다!” ); form.password1.value = “” ; form.password2.value = “” ; form.password2.focus(); return false ; } return true ; //확인이 완료되었을 때 } Colored by Color Scripter cs

비밀번호가 만족해야할 조건은

1. 영문 대/소문자와 숫자 4~12자리로 입력할 것

2. 비밀번호 두번 입력했을 때 두번 다 일치할 것

3. 아이디와 비밀번호는 불일치 할 것

3~7라인은 비밀번호 / 비밀번호 확인이 공백인지 확인하기 위한 조건문이다.

조건문이 어떻게 동작하는지 알고싶을 땐 위의 checkId함수 설명을 참고하길 바란다.

checkPassword함수는 매개변수로 id와 두 개로 입력된 password를 받는다.

9~15라인은 비밀번호 유효성을 검사하는 코드로 아이디 유효성 검사 정규표현식과 같다.

위의 checkId함수 설명을 참고하길 바란다.

만약 두번 입력된 값이 틀릴경우 17~23라인 조건문을 실행한다.

사용자에게 입력된 두 비밀번호가 일치하지 않음을 알려준다.

그리고 두 비밀번호 입력창을 공백으로 설정해준 다음 포커스를 첫번째 비밀번호 입력창에 준다.

마지막으로 return false

만약 아이디와 비밀번호가 같을 경우 26~32라인 조건문을 실행한다.

아래의 조건문 실행은 위의 비밀번호 일치 여부 확인하는 조건문과 같다.

비밀번호 모든 조건이 맞을 경우 true를 return..

다음은 이메일을 검사하는 함수이다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function checkMail(mail) { //mail이 입력되었는지 확인하기 if ( ! checkExistData(mail, “이메일을” )) 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(mail)) { alert ( “이메일 형식이 올바르지 않습니다!” ); form.mail.value = “” ; form.mail.focus(); return false ; } return true ; //확인이 완료되었을 때 } Colored by Color Scripter cs

6라인.. 이메일 정규표현식을 보면

→ ^[A-Za-z0-9_]+[A-Za-z0-9] : 이메일의 경우 첫글자 _가 허용되므로 첫번째 글자 검사식을 따로 두었다.

그 뒤 영문 대/소문자 숫자만 사용 할 수 있게 조건을 걸었다.

→ *[@]{1} : @는 반드시 하나만 입력되어야 한다.

→ *[.]{1} : .은 반드시 하나만 입력되어야 한다.

→ [A-Za-z]{1,3} : 최소 한글자 최대 세글자 까지 입력 가능하다.

7~12라인은 정규표현식과 이메일의 값이 일치하지 않을 경우 조건문을 실행한다.

이메일 값이 정규표현식에 만족할 경우 return true.

다음은 이름 검사 함수이다.

1 2 3 4 5 6 7 8 9 10 11 function checkName( name ) { if ( ! checkExistData( name , “이름을” )) return false ; var nameRegExp = / ^[가 – 힣]{ 2 , 4 }$ / ; if ( ! nameRegExp.test( name )) { alert ( “이름이 올바르지 않습니다.” ); return false ; } return true ; //확인이 완료되었을 때 } Colored by Color Scripter cs

5라인은 한글만 입력할 수 있는 정규표현식이다.

이름 값이 정규표현식에 만족할 경우 return true.

다음은 주민등록번호를 검사하는 함수이다.

주민등록번호 유효성을 검사하는 식이 따로 있는데

주민등록번호 13자리를…

1 2 3 4 5 6 – 1 2 3 4 5 6 7 × 2 3 4 5 6 7 8 9 2 3 4 5

주민등록번호 13번째 자리 값을 제외하고 위아래로 각각 값을 곱한 후 각 결과값을 모두 더한다.

더한 값을 sum이라 하면

<11 - (sum % 11) %10>

위의 식에서 도출되는 값과 주민등록번호 13번째 값과 일치하면 유효한 주민등록번호이다.

이를 토대로 주민등록번호 검사하는 함수를 보면..

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 function checkBirth(identi1, identi2) { //birth이 입력되었는지 확인하기 if ( ! checkExistData(identi1, “주민등록번호를 ” ) | | ! checkExistData(identi2, “주민등록번호를 ” )) return false ; var totalIdenti = “” + identi1 + identi2; var identiArr = new Array (); var sum = 0 ; var plus = 2 ; //배열에 주민등록번호 입력 후 유효값 확인하기 위해 sum에 저장 for ( var i = 0 ; i < 12 ; i + + ) { identiArr[i] = totalIdenti. charAt (i); if (i > = 0 & & i < = 7 ) { sum + = totalIdenti[i] * plus; plus + + ; if (i = = 7 ) plus = 2 ; } else { sum + = totalIdenti[i] * plus; plus + + ; } } //주민등록번호 길이 확인하기 if (identiArr. length < 12 ) { alert ( "주민등록번호는 13자리입니다." ); form.identi1.value = "" ; form.identi2.value = "" ; form.identi1.focus(); return false ; } //주민등록번호 유효한지 확인 var result = 11 - (sum % 11 ) % 10 if (result ! = totalIdenti. charAt ( 12 )) { //주민등록번호가 유효하지 않은 경우 alert ( "유효하지않은 주민번호입니다." ); form.identi1.value = "" ; form.identi2.value = "" ; form.identi1.focus(); return false ; } return true ; //확인이 완료되었을 때 } Colored by Color Scripter cs 매개변수가 두개인 이유는 폼에서 주민번호 입력창을 두개로 두었다. 이 때문에 totalIdenti라는 변수에 문자열 결합을 해준다. 13~24라인은 유효성 검사를 위해 totalIdenti 값을 identiArr배열에 하나하나 입력을 해준다. 배열에 입력하면서 sum값을 바로 계산해 준다. 위의 주민등록번호 유효성 검사 표를 보면 1번째부터 8번째 자리까지 2부터 순차적으로 값이 올라가면서 곱해지다가 9번째 자리부터는 다시 2로 돌아간다. 6~24라인이 이를 조건식으로 변환한 라인이다. 27~33라인은 주민등록번호 길이가 13자리인지 확인하고 마지막으로 35~42라인이 주민등록번호가 유효한지 확인하는 조건식이다. 주민등록번호가 모든 조건에 만족하였을 경우 return true 다음은 관심분야에서 하나 이상 체크되었는지 확인하는 함수다. 1 2 3 4 5 6 7 8 9 10 11 12 function checkFavorite() { var checkedFavorite = document .getElementsByName( "favorite" ); //체크된 값이 하나라도 있을경우 바로 true for ( var i = 0 ; i < checkedFavorite. length ; i + + ) { if (checkedFavorite[i].checked = = true ) { return true ; } } alert ( "관심분야를 체크해주세요!" ); return false ; } Colored by Color Scripter cs document.getElementsByName("favorite")는 HTML에서 같은 name("favorite")으로 묶인 checkbox의 값을 배열로 가져온다. 5~9라인은 체크된 값이 하나라도 있을 경우 바로 true를 return시켜줌으로써 함수를 끝낸다. for문에서 return되지 않는다면 체크된 값이 하나라도 되지 않는 경우이므로 알림창을 띄워주고 return false를 한다. 마지막으로 자기소개 항목에서 값이 들어있는지 확인하는 함수이다. 1 2 3 4 5 6 7 8 function checkIntro() { var text = document . getElementById ( "intro" ); if ( ! checkExistData(text.value, "자기소개를" )) { alert ( "자기소개를 입력해 주세요!" ); return false ; } else return true ; } Colored by Color Scripter cs document.getElementById("intro")는 HTML에서 id("intro")를 가져와 그에 해당되는 값을 입력해준다. 만약 값이 공백일 경우 알림창을 띄워주고 return false를 한다. 전체적인 JavaScript코드이다. 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 < script language = "javascript" > function checkAll() { if ( ! checkUserId(form.userId.value)) { return false ; } if ( ! checkPassword(form.userId.value, form.password1.value, form.password2.value)) { return false ; } if ( ! checkMail(form.mail.value)) { return false ; } if ( ! checkName(form. name .value)) { return false ; } if ( ! checkBirth(form.identi1.value, form.identi2.value)) { return false ; } if ( ! checkFavorite()) { return false ; } if ( ! checkIntro()) { return false ; } return true ; } // 공백확인 함수 function checkExistData(value, dataName) { if (value = = “” ) { alert (dataName + ” 입력해주세요!” ); return false ; } return true ; } function checkUserId(id) { //Id가 입력되었는지 확인하기 if ( ! checkExistData(id, “아이디를” )) return false ; var idRegExp = / ^[a – zA – z0 – 9 ]{ 4 , 12 }$ / ; //아이디 유효성 검사 if ( ! idRegExp.test(id)) { alert ( “아이디는 영문 대소문자와 숫자 4~12자리로 입력해야합니다!” ); form.userId.value = “” ; form.userId.focus(); return false ; } return true ; //확인이 완료되었을 때 } function checkPassword(id, password1, password2) { //비밀번호가 입력되었는지 확인하기 if ( ! checkExistData(password1, “비밀번호를” )) return false ; //비밀번호 확인이 입력되었는지 확인하기 if ( ! checkExistData(password2, “비밀번호 확인을” )) return false ; var password1RegExp = / ^[a – zA – z0 – 9 ]{ 4 , 12 }$ / ; //비밀번호 유효성 검사 if ( ! password1RegExp.test(password1)) { alert ( “비밀번호는 영문 대소문자와 숫자 4~12자리로 입력해야합니다!” ); form.password1.value = “” ; form.password1.focus(); return false ; } //비밀번호와 비밀번호 확인이 맞지 않다면.. if (password1 ! = password2) { alert ( “두 비밀번호가 맞지 않습니다.” ); form.password1.value = “” ; form.password2.value = “” ; form.password2.focus(); return false ; } //아이디와 비밀번호가 같을 때.. if (id = = password1) { alert ( “아이디와 비밀번호는 같을 수 없습니다!” ); form.password1.value = “” ; form.password2.value = “” ; form.password2.focus(); return false ; } return true ; //확인이 완료되었을 때 } function checkMail(mail) { //mail이 입력되었는지 확인하기 if ( ! checkExistData(mail, “이메일을” )) 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(mail)) { alert ( “이메일 형식이 올바르지 않습니다!” ); form.mail.value = “” ; form.mail.focus(); return false ; } return true ; //확인이 완료되었을 때 } function checkName( name ) { if ( ! checkExistData( name , “이름을” )) return false ; var nameRegExp = / ^[가 – 힣]{ 2 , 4 }$ / ; if ( ! nameRegExp.test( name )) { alert ( “이름이 올바르지 않습니다.” ); return false ; } return true ; //확인이 완료되었을 때 } function checkBirth(identi1, identi2) { //birth이 입력되었는지 확인하기 if ( ! checkExistData(identi1, “주민등록번호를 ” ) | | ! checkExistData(identi2, “주민등록번호를 ” )) return false ; var totalIdenti = “” + identi1 + identi2; var identiArr = new Array (); var sum = 0 ; var plus = 2 ; //배열에 주민등록번호 입력 후 유효값 확인하기 위해 sum에 저장 for ( var i = 0 ; i < 12 ; i + + ) { identiArr[i] = totalIdenti. charAt (i); if (i > = 0 & & i < = 7 ) { sum + = totalIdenti[i] * plus; plus + + ; if (i = = 7 ) plus = 2 ; } else { sum + = totalIdenti[i] * plus; plus + + ; } } //주민등록번호 길이 확인하기 if (identiArr. length < 12 ) { alert ( "주민등록번호는 13자리입니다." ); form.identi1.value = "" ; form.identi2.value = "" ; form.identi1.focus(); return false ; } //주민등록번호 유효한지 확인 var result = 11 - (sum % 11 ) % 10 if (result ! = totalIdenti. charAt ( 12 )) { //주민등록번호가 유효하지 않은 경우 alert ( "유효하지않은 주민번호입니다." ); form.identi1.value = "" ; form.identi2.value = "" ; form.identi1.focus(); return false ; } return true ; //확인이 완료되었을 때 } function checkFavorite() { var checkedFavorite = document .getElementsByName( "favorite" ); //체크된 값이 하나라도 있을경우 바로 true for ( var i = 0 ; i < checkedFavorite. length ; i + + ) { if (checkedFavorite[i].checked = = true ) { return true ; } } alert ( "관심분야를 체크해주세요!" ); return false ; } //자기소개가 입력되었는지 확인하기 function checkIntro() { var text = document . getElementById ( "intro" ); if ( ! checkExistData(text.value, "자기소개를" )) { alert ( "자기소개를 입력해 주세요!" ); return false ; } else return true ; } < / script > Colored by Color Scripter cs

★ 잘못된 정보나 피드백은 언제든 환영입니다. ★

반응형

[JavaScript] 회원가입 유효성검사

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 204 205 206 207 208 209 210

< !DOCTYPE html > < html > < head > < meta charset = "UTF-8" > < title >Insert title here < script type = "text/javascript" > function Validation(){ var RegExp = / ^[a – zA – Z0 – 9 ]{ 4 , 12 }$ / ; //id와 pwassword 유효성 검사 정규식 //이메일 유효성검사 var e_RegExp = / ^[ 0 – 9a – zA – Z]([ – _.]?[ 0 – 9a – zA – Z]) * @[ 0 – 9a – zA – Z]([ – _.]?[ 0 – 9a – zA – Z]) * .[a – zA – Z]{ 2 , 3 }$ / i; var n_RegExp = / ^[가 – 힣]{ 2 , 15 }$ / ; //이름 유효성검사 정규식 var jnumArr = new Array (); // 입력 한 주민번호를 저장해줄 배열 선언 var jnumplus = [ 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 2 , 3 , 4 , 5 , 1 ]; // 주민번호 계산할때 쓰이는 배열 var jnumSum = 0 ; //objNum[i] * jnumplus[i] 더한 값 var objId = document . getElementById ( “id” ); //아이디 var objPwd = document . getElementById ( “pwd” ); //비밀번호 var objPwd2 = document . getElementById ( “pwd2” ); //비밀번호확인 var objEmail = document . getElementById ( “mail” ); //메일 var objName = document . getElementById ( “name” ); //이름 var objNum = document . getElementById ( “num” ); //주민번호 // ================ ID 유효성검사 ================ // if (objId.value = = ” ){ alert ( “ID를 입력해주세요.” ); return false ; } if ( ! RegExp .test(objId.value)){ //아이디 유효성검사 alert ( “ID는 4~12자의 영문 대소문자와 숫자로만 입력하여 주세요.” ); return false ; } // ================ PASSWORD 유효성검사 ===============// if (objPwd.value = = ” ){ // 비밀번호 입력여부 검사 alert ( “Password를 입력해주세요.” ); return false ; } if ( ! RegExp .test(objPwd.value)){ //패스워드 유효성검사 alert ( “Password는 4~12자의 영문 대소문자와 숫자로만 입력하여 주세요.” ); return false ; } if (objPwd.value = = objId.value){ //패스워드와 ID가 동일한지 검사 alert ( “Password는 ID와 동일하면 안됩니다.” ); return false ; } if (objPwd2.value ! = objPwd.value){ //비밀번호와 비밀번호확인이 동일한지 검사 alert ( “비밀번호가 틀립니다. 다시 확인하여 입력해주세요.” ); return false ; } // ================ email 유효성검사 ================ // if (e_RegExp.value = = ” ){ // 이메일 입력여부 검사 alert ( “이메일을 입력해주세요.” ); return false ; } if ( ! e_RegExp.test(objEmail.value)){ //이메일 유효성 검사 alert ( “올바른 이메일 형식이 아닙니다.” ); return false ; } // ================ 이름 유효성검사 ================ // if (objName.value = = ” ){ alert ( “이름을 입력해주세요.” ); return false ; } if ( ! n_RegExp.test(objName.value)){ alert ( “특수문자,영어,숫자는 사용할수 없습니다. 한글만 입력하여주세요.” ); return false ; } // ================ 주민등록번호 유효성검사 ================ // if (objNum.value = = ” ){ // 주민번호입력 형식이 알맞은지 검사 alert ( “주민번호 형식이 올바르지 않습니다.” ); return false ; } for ( var i = 0 ; i < objNum.value. length ;i + + ){ // 입력받은 주민번호 jnumArr배열에 넣기 jnumArr[i] = objNum.value. charAt (i); } for ( var i = 0 ; i < objNum.value. length - 1 ;i + + ){ // 입력받은 주민번호 jnumArr배열에 넣기 jnumSum + = jnumArr[i] * jnumplus[i]; } jnumSum = ( 11 - (jnumSum % 11 )) % 10 ; //주민번호 계산 if (jnumSum ! = jnumArr[ 12 ]){ // 계산되서 나온 결과값(jnumSum)과 입력한 주민번호의 마지막이 맞지 않으면 alert ( "주민번호가 올바르지 않습니다." ); //alert 창 띄우기 return false ; } else { //형식이 올바르면 생년월일 자동으로 입력하기 } } < body > < form action = "MAILTO:[email protected]" method = "post" enctype = "text/plain" onsubmit = "return Validation();" > < table align = "center" width = "600" height = "200" border = "1" cellpadding = "3" cellspacing = "0" bordercolor = #0872b0 > < tr > < td bgcolor = #ccecff align = "center" colspan = "2" >< b >회원 기본 정보 < tr > < td bgcolor = #e6e6e6 align = "center" >< b >아이디: < td >< input type = "text" Name = "id" id = "id" SIZE = "20" maxlength = "12" > 4~12자의 영문 대소문자와 숫자로만 입력 < tr > < td bgcolor = #e6e6e6 align = "center" >< b >비밀번호: < td >< input type = "password" Name = "pwd" id = "pwd" SIZE = "20" maxlength = "12" > 4~12자의 영문 대소문자와 숫자로만 입력 < tr > < td bgcolor = #e6e6e6 align = "center" >< b >비밀번호 확인: < td >< input type = "password" Name = "pwd" id = "pwd2" SIZE = "20" maxlength = "12" > < tr > < td bgcolor = #e6e6e6 align = "center" >< b >메일주소: < td >< input type = "text" Name = "mail" id = "mail" SIZE = "20" > 예)[email protected] < tr > < td bgcolor = #e6e6e6 align = "center" >< b >이름: < td >< input type = "text" Name = "name" id = "name" SIZE = "20" > < tr > < td bgcolor = #ccecff align = "center" colspan = "2" >< b >개인 신상 정보 < tr > < td bgcolor = #e6e6e6 align = "center" >< b >주민등록번호: < td >< input type = "text" Name = "num" id = "num" SIZE = "20" maxlength = "13" > 예) 1234561234567 < tr > < td bgcolor = #e6e6e6 align = "center" >< b >생일: < td >< input type = "text" Name = "birt" SIZE = "10" maxlength = "4" >년 < select name = "mon" > < option value = "1" selected = "selected" >1 < option value = "2" >2 < option value = "3" >3 < option value = "4" >4 < option value = "5" >5 < option value = "6" >6 < option value = "7" >7 < option value = "8" >8 < option value = "9" >9 < option value = "10" >10 < option value = "11" >11 < option value = "12" >12 월 < select name = "day" > < option value = "1" selected = "selected" >1 < option value = "2" >2 < option value = "3" >3 < option value = "4" >4 < option value = "5" >5 < option value = "6" >6 < option value = "7" >7 < option value = "8" >8 < option value = "9" >9 < option value = "10" >10 < option value = "11" >11 < option value = "12" >12 < option value = "13" >13 < option value = "14" >14 < option value = "15" >15 < option value = "16" >16 < option value = "17" >17 < option value = "18" >18 < option value = "19" >19 < option value = "20" >20 < option value = "21" >21 < option value = "22" >22 < option value = "23" >23 < option value = "24" >24 < option value = "25" >25 < option value = "26" >26 < option value = "27" >27 < option value = "28" >28 < option value = "29" >29 < option value = "30" >30 < option value = "31" >31 일 < tr > < td bgcolor = #e6e6e6 align = "center" >< b >관심분야: < td >< input type = "checkbox" name = "com" value = "컴퓨터" > 컴퓨터 < input type = "checkbox" name = "com" value = "인터넷" > 인터넷 < input type = "checkbox" name = "com" value = "여행" > 여행 < input type = "checkbox" name = "com" value = "영화감상" > 영화감상 < input type = "checkbox" name = "com" value = "음악감상" > 음악감상 < tr > < td bgcolor = #e6e6e6 align = "center" >< b >자기소개: < td >< textarea cols = "70" rows = "7" id = "introduce" name = "introduce" > < br > < div align = "center" > < input type = "submit" value = "회원가입" > < input type = "reset" value = "다시입력" > Colored by Color Scripter

So you have finished reading the 회원 가입 유효성 검사 topic article, if you find this article useful, please share it. Thank you very much. See more: 회원가입 유효성 검사 jquery, 스프링 회원가입 유효성 검사, 아이디 유효성 검사, 자바스크립트 유효성 검사, Ajax 아이디 유효성 검사, jsp 회원가입 유효성 검사, 회원가입 유효성 검사 기획, Form 유효성 검사

Top 49 회원 가입 유효성 검사 Trust The Answer

[js] 자바스크립트 회원가입 유효성 검사(ft. form input 정규식)

[JS] 회원가입 유효성 검사 :: 개발하는개발자

[JavaScript] 회원가입 유효성검사

회원가입, 수정 시 유효성 검사하기

[JS] 회원가입 유효성 검사

js/ 회원가입 유효성 검사(공백만) – everyday com-eat

[JavaScript] 회원가입 폼 유효성검사 (정규식)

[HTML][Java Script] 회원가입 폼 – 유효성 검사

[js] 자바스크립트 회원가입 유효성 검사(ft. form input 정규식)

[JS] 회원가입 유효성 검사

[JavaScript] 회원가입 유효성검사

Leave a Comment Cancel reply