<script>
document.querySelector('form').addEventListener('submit', function(event)
{
const password = document.getElementById('userPwd').value;
const checkPassword = document.getElementById('checkPwd').value;
if (password !== checkPassword) {
alert('비밀번호가 일치하지 않습니다.');
event.preventDefault(); // 폼 제출 방지
}
});
</script>
event.preventDefault(); 를 사용하는 이유
폼 제출 시 새로고침을 방지한다.
링크 클릭 시 기본 이동을 방지한다.
실습 예제 :
function pwdCheck() {
const pwd = document.querySelector("#updatePwdModal input[name=newPassword]").value;
const pwdCheck = document.querySelector("#updatePwdModal input[name=newPasswordCheck]").value;
if (pwd != pwdCheck) {
alert("비밀번호와 비밀번호 확인 입력값이 다릅니다.");
return false;
}
}
false를 반환하는 이유 :
폼 제출을 방지합니다 비밀번호와 비밀번호 확인이 일치하지 않을 경우
사용자가 폼을 제출하지 못 하도록 합니다.
아이디 중복체크 예시
쿼리문
<select id="idCheck" resultType="_int">
SELECT COUNT(*) COUNT
FROM MEMBER
WHERE MEM_ID = #{memberId}
</select>
<input type="text" name="memberId" placeholder="아이디*" required>
<button type="button" onclick="idCheck();">중복체크</button>
function idCheck(){
const idEle = $("input[name='memberId']");
$.ajax({
url: 'idCheck.me',
type: 'get',
data: { memberId: idEle.val() },
success: function(result){
if(result=='false'){
alert("이미 사용중인 아이디입니다.");
idEle.focus();
} else if(result=='true'){
alert("사용 가능한 아이디입니다.");
$("form button[type=submit]").prop("disabled", false);
}
},
ERROR: function(err){
console.log(err);
}
});
}
function idCheck() {
const idEle = $("input[name='memberId']");
const url = 'idCheck.me';
if (idEle.val().trim() === "") {
alert("아이디를 입력해주세요.");
idEle.focus();
return;
}
$.ajax({
url: url,
type: 'get',
data: { memberId: idEle.val() },
success: function(result) {
if (!result) {
alert("이미 사용중인 아이디입니다.");
idEle.focus();
} else {
alert("사용 가능한 아이디입니다.");
$("form button[type=submit]").prop("disabled", false);
}
},
error: function(err) {
console.log(err);
}
});
}
button: 클릭 시 폼을 제출하거나 리셋하지 않는다.
JavaScript를 사용하여 특정 기능을 수행할 때 사용이 된다.
@GetMapping("/member/idCheck")
public ResponseEntity<String> checkMemberId(@RequestParam String memberId) {
int count = memberService.idCheck(memberId);
if (count > 0) { return ResponseEntity.ok("false"); // 중복된 아이디
} else {
return ResponseEntity.ok("true"); // 사용 가능한 아이디
}
}
}
@RestController public class MemberController {
@GetMapping("/idCheck") // ID 체크를 위한 GET 요청 처리
public ResponseEntity<String> checkId(@RequestParam String memberId) {
int count = new MemberService().idCheck(memberId);
if (count > 0) {
return ResponseEntity.ok("false"); // 중복된 아이디
} else {
return ResponseEntity.ok("true"); // 사용 가능한 아이디 }
} }