Contents
이걸 비밀번호체크에 적용하면,joinForm.mustache에서 onsubmit 기능으로 바꾸고
<form action="/join" method="post" enctype="application/x-www-form-urlencoded" onsubmit="return submitCheck()">
<input id="username" class="my_auth_form_box_input" type="text" name="userName" placeholder="유저네임" value="ssar"
maxlength="20" required />
<input id="password" class="my_auth_form_box_input" type="password" name="userPassword" placeholder="비밀번호" value="1234"
maxlength="20" required />
<input id="same-password" class="my_auth_form_box_input" type="password" name="ConfirmPassword" placeholder="비밀번호 확인" value="1234"
maxlength="20" required/>
<input class="my_auth_form_box_input" type="email" name="userEmail" placeholder="이메일" maxlength="60" value="ssar@nate.com"
required />
<button type="submit" class="my_secondary_btn">회원가입</button>
</form>
<div class="my_auth_form_box_link">
<div><a href="/login-form">로그인</a></div>
<div><a href="/user/password-reset-form">비밀번호 찾기</a></div>
</div>공부를 할 때,
서버 ⇒ 인텔리 front = > ai
커서 ai에서 샘플링하면,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<form action="/join" onsubmit="return submitCheck()">
<button>회원가입</button>
</form>
<script>
function submitCheck(){
alert("안녕");
}
</script>
</body>
</html>
그리고 회원가입을 누르면 다음 페이지로 들어감.
return 값을 false로 주면,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<form action="/join" onsubmit="return submitCheck()">
<button>회원가입</button>
</form>
<script>
function submitCheck(){
alert("안녕");
return false;
}
</script>
</body>
</html>
확인 눌러도 다음 페이지로 가지 않음.
이걸 비밀번호체크에 적용하면,
⇒ 비밀번호가 같으면, 다음 창으로 넘어가고
⇒ 비밀번호가 같지 않으면, false로 다음 창으로 넘어가지 않게 하면 됨.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<form action="/join" onsubmit="return submitCheck()">
패스워드 : <input type-="text" id="password"> <br>
패스워드체크 : <input type-="text" id="same-password"> <br>
<button>회원가입</button>
</form>
<script>
let isSame = false;
function submitCheck(){
alert("회원가입 ㄱㄱ");
return isSame;
}
</script>
</body>
</html>값이 안 맞으면, 다음 창으로 넘어가지 않음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<form action="/join" onsubmit="return submitCheck()">
패스워드 : <input type-="text" id="password"> <br>
패스워드체크 : <input type-="text" id="same-password"> <br>
<button id="registerButton">회원가입</button>
</form>
<script>
// let isSame = false;
function checkPasswords() {
let password = $("#password").val();
let samePassword = $("#same-password").val();
if (password === samePassword) {
console.log("Passwords match");
return true;
} else {
console.log("Passwords don't match");
alert("비밀번호가 일치하지 않습니다.");
return false;
}
}
function submitCheck() {
return checkPasswords();
}
// 회원가입 버튼에 클릭 이벤트 리스너 추가
$("#registerButton").on('click', (e) => {
if (!submitCheck()) {
// 비밀번호가 일치하지 않으면 폼 제출을 막음
e.preventDefault();
}
});
</script>
</body>
</html>Share article
