어제에 이어 회원가입 폼 만들기 추가정리
* head태그 안에 script태그
function totChk(){
// memId 입력유무확인
if(frm.memId.value.length<4){
alert("아뒤는 4~12글자 까지 입니다.");
return false;
}
// memId에 문자,숫자 혼합확인
// 비교기준: 아스키코드값
cnt=0; // 숫자의 갯수를 구하기 위해서 cnt라는 변수 선언, 0초기화
for (i=0; i<frm.memId.value.length; i++) //9글자 라면 0부터 8까지
{ // go75ma 라면 6글자 이므로 012345
str = frm.memId.value.charAt(i); // 초기값이 0이므로 1번째 글자가 된다
if (str>='0' && str<='9') // 한글자 떼어서 비교 : 반복
{ // 아스키코드로 입력시 따옴표 없이 입력
cnt=cnt+1; // 숫자일때만 cnt값 증가
}
} // 아래의 소스가 for문을 벗어나야 cnt값이 0이어도 alert가 없다.
if (cnt == 0) // 숫자를 한개도 쓰지 않았다면
{
alert("아이디는 문자와 숫자 혼용해야 합니다!!!");
frm.memId.value=""; //기존에 입력한 text 삭제
frm.memId.focus(); // 커서 이동
return false;
}
// 비밀번호 검색하기
// 대,소,숫자 혼용하기
pwdLng = frm.memPwd.value.length; // 비밀번호 문자길이
charCnt = 0; // 소문자 갯수구하기
CharCnt = 0; // 대문자 갯수구하기
numCnt = 0; // 숫자 갯수구하기
etcCnt = 0; // 기타 갯수구하기
for (i=0; i<pwdLng; i++)
{
str = frm.memPwd.value.charAt(i);
// str = frm.memPwd.value.charCodeAt(i);
// 아스키코드 입력시 위처럼 변경
if (str>='a' && str<='z') // 소문자
{
charCnt++;
}else if (str>='A' && str<='Z') // 대문자
{
CharCnt++;
}else if (str>='0' && str<='9'){ // 숫자
numCnt++;
}else{
etcCnt++; // 그외의 것
}
}
if (charCnt == 0 || CharCnt == 0 || numCnt ==0)
{
alert("비번은 대문자,소문자,숫자를 혼용해야 합니다!");
frm.memPwd.value="";
return false;
}
if (etcCnt>0)
{
alert("특수문자는 사용할 수 없습니다");
frm.memPwd.value="";
return false;
}
if(document.frm.memPwdChk.value == "")
{
alert("비밀번호를 다시한번 입력해주세요")
document.frm.memPwdChk.focus();
return false;
}
if(document.frm.memName.value == "")
{
alert("이름이 없는건가..")
document.frm.memName.focus();
return false;
}
if(document.frm.memJumin01.value == "" || frm.memJumin02.value == "")
{
alert("주민등록번호를 입력하세요")
document.frm.memJumin01.focus();
return false;
}
// 성별입력유무확인
if (frm.memSung[0].checked==false && frm.memSung[1].checked==false)
{
alert("성별을 선택하세요");
return false;
}
// email검사하기 : 골뱅이=atMark
atMark = frm.memEmail.value.indexOf('@');
dot = frm.memEmail.value.indexOf('.');
len = frm.memEmail.value.length;
if (atMark==-1 || dot==-1 || (dot-atMark)<=1 ||
atMark==0 || dot==0 || atMark==len-1 || dot==len-1) // 없는 글자
{ alert("이메일 형식에 어긋한 주소 입니다.");
}
return true;
// 취미 체크 여부 검사 : 체크 최소한 두개 이상 확인
}
function jumin1Length(){
// 주민번호 입력하기
if(frm.memJumin01.value.length==6){
frm.memJumin02.focus();
}
}
function jumin2Length(){
// 앞자리6, 뒷자리7일 경우
// 생년월일, 성별, 이메일 포커스이동
if (frm.memJumin01.value.length==6 && frm.memJumin02.value.length==7)
{
jumin1 = frm.memJumin01.value;
jumin2 = frm.memJumin02.value;
//생년월일
//년
f = jumin2.substring(0,1); // 주민번호 뒷자리의 첫번째 글자
if (f==1 || f==2) //1900년대사람
{
frm.memBirth01.value = "19"+jumin1.substring(0,2);
}else{ //2000년대사람
frm.memBirth01.value = "20"+jumin1.substring(0,2);
}
//월
frm.memBirth02.value = jumin1.substring(2,4); // 2번째부터 4번째 앞까지
//일
frm.memBirth03.value = jumin1.substring(4); // 4번째부터 끝까지
//성별
if (f==1 || f==3) // 남자
{ frm.memSung[0].checked = true;
}else{ // 여자
frm.memSung[1].checked = true;
}
frm.memEmail.focus();
}
}
//숫자키 입력검사하기
function numChk(){
if (!(event.keyCode>=48 && event.keyCode<=57)) // 숫자의 범위를 벗어났을 때
// event.keyCode : 지금 눌러진 키에 대한 아스키 코드를 구한다.
{ event.returnValue=false; // returnValue라는 변수에 화면에 문자출력취소
}
}
* body태그안에 form 태그
<form action="#" method="post" name="frm" submit="totChk()">
<table border="0" cellpadding="0" cellspacing="0"> <!-- cellpadding과 cellspacing 값을 0으로 초기화 해주지 않으면 테이블내부의 행/열 간 간격이 벌어진다. -->
<caption align="left">
<font color="white">..</font><font color="red">*</font><font id="s">표시 항목은 필수 입력 항목입니다.</font></caption>
<tr height="60">
<td align="right" width="100" bgcolor="#efefef">아 이 디 </td>
<td valign="top"> <font color="red">* </font></td>
<td width="600">
<input type="text" name="memId" size="16" maxlength="12" value="goguma777" onClick="this.style.backgroundColor='black'; this.value='',this.style.color='white'" onBlur="this.style.backgroundColor='gray'; this.style.borderColor='red'"> <!--스타일시트가 인라인방식일때-를뺀다
this.style.backgroundColor C대문자-->
<!--▲ this.:현재인풋태그영역을 가르킨다. -->
<tr height="30">
<td align="right" bgcolor="#efefef">주민등록번호 </td>
<td valign="top"> <font color="red">*</font></td>
<td>
<input type="text" name="memJumin01" size="7" maxlength="6" onKeyUp="jumin1Length()" onKeyPress="numChk()">-
<input type="text" name="memJumin02" size="7" maxlength="7" onKeyUp="jumin2Length()" onKeyPress="numChk()">
</td> </tr>
<tr height="30">
<td align="right" bgcolor="#efefef">생년월일 </td>
<td valign="top"> <font color="red">*</font></td>
<td>
<input type="text" name="memBirth01" size="4" maxlength="4">년
<input type="text" name="memBirth02" size="3" maxlength="2">월
<input type="text" name="memBirth03" size="3" maxlength="2">일
</tr>
<tr height="30">
<td align="right" bgcolor="#efefef">성<font color="white">....</font>별 </td>
<td valign="top"> <font color="red">*</font></td>
<td>
<input type="radio" name="memSung" value="man">남자
<input type="radio" name="memSung" value="woman">여자
</tr>
<tr height="30">
<td align="right" bgcolor="#efefef">E - mail </td>
<td valign="top"> <font color="red">*</font></td>
<td>
<input type="text" name="memEmail" size="28">
</td>
</tr>
<tr height="30">
<td align="right" bgcolor="#efefef">메일수신 </td>
<td valign="top"> <font color="red">*</font></td>
<td>
<input type="radio" name="memEmailYes" value="mailYes" checked>수신동의
<input type="radio" name="memEmailNo" value="mailNo">수신거부
</td>
</tr>
<tr height="30">
<td align="right" bgcolor="#efefef">우편번호 </td>
<td valign="top"> <font color="red">*</font></td>
<td>
<input type="text" name="memZipCode01" size="4" maxlength="3">-
<input type="text" name="memZipCode02" size="4" maxlength="3">
<input type="button" value="검색" onClick="zipChk()">
</td>
</tr>
<tr>
<td align="right" bgcolor="#efefef">주<font color="white">....</font>소 </td>
<td valign="top"> <font color="red">*</font></td>
<td>
<input type="text" name="memAddr1" size="28"><br>
<input type="text" name="memAddr2" size="16">
</td>
</tr>
<!--
- keyEvent 종류
onKeyPress : 키를 누르고 있을 때 발생
onKeyUp : 키를 누른 후 놓았을 때 발생
onKeyDown : 키를 입력했을 때 발생
- mouseEvent 종류
onMouseOver : 마우스포인터가 지정 범위안에 있을 때
onMouseOut : 마우스포인터가 지정 범위 바깥으로 나갈 때
onClick : 마우스 클릭시
onBlur : 영역이 클릭이 된 상태에서 다른곳을 클릭하여 포커스가 범위를 벗어났을 때
onMouseUp : 마우스를 눌렀다 놨을 때
onMouseDown : 마우스를 누르고 있을 때
onDbClick : 마우스를 더클클릭시
onDragDrop : 마우스 드래그시
onChange : 입력값이 변경시
onReset : 재시작시
onMove : 윈도우가 이동시
onLoad : 대상이 열렸을 때
onUnLoad : 대상이 닫혔을 때
onResize : 윈도우의 크기가 변경됐을 때
onSelect : 입력양식에서 선택했을 때
onSubmit : 입력양식을 서버로 전송할 때
-->
* 닉네임 중복검사 팝업창 만들기
<head>
<title> 닉네임 중복 검사 </title>
<script src="nickScript.js"> // 외부파일 링크
</script>
</head>
<body>
<form name="nickFrm">
대화명 : <input type="text" name="nick"><br>
<input type="button" value="닉네임사용하기" onClick="nickClose()">
</body>
* 닉네임 중복검사 팝업창의 외부파일(nickScript.js)
function nickClose(){
opener.document.frm.memNic.value=nickFrm.nick.value;
window.close();
}
* 주소 검색 팝업창 만들기
<head>
<title> 주소 검색 </title>
<script>
function zipChkClose()
{
if(zipFrm.addr.value==""){ // == 주의
alert("상세주소를 입력하세요!!!")
return; // 리턴이 나오는 순간 함수 종료 지점으로 이동
// 밑에 명령어들을 건너뛰기 때문에 창이 닫히지 않는다
}
opener.document.frm.memZipCode01.value="123";
opener.document.frm.memZipCode02.value="456";
opener.document.frm.memAddr1.value="서울시 영등포구 당산동";
opener.document.frm.memAddr2.value=zipFrm.addr.value;
window.close();
}
</script>
</head>
<body>
<form name="zipFrm">
우편번호 : 123-456<br>
주소 : 서울시 영등포구 당산동<br>
상세주소 : <input type="text" name="addr"><br>
<input type="button" value="주소사용하기" onClick="zipChkClose()">
</form>
</body>
* 아이디 중복검사 팝업창 만들기
<head>
<title> 아이디 중복검사 </title>
<script>
function idChkClose()
{ // 메인폼에 검색한 아이디를 표시
opener.document.frm.memId.value="myID"
// 현재창 닫기
window.close();
//self.close();
}
</script>
</head>
<body>
당신이 입력한 아이디는 사용가능한 <br>아이디 입니다.
<p>
<input type="button" value="Close" onClick="idChkClose()">
</body>
* 특정 문자의 위치/글자수 구하는 함수
<script>
id = "goguma777@nate.com"
// 글자의 길이 구하기
document.write(id.length+"<br>"); // 글자수를 구하는 변수(?):length
// 괄호가 없는건 변수
// 한글자 구하기
document.write(id.charAt(5)+"<br>"); // 괄호안의 인덱스 의미:특정위치의 글자를
// 꺼냈다 보면 된다. id.charAt(5)는 5번째 글자를 얻어내는 메소드
// 괄호가 있으면 메소드 없으면 변수
// 제일 앞글자는 0이라는 위치값, 순서대로 1234...
// 공백도 한글자 차지
// 문자열 구하는 함수
document.write(id.substring(3)+"<br>");
// 여러글자, 필요한만큼 글자를 얻어내는 메소드
// 3이라 입력하면 3번째 글자의 위치부터 끝까지~
document.write(id.substring(3,6)+"<br>");
// 3인덱스에 있는 문자부터 6인덱스 위치의 앞 문자까지
// 특정문자의 위치구하기
// index값을 구하며 찾을 문자가 없으면 -1을 리턴한다
document.write(id.indexOf('.'));
</script>
* for문을 활용한 구구단 소스 재정리
<script language="JavaScript">
document.write("<table border=1 align=center><caption>=구구단=</caption>");
for (i=2; i<=9; i+=4) // 2, 6
{
// 제목출력 : 2단 3단 4단 ..
document.write("<tr>");
for (dan=i; dan<=i+3; dan++)
{ // 2 5
// 6 9
document.write("<td width=100>"+dan+"단</td>")
}
document.write("</tr>");
for (j=2; j<=9; j++)
{ document.write("<tr>");
for (dan=i; dan<=i+3; dan++)
{ document.write("<td>"+dan+"*"+j+"="+dan*j);
}
document.write("</td>")
}
}
document.write("</table>");
</script>
* 자바스크립트 함수, id와 마우스액션을 이용한 이미지 border 효과
-쉽게 말해 롤오버 이미지효과
<html>
<head>
<title> New Document </title>
<script>
function backImg(ColorName){
document.all['bImg'].style.borderColor=ColorName;
}
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border=1 align=center>
<tr height="150">
<td width="50" bgcolor="#454545" onMouseOver="backImg('#454545')" onMouseOut="backImg('black')">
<td width="50" bgcolor="#515151" onMouseOver="backImg('#515151')" onMouseOut="backImg('#ffffff')">
<td width="50" bgcolor="#5a5a5a" onMouseOver="backImg('#5a5a5a')" onMouseOut="backImg('#ffffff')">
<td width="50" bgcolor="#686868" onMouseOver="backImg('#686868')" onMouseOut="backImg('#ffffff')">
<td width="50" bgcolor="#757575" onMouseOver="backImg('#757575')" onMouseOut="backImg('#ffffff')">
<td width="50" bgcolor="#808080" onMouseOver="backImg('#808080')" onMouseOut="backImg('#ffffff')">
<td width="50" bgcolor="#8b8b8b" onMouseOver="backImg('#8b8b8b')" onMouseOut="backImg('#ffffff')">
<td width="50" bgcolor="#999898" onMouseOver="backImg('#999898')" onMouseOut="backImg('#ffffff')">
<td width="50" bgcolor="#a7a6a6" onMouseOver="backImg('#a7a6a6')" onMouseOut="backImg('#ffffff')">
<td width="50" bgcolor="#b9b9b9" onMouseOver="backImg('#b9b9b9')" onMouseOut="backImg('#ffffff')">
<td width="50" bgcolor="#cccbcb" onMouseOver="backImg('#cccbcb')" onMouseOut="backImg('white')">
</tr>
<tr>
<td align="center" colspan="11">
<img id="bImg" src = "../html/img/1.gif"
border="10">
</td>
</tr>
</table>
<p></p>
<center>
</center>
</body>
</html>
'Html/Jsp/Javascript' 카테고리의 다른 글
Html,Jsp,Css_09 (0) | 2011.10.20 |
---|---|
Html,Jsp,Css_08 (0) | 2011.10.19 |
[Test] for문과 테이블을 이용한 구구단 출력하기 & while문으로도 해보기 (0) | 2011.10.17 |
Html,Jsp,Css_06 (0) | 2011.10.17 |
[Test] 회원가입 폼 만들기 (1) | 2011.10.16 |