(10) 등록 버튼과 취소 버튼을 이미지로 만들어보자. 우선 다음의 그림을 각각 ok.gif , cancel.gif 라는 이름으로 login_new.asp 문서가 있는 폴더에 img라는 폴더를 만들고 그 안에 저장하자.
 
그리고 다음과 같이 소스를 수정하자. - 빨간색부분이 바뀐 부분이다.
| login_new.asp |
<html>
<head><title>새로운회원</title>
<script language="JavaScript">
<!--
function CheckForm()
{
if (document.form.id.value.length < 1) {
alert("아이디를 입력하세요.");
document.form.id.focus();
return false;
}
if (document.form.pwd.value.length < 1) {
alert("비밀번호를 입력하세요.");
document.form.pwd.focus();
return false;
}
if (document.form.pwd2.value.length < 1) {
alert("비번확인을 입력하세요.");
document.form.pwd2.focus();
return false;
}
if (document.form.name.value.length < 1) {
alert("이름을 입력하세요.");
document.form.name.focus();
return false;
}
if (document.form.email.value.length < 1) {
alert("이메일을 입력하세요.");
document.form.email.focus();
return false;
}
if (document.form.address.value.length < 1) {
alert("주소를 입력하세요.");
document.form.address.focus();
return false;
}
document.form.submit();
}
// -->
</script>
<style type="text/css">
<!--
BODY, table, tr, td, input, textarea, select
{
font-family: 굴림;
font-size: 9pt;
}
A:link {color:#000000;text-decoration:none;}
A:visited {color:black;text-decoration:none;}
A:active {color:blue;text-decoration:none;}
A:hover {color:red;text-decoration:underline;}
-->
</style>
</head>
<body>
<form action=./login_insert.asp method=post name=form onsubmit='CheckForm()'>
<table border=0 width=100% cellpadding=0 cellspacing=0>
<tr><td bgcolor=black>
<table border=0 width=100% cellpadding=3 cellspacing=1>
<tr><td bgcolor=#C7E4FD align=center><b>회원가입양식</b></td></tr>
<tr><td bgcolor=white>
<table border=0 witdh=100% cellpadding=0 cellspacing=0>
<tr><td align=center bgcolor=#eff8ff>아이디</td>
<td> <input type=text size=15 name=id style="border:1 dashed;"></td></tr>
<tr><td align=center bgcolor=#eff8ff>비밀번호</td>
<td> <input type=password size=15 name=pwd style="border:1 dashed;"></td></tr>
<tr><td align=center bgcolor=#eff8ff>비번확인</td>
<td> <input type=password size=15 name=pwd2 style="border:1 dashed;"></td></tr>
<tr><td align=center bgcolor=#eff8ff>이름</td>
<td> <input type=text size=15 name=name style="border:1 dashed;"></td></tr>
<tr><td align=center bgcolor=#eff8ff>이메일</td>
<td> <input type=text size=20 name=email style="border:1 dashed;"></td></tr>
<tr><td align=center bgcolor=#eff8ff>주소</td>
<td> <input type=text size=60 MAXLENGTH=200 name=address style="border:1 dashed;"></td></tr>
</table>
</td></tr>
</table
</td></tr>
</table>
<table border=0 width=100% cellpadding=3 cellspacing=3>
<tr><td align=center>
<a href="javascript:document.form.onsubmit()"><img src=./img/ok.gif border=0></a> <a href="javascript:document.form.reset()"><img src=./img/cancel.gif border=0></a>
</td></tr>
</table>
</form>
</body>
</html> | | |
(11) 수정후 확인한 모습이다. 이미지를 이용해서 등록과 취소 버튼을 대신했다.
(12) 다음은 입력폼에 입력된 각각의 값들이 가져야 할 조건을 검사하도록 하자. 예를 들어 아이디부분은 최소 몇글자 이상 최대 몇글자 이상 기입해서는 안되고 영어대소문자와 숫자만의 조합으로 이루어져야 한다는 조건이나 비밀번호와 비번확인의 정보가 서로 일치하는가 하는 조건, 또는 이메일의 경우 골뱅이가 들어갔는지 또는 이상한 특수문자가 들어갔는지를 직접 체크를 해야 한다.
다음은 이런 여러가지 조건을 대충 만족 시키는 소스이다. 이전에 만들었던 login_new.asp 문서를 다음과 같이 수정하도록 하자.
| login_new.asp |
<html>
<head><title>새로운회원</title>
<script language="JavaScript">
<!--
// 입력폼값 체크 함수
function CheckForm()
{
var id= document.form.elements["id"].value;
var pwd= document.form.elements["pwd"].value;
var pwd2= document.form.elements["pwd2"].value;
var name= document.form.elements["name"].value;
var email= document.form.elements["email"].value;
var address= document.form.elements["address"].value;
// 회원아이디 체크
if(id.length < 4 || id.length > 15) {
alert("4자이상 15자 이하의 아이디를 입력하세요.");
document.form.id.focus();
return false;
}
else {
// 아이디의 유효성 체크
if(!check_username(id) || id.indexOf(" ") != -1) {
alert("ID는 공백 없이 영문자나 숫자만 입력 하실수 있습니다!");
document.form.id.focus();
return false;
}
}
// 비밀번호 체크
if(pwd.length < 4 || pwd.length > 15) {
alert("4자이상 15자 이하의 비밀번호를 입력하세요.");
document.form.pwd.focus();
return false;
}
else {
// 비밀번호의 유효성 체크
if(!check_username(pwd) || pwd.indexOf(" ") != -1) {
alert("비밀번호는 공백 없이 영문자나 숫자만 입력 하실수 있습니다!");
document.form.pwd.focus();
return false;
}
else {
// 비번 일치 확인
if(pwd != pwd2) {
alert("비밀번호와 비번확인이 일치하지 않습니다.");
document.form.pwd2.focus();
return false;
}
}
}
// 이름 체크
if(name.length < 1 || name.indexOf(" ") != -1) {
alert("이름을 공백없이 입력하시오.");
document.form.name.focus();
return false;
}
// 이메일체크
if (!check_email(email)) {
document.form.email.focus();
return false;
}
}
// 이름의 유효성 체크 함수
function check_username(urstr)
{
var newstr = new String(urstr);
var i; var result;
for(i=0; i<urstr.length; i++) {
if((urstr.charAt(i) >= "A") && (urstr.charAt(i) <= "Z"))
result = true;
else
if((urstr.charAt(i) >= "a") && (urstr.charAt(i) <= "z"))
result = true;
else
if((urstr.charAt(i) >= "0") && (urstr.charAt(i) <= "9"))
result = true;
else
return false;
}
if(result == true)
return true;
}
// 이메일 유효성 체크 함수
function check_email(email)
{
if (!validate_ascii_data(email)) {
alert("E-Mail에 잘못된 문자가 있습니다. 다시 입력해 주십시오.");
return false
}
var invalidChars = "\"|&;<>!*\'\\" ;
for (var i = 0; i < invalidChars.length; i++) {
if (email.indexOf(invalidChars.charAt(i)) != -1) {
alert("E-Mail에 잘못된 문자가 있습니다. 다시 입력해 주십시오.");
return false;
}
}
if (email.indexOf("@")==-1){
alert("E-Mail이 잘못되었습니다. '@'가 있는지 확인해 주십시오.");
return false;
}
if (email.indexOf(" ") != -1){
alert("E-Mail에 공백이 있습니다. 다시 입력해 주십시오.");
return false;
}
if(window.RegExp) {
var reg1str = "(@.*@)|(\\.\\.)|(@\\.)|(\\.@)|(^\\.)";
var reg2str = "^.+\\@(\\[?)[a-zA-Z0-9\\-\\.]+\\.([a-zA-Z]{2,3}|[0-9]{1,3})(\\]?)$";
var reg1 = new RegExp (reg1str);
var reg2 = new RegExp (reg2str);
if (reg1.test(email) || !reg2.test(email)) {
alert("E-Mail에 잘못된 문자가 있습니다. 다시 입력해 주십시오.");
return false;
}
}
return true;
}
function validate_ascii_data(urstr)
{
var i; var result;
for(i=0; i<urstr.length; i++) {
if((urstr.charAt(i) < " ") || (urstr.charAt(i) > "~"))
return false;
}
return true;
}
// -->
</script>
<style type="text/css">
<!--
BODY, table, tr, td, input, textarea, select
{
font-family: 굴림;
font-size: 9pt;
}
A:link {color:#000000;text-decoration:none;}
A:visited {color:black;text-decoration:none;}
A:active {color:blue;text-decoration:none;}
A:hover {color:red;text-decoration:underline;}
-->
</style>
</head>
<body>
<form action=./login_insert.asp method=post name=form onSubmit="Javascript:return CheckForm();">
<table border=0 width=100% cellpadding=0 cellspacing=0>
<tr><td bgcolor=black>
<table border=0 width=100% cellpadding=3 cellspacing=1>
<tr><td bgcolor=#C7E4FD align=center><b>회원가입양식</b></td></tr>
<tr><td bgcolor=white>
<table border=0 witdh=100% cellpadding=0 cellspacing=0>
<tr><td align=center bgcolor=#eff8ff>아이디</td>
<td> <input type=text size=15 name=id style="border:1 dashed;"></td></tr>
<tr><td align=center bgcolor=#eff8ff>비밀번호</td>
<td> <input type=password size=15 name=pwd style="border:1 dashed;"></td></tr>
<tr><td align=center bgcolor=#eff8ff>비번확인</td>
<td> <input type=password size=15 name=pwd2 style="border:1 dashed;"></td></tr>
<tr><td align=center bgcolor=#eff8ff>이름</td>
<td> <input type=text size=15 name=name style="border:1 dashed;"></td></tr>
<tr><td align=center bgcolor=#eff8ff>이메일</td>
<td> <input type=text size=20 name=email style="border:1 dashed;"></td></tr>
<tr><td align=center bgcolor=#eff8ff>주소</td>
<td> <input type=text size=60 MAXLENGTH=200 name=address style="border:1 dashed;"></td></tr>
</table>
</td></tr>
</table
</td></tr>
</table>
<table border=0 width=100% cellpadding=3 cellspacing=3>
<tr><td align=center>
<input type=image src=./img/ok.gif alt="회원가입">
</table>
</form>
</body>
</html> | | |
|
