check function in javascript when making join in form table / 자바스크립트로 회원가입창 만들기

<body>
<form method="post" action="memRegProc.php" name="frm1">
<table border="1" sellspacing="0" width="500">
<tr>
<td colspan="2" align="center" bgcolor="pink">회원가입</td>
</tr>
<tr>
<td>아이디</td>
<td>
<input type="text" name="id" id="id" value="id">
<input type="button" value="중복확인" onclick="popup()">
</td>
</tr>
<tr>
<td>암호</td>
<td><input type="password" name="pw"></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>이메일</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td>전화번호</td>
<td><input type="text" name="tel"></td>
</tr>
<tr>
<td>직업</td>
<td><select name="job">
<option value="">선택</option>
<option value="a">군인</option>
<option value="b">학생</option>
<option value="c">주부</option>
</select></td>
</tr>
<tr>
<td>성별</td>
<td>
남<input type="radio" name="gender" value="m">
여<input type="radio" name="gender" value="ㄹ">
</td>
</tr>
</table>

<table width="500">
<tr>
<td align="center"><input type="button" value="회원가입" onclick="memReg()"></td>
</tr>
</table>
</form>
<!--회원가입창 연습-->

<script>
function popup(){
window.open('02_popup.html','popup','width=200', 'height=200')
}
function idCheck(){
var id= document.frm1.id.value;
if(id==''){
alert('아이디를 입력하세요.');
return false;
}
if(id.length<6 || id.length>16){
alert('아이디를 1~16 글자로 입력하세요.');
return false;
}
}
function pwCheck(){
var pw=document.frm1.pw.value;
if(pw.trim()==''){//trim()메소드 공백제거
alert('패스워드를 입력하세요');
return false;
}
else if(pw.length<6||pw.length>16){
alert('패스워드를 6글자 이상 16글자 이하로 입력하시오');
return false;
}
}
function nameCheck(){
var name=document.frm1.name.value;
if(name.trim()==''){
alert('이름을 입력하세요');
return false;
}
else if(name.length<2||name.length>16){
alert('이름을 2글자 이상 16글자 이하로 입력하시오');
return false;
}
}
function emailCheck(){
var email=document.frm1.email.value;
if(email.trim()==''){
alert('이메일을 입력하세요');
return false;
}
if(email.indexOf('@')!=-1 && email.indexOf('.')!=-1){
return true;
}
else{alert('올바른 이메일을 입력하세요');
return false;
}
}
function telCheck(){
var tel=document.frm1.tel.value;
if(tel.trim()==''){
alert('전화번호를 입력하세요');
return false;
}
if(tel.indexOf('-')!=-1){
return true;
}
else{alert('숫자 사이에 \'-\'를 넣어 주세요');
return false;
}
}
function jobCheck(){
var jobObj=document.frm1.job;
var jobIndex= jobObj.selectedIndex;
if(jobIndex==0){
alert('직업을 선택하세요');
return false;
}
return true;
}
function genderCheck(){//어려운 로직이므로 주의!!
var genderArr=document.frm1.gender;
var gChk=false;
for(var i=0; i<genderArr.length; i++){
if(genderArr[i].checked==true){
gChk=true;
break;
}
}
if(gChk==false){
alert('성별을 선택하세요');
}
return gChk;
}
function memReg(){
var idChk=idCheck();
if(idChk==false)return;
var pwChk=pwCheck();
if(pwChk==false)return;
var nameChk=nameCheck();
if(nameChk==false)return;
var emailChk=emailCheck();
if(emailChk==false)return;
var telChk=telCheck();
if(telChk==false)return;
var jobChk=jobCheck();
if(jobChk==false)return;
var genderChk=genderCheck();
if(genderChk==false)return;
var Chk=confirm('이 정보로 가입하시겠습니까?');
if(Chk==true){
document.frm1.submit();
}
else{}
}


</script>

 </body>

댓글

댓글 쓰기

이 블로그의 인기 게시물

Lottery in javascript / 자바스크립트로 경품추첨기 만들기

<style> body{font-size:9pt;} #panel{border:1px #000000 solid; line-height:400px; font-size:100px; width:400px; height:400px; text-align:center; vertical-align:middle;} </style> <script> var panel; var nTimerID; var labTotal; var nTotalMember; window.onload=function(){ this.init();// 요소 초기화 실행. this.initEventListener();// 이벤트 초기화 실행. } function init(){// 요소 초기화. this.panel = document.getElementById("panel");// 숫자가 출력될 #panel을 찾아 전역변수에 담아둡니다. this.nTimerID = 0;// 참여인원 정보가 입력된 패널을 찾아 전역변수에 담아둡니다. this.labTotal = document.getElementById("lab_total"); this.nTotalMember = 0; } function initEventListener(){// 이벤트 초기화. var btnStart = document.getElementById("btn_start"); btnStart.addEventListener("click", function(){ startTimer(); },false); var btnStop = document.getElementById("btn_stop"); btnStop.addEventListener("click...
자세한 내용 보기

Quick Menu(flying menu) in jQuery / 제이쿼리로 퀵메뉴 바 만들기

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> <title>scroll_menu</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <style> .wrap {width:1000px; height:3000px; background-color:#cdcdcd; margin:0 auto;} #q_menu {width:80px; height:300px; border: 1px solid #000; position: absolute; margin-left: 1000px; margin-top: 150px;} #textDiv {position: absolute;} </style> <script type="text/javascript"> $(document).ready( function(){ $('#q_menu').animate({'top':$(document).scrollTop()+20+'px'},500);//처음시작하는위치 $(window).scroll(function(){ $('#q_menu').stop(); $('#q_menu...
자세한 내용 보기

Accordion Menu in jQuery / 제이쿼리로 아코디언 메뉴 만들기

<div class="menu">menu01</div> <ul class="accordion"> <li>list01</li> <li>list02</li> <li>list03</li> </ul> <div class="menu">menu02</div> <ul class="accordion"> <li>list01</li> <li>list02</li> <li>list03</li> </ul> <style> .accordion {display:none;} .menu.on {color:red;} </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(document).ready(function(){ /*메뉴 아코디언*/   $('.accordion').hide();   $('.menu').click(function(){ $(this).toggleClass('on')         $(this).next().slideToggle();   }); }); </script>
자세한 내용 보기