뇌운동일지

[ HTML ] 간단한 유효성 검사를 추가한 회원가입 예제 본문

HTML

[ HTML ] 간단한 유효성 검사를 추가한 회원가입 예제

purpleduck 2020. 8. 3. 18:17

1. 회원가입 유스케이스 작성 

유스케이스명

회원가입

개요

협회 홈페이지에 접속하기 위한 회원가입 과정을 수행한다.

관련 액터

신규 협회 가입 희망자

선행조건

없음

흐름 (시나리오)

기본

1.     가입희망자는 메인화면에서 “회원가입”을 선택한다.

2.     시스템은 “회원가입”화면을 보여준다.

3.     가입희망자는 회원가입 메인화면에서 가입 양식에 자신의 정보를 입력한 후, 회원가입 버튼을 누른다.

4.     시스템은 가입희망자가 모든 필수정보를 기입했는지 확인한 후, 회원가입을 한다.

대안

3-1. 가입희망자가 가입취소 버튼을 클릭하는 경우, 시스템은 입력된 모든 내용을 삭제하고 초기화한다.

 

4-1. 가입희망자가 회원가입 버튼을 클릭하였으나, 가입 양식에서 비어있는 필수정보가 있을 경우, 재입력 메시지를 출력한다.

기타 요구사항

없음

 

2. 회원 가입 화면을 구현하고 폼 구성(HTML)과 데이터 검증하는 코드(자바스크립트)를 구현

 

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>CB 회원가입 페이지</title>
<style type="text/css">
	table {width:500px; height:500px; 
		border:5px solid #660066; background-color:#d0c1e1; 
		text-align:left; margin:10px; padding:20px}
	
</style>
<script>
	function formCheck(form){
		// 유효성 검사 
		if(form.id.value == ""){
			alert('아이디를 기입하세요');
			form.id.focus();
			return ;
		}
		if(form.myname.value == ""){
			alert('이름을 기입하세요');
			form.myname.focus();
			return ;
		}
		if(form.email.value == ""){
			alert('이메일을 기입하세요');
			form.email.focus();
			return ;
		}
		if(form.pswd.value == ""){
			alert('암호를 기입하세요');
			form.pswd.focus();
			return ;		
		}
		if(form.contents.value == ""){
			alert('자기소개를 기입하세요');
			form.contents.focus();
			return ;
		}

		alert( form.id.value+'('+
			form.myname.value + ") 님의 \n 회원가입이 완료되었습니다."
			);
		
	}

	function passwordCheckFunc(){
		var password = document.getElementById("pw").value;
		var passwordCheck = document.getElementById("pwck").value;

		if(passwordCheck==""){
			document.getElementById("passwordCheckText").innerHTML=""
		}
		else if (password!=passwordCheck)
		{
			document.getElementById("passwordCheckText").innerHTML="일치하지 않습니다."
		}
		else{
			document.getElementById("passwordCheckText").innerHTML="일치합니다. "
		}
	}
		

</script>
 </head>
 <body>
 <center>
 <h1> <font color="#3300cc">회원가입</font></h1>
 <form>
 <table>
	<tr><p>*는 필수입력사항 입니다.</p></tr>
  <tr>

   <td>아이디* </td>
   <td>
   <input name="id" type = "text" >
   <input type = "button" value = "중복확인">
   </td>
  </tr>



  <tr>
   <td> 비밀번호* </td>
   <td> <input type = "password" id="pw" name="pswd"> </td>
  </tr>


  <tr>
   <td> 비밀번호 확인 </td>
   <td> <input type = "password"  id="pwck" name="pswdCheck" onkeyup="passwordCheckFunc()">&nbsp;*비밀번호를 다시입력해주세요. </td>
	
  </tr>
	<tr>
		<td></td>
		<td id="passwordCheckText">
	</tr>

  <tr>
   <td> 이름* </td>
   <td> <input type = "text" name="myname"> </td>
  </tr>


  <tr>
   <td> 성별 </td>
   <td>
    <input type = "radio" name = "gender" checked> 여자
    <input type = "radio" name = "gender"> 남자
   </td>
  </tr>




  <tr>
   <td> 이메일* </td>
   <td>
    <input name="email" type = "text"> @ <input type = "text"> &nbsp;&nbsp;
    <select>
     <option> 직접입력 </option>
     <option> naver.com </option>
     <option> daum.net </option>
     <option> gmail.com </option>
    </select>
   </td>
  </tr>




  <tr>
   <td> 주소 </td>
   <td>
    <input type = "text">
    <input type = "button" value = "주소찾기">
   </td>
  </tr>
  <tr>
   <td> 상세주소 </td>
   <td>
    <input type = "text">
   </td>
  </tr>



  <tr>
   <td> 휴대폰 </td>
   <td>
    <input type = "radio" name = "phone"> SKT
    <input type = "radio" name = "phone"> KT
    <input type = "radio" name = "phone"> LGU+
    <input type = "radio" name = "phone"> 알뜰폰
   <br/>
    <select>
     <option> 010 </option>
     <option> 011 </option>
     <option> 016 </option>
     <option> 018 </option>
    </select>
    - <input type = "text" size = "6"> - <input type = "text" size = "6">
   </td>
  </tr>




  <tr>
   <td> 악기  </td>
   <td>
    <input type = "checkbox"> 바이올린
    <input type = "checkbox"> 비올라
    <input type = "checkbox"> 첼로
    <input type = "checkbox"> 콘트라베이스
   </td>
  </tr>



  <tr>
   <td> 자기소개*  </td>
   <td>
    <textarea name="contents" cols = "60" rows = "10"></textarea>
   </td>
  </tr>

<tr>
	<td><input type = "button" value = "회원가입" onclick="formCheck(this.form)"></td>
	<td><input type = "reset" value = "다시입력"></td>
</tr>




</table>
 </form>

</br>



</center>
</body>


</html>

 

결과 화면 

 

 

소스코드에서 다른 블로그의 예제를 참고한 부분이 있었음. 

 

 

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

HTML 소소한 개념  (0) 2020.09.22
[ HTML ] 기본 UI 구현 연습  (0) 2020.08.03
[HTML5] 시맨틱 태그  (0) 2020.04.16
[HTML5] html5에서 지원되지 않는 속성  (0) 2020.04.08
[HTML5] 폼 관련 태그들  (0) 2020.04.08
'HTML' Related Articles more
Comments