HTML,CSS는 점차 보완해나갈 예정이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<script type="text/javascript">
function signup(){
//ID검증
var id = document.getElementById("id");
if(id.value == ""){
alert("아이디는 필수 입력 사항입니다.");
id.focus();
return;
}
//ID정규식 확인
//영문자 대소문자,숫자 사용하여 5~8자리 입력
var exp_id = /^[A-Za-z0-9]{5,8}$/;
console.log(exp_id.test(id.value));
//정규식.test(값); - 값이 정규식에 맞아면 true,아니라면 false반환
if(!exp_id.test(id.value)){
//!a = true니까, a=false라는 뜻
//false라면(정규식에 맞지 않다면)
alert("ID는 영문자와 숫자를 사용하여 5~8자리로 입력하세요.");
id.focus();
return;
}
//PassWord검증
var pwd1 = document.getElementById("pwd1");
var pwd2 = document.getElementById("pwd2");
//1. password가 빈 값이라면,
if(pwd1.value == ""){
alert("비밀번호는 필수 입력 사항입니다.");
pwd1.focus();
return;
}
//2. 들어온 값이 정규식에 맞는지 검증
//정규식 - 적어도 영문자,숫자,특수문자 모두 사용하기
///(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^*+=-])(?=.*\d){8,12}/;
var exp_pwd = /(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^*+=-])(?=.*\d){6,12}/;
console.log(pwd1.value.match(exp_pwd));
//match함수 : 정규식에 맞는 부분은 배열로 반환, 대응되는 문자열 못 찾으면 null 반환
if(!exp_pwd.test(pwd1.value)){
alert("영문자,숫자,특수문자 모두 사용해 6~12자리를 입력하세요.");
pwd1.focus();
return false;
}
//3. 비밀번호 맞는지 확인
if(pwd1.value != pwd2.value){ //다르다면
alert("비밀번호가 다릅니다. 다시 확인하고 입력해주세요.");
pwd1.focus();
}else{
document.getElementById("notice").innerHTML = " 비밀번호 일치 ";
}
//Name 검증
var name = document.getElementById("name");
if(name.value == ""){
alert("이름은 필수 입력 사항입니다.");
return;
}
//이름 정규식 검증(한글만)
var exp_name = /^[가-힣]+$/;
if(!name.value.match(exp_name)){
//null값은 false니까
//!a = true
//a = false, 즉 a = null?
alert("이름은 한글만 입력 가능합니다.");
name.focus();
return;
}
//성별 검증
var gender = document.getElementById("gender");
if(gender.value == ""){
alert("성별은 필수 입력사항입니다. 선택하세요.");
return;
}
//이메일 검증
var email = document.getElementById("email");
//이메일은 필수 사항이 아니므로, 정규식만 검증하기
var exp_email = /^[a-z0-9]{2,}@[a-z0-9]{2,}\.[a-z]{2,}$/;
//소문자숫자 -2글자이상 @ 소문자숫자 -2글자 이상 . 소문자2글자이상
if(!email.value.match(exp_email)){
//match->null(false)면...
alert("이메일 형식을 지켜서 입력하세요.");
email.focus();
return;
}
//핸드폰 검증
var phone = document.getElementById("phone");
var exp_phone = /^[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}$/;
if(!exp_phone.test(phone.value)){
//!a = true -> a = false;
alert("핸드폰번호 형식을 지켜서 입력하세요.");
return;
}
//만일 모든 것을 숫자로 받고 싶다면 /^[0-9]+$/;
alert("가입이 완료되었습니다.");
}
</script>
<style type="text/css">
body{
margin:0;
padding:0;
font-size:14px;
}
#notice{
color:gray;
}
.logo{
margin:50px auto;
width:30%;
height:100px;
display:flex;
justify-content:center;
align-items:center;
}
.logo > h1{
margin:0 auto;
font-family:'Times new Roman';
font-style:italic;
font-size:40px;
text-shadow:2px 2px 1px lightgray;
letter-spacing:2pt;
}
.signupform{
margin:0 auto;
width:300px;
text-align:justify;
background:transparent;
}
p.warning {
margin: 3px;
font-size:12px;
color:red;
}
</style>
</head>
<body>
<div id="container">
<div class="logo">
<h1>SignUp Form</h1>
</div>
<form action="#" method="post" class="signupform">
<p>ID</p>
<input type="text" id="id" name="id" size="20">
<p class="warning">영문자,숫자를 사용하여 5~8자리를 입력하세요.</p>
<p>PASSWORD</p>
<input type="password" id="pwd1" name="pwd1" size="20">
<p>
<input type="password" id="pwd2" name="pwd2" size="20"><span id="notice"></span>
<p class="warning">영어 소문자,대문자,숫자,특수문자 모두 사용하여 6~12자리를 입력하세요.</p>
<p>Name</p>
<input type="text" id="name" name="name" size="20">
<p class="warning">한글만 가능합니다.</p>
<p>Date of Birth</p>
<input type="date" id="birthdate" name="birthdate" size="20">
<p>Gender</p>
<select name="gender" id="gender">
<option value="">선택</option>
<option value="female">여성</option>
<option value="male">남성</option>
</select>
<p>Email</p>
<input type="text" id="email" name="email" size="20" placeholder="abc@abc.com">
<p>Phone</p>
<input type="text" id="phone" name="phone" size="20" placeholder="010-1234-5678">
<p>
<input type="button" value="SignUp" size="20" onclick="signup()">
</p>
</form>
</div>
</body>
</html>'WEB > JAVASCRIPT' 카테고리의 다른 글
| 자바스크립트로 페이지 이동(location.href, location.replace()) (0) | 2022.06.30 |
|---|---|
| 자바스크립트로 HTML에 팝업창 띄우기,닫기 (0) | 2022.06.30 |
| 자바스크립트로 문서에 HTML요소 추가하기 (0) | 2022.06.30 |
| 가위바위보 게임 및 간이 계산기 만들기 (0) | 2022.06.27 |
| 자바스크립트 예제 - 객체 (1) (0) | 2022.06.27 |