<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<style>
.wrapper div{
border: 1px solid black;
margin: 0px;
padding: 1px;
}
.wrapper{
width: 75%;
margin: auto;
}
.tel{
width: 100px;
}
.center{
text-align: center;
}
.right{
text-align: right;
}
.addressbox{
width: 100%;
}
</style>
<script>
window.onload = function(){
document.getElementById("frm").onsubmit = function(){
var userid = document.getElementById("userid").value;
var regexuserid= /\w{1,10}/;
var resultuserid = regexuserid.test(userid);
if(!resultuserid){
alert("아이디 입력값이 잘못되었습니다. 영문 대소문자와 숫자, (-)를 사용하여 1이상 10이하 글자를 입력하세요")
}
var pw1 = document.getElementById("pw1").value;
var regexpw1= /.{6,12}/;
var resultpw1 = regexpw1.test(pw1);
if(!resultpw1){
alert("비밀번호 입력값이 잘못되었습니다. 공백문자를 제외하고 6글자 이상 12글자 이하로 입력하세요")
}
var pw2 = document.getElementById("pw2").value;
var regexpw2= /.{6,12}/;
var resultpw2 = regexpw2.test(pw2);
if(!resultpw2){
alert("비밀번호 확인 입력값이 잘못되었습니다. 공백문자를 제외하고 6글자 이상 12글자 이하로 입력하세요")
}
var name = document.getElementById("name").value;
var regexname= /[가-힣]{2,5}/;
var resultname = regexname.test(name);
if(!resultname){
alert("이름 입력값이 잘못되었습니다. 한글 2글자 이상 5글자 이하로 입력하세요")
}
var phone = document.getElementById("phone").value;
var regexphone= /\d{10,11}/;
var resultphone = regexphone.test(phone);
if(!resultphone){
alert("전화번호 입력값이 잘못되었습니다. 숫자 10~11자로 입력하세요")
}
var email = document.getElementById("email").value;
var regexemail= /.+@[a-z]+\.[a-z]+/;
var resultemail = regexemail.test(email);
if(!resultemail){
alert("이메일 입력값이 잘못되었습니다. @와 . 을 포함하여 입력해주세요")
}
// if( resultpw1==true && resultpw2==true && resultname == true && resultphone == true && email == true ){
// return true;
// }else{
// return false;
// }
return resultpw1 && resultpw2 && resultname && resultphone && email
}
}
</script>
</head>
<body>
<div class = wrapper>
<form action="abc.html" id=frm>
<div class="row center">
<div class="col-sm-12 ">
회원가입 정보 입력
</div>
</div>
<div class="row">
<div class="col-sm-2 right">
아이디 :
</div>
<div class="col">
<input type="text" id="userid">
<input type="button" value="중복확인">
</div>
</div>
<div class="row">
<div class="col-sm-2 right">
패스워드 :
</div>
<div class="col">
<input type="password" id="pw1">
</div>
</div>
<div class="row">
<div class="col-sm-2 right">
패스워드 확인 :
</div>
<div class="col">
<input type="password" id="pw2">
</div>
<div id="result"></div>
</div>
<div class="row">
<div class="col-sm-2 right">
이름 :
</div>
<div class="col">
<input type="text" id="name">
</div>
</div>
<div class="row">
<div class="col-sm-2 right">
핸드폰 번호 :
</div>
<div class="col">
<input type ="text" id="phone">
</div>
</div>
<div class="row">
<div class="col-sm-2 right">
이메일 :
</div>
<div class="col">
<input type="text" id="email">
</div>
</div>
<div class="row">
<div class="col-sm-2 right">
우편번호 :
</div>
<div class="col">
<input type="text" id="postcode" placeholder="우편번호" pattern="\d{5}">
<input type="button" onclick="sample4_execDaumPostcode()" value="찾기"><br>
</div>
</div>
<div class="row">
<div class="col-sm-2 right">
주소1 :
</div>
<div class="col">
<input type="text" id="Address1" placeholder="도로명주소" class="addressbox">
</div>
</div>
<div class="row">
<div class="col-sm-2 right">
주소2 :
</div>
<div class="col">
<input type="text" id="Address2" placeholder="상세주소" class="addressbox">
</div>
</div>
<div class="row center">
<div class="col">
<input type="submit" value="회원가입">
<input type="button" value="다시입력">
</div>
</div>
</form>
</div>
<script>
document.getElementById("pw2").onkeyup = function(){
if(document.getElementById("pw1").value==document.getElementById("pw2").value){
document.getElementById("result").innerHTML = "패스워드가 일치합니다"
document.getElementById("result").style.color = "blue";
}else{
document.getElementById("result").innerHTML = "패스워드가 일치하지 않습니다"
document.getElementById("result").style.color = "red";
}
};
function sample4_execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
var roadAddr = data.roadAddress;
document.getElementById('postcode').value = data.zonecode;
document.getElementById("Address1").value = roadAddr;
}
}).open();
}
</script>
</body>
</html>