<div class="timeline">
<form id="join-form" action="/auth/join" method="post">
<div class="input-group">
<label for="join-email">이메일</label>
<input id="join-email" type="email" name="email"></div>
<p class="email-content"></p>
<div class="input-group">
<label for="join-nick">닉네임</label>
<input id="join-nick" type="text" name="nick"></div>
<div class="input-group">
<label for="join-password">비밀번호</label>
<input id="join-password" type="password" name="password">
</div>
<div class="input-group">
<label for="join-password2">비밀번호 확인</label>
<input id="join-password2" type="password" name="password2">
<p class="password-content"></p>
</div>
<button id="join-btn" type="submit" class="btn">회원가입</button>
</form>
</div>
{% endblock %}
{% block script %}
<script>
window.onload = () => {
if (new URL(location.href).searchParams.get('error')) {
alert('이미 존재하는 이메일입니다.');
}
const input = document.querySelector('#join-email');
const p = document.querySelector('.email-content');
const isEmail = (value) => {
return (value.indexOf('@') > 1)
&& (value.split('@')[1].indexOf('.') > 1)
}
let value;
input.addEventListener('keyup', (event) => {
value = event.currentTarget.value;
if (isEmail(value)) {
p.style.color = 'green';
p.textContent = `이메일 형식입니다`;
} else {
p.style.color = 'red';
p.textContent = `이메일 형식이 아닙니다`;
}
});
const isPassword = (value1, value2) => {
return value1 === value2;
}
const password1 = document.getElementById('join-password').value;
let password2;
const pwd2 = document.querySelector('#join-password2');
const p2 = document.querySelector('.password-content');
pwd2.addEventListener('keyup', (event) => {
password2 = event.currentTarget.value;
if(password1 !== password2){
p2.style.color = 'red';
p2.textContent = `비밀번호가 일치하지 않습니다`;
} else {
p2.style.color = 'green';
p2.textContent = `비밀번호가 일치합니다`;
}
});
const btn = document.querySelector('#join-btn');
let status = ()=>{
return isEmail(value) && isPassword(password1, password2);
}
btn.addEventListener('click',(event)=>{
if(!status()){
event.preventDefault();
alert(`모든 항목을 제대로 입력해주십시오`);
}
})
};
</script>
{% endblock %}
이메일이 이메일 형식인지 확인하고, 비밀번호가 일치하는지 확인을 하는 작업을 추가하려고 코드를 작성했는데, 이메일의 경우에는 이메일 형식이다 아니다가 정상적으로 잘 작동하는 반면에, 비밀번호의 경우에는 같은 비밀번호를 몇 번을 입력해도 계속해서 비밀번호가 일치하지 않는다는 결과가 출력됩니다. 혹시 이유를 알 수 있을까요 ㅠㅠ
