<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<style>
</style>
</head>
<body>
<form action="">
<div>
<label>아이디
<input type="text" id="userid" name = "userid">
</label>
</div>
<div>
<label>비밀번호
<input type="password" id="userpw" name = "userid">
</label>
</div>
<div>
<label>비밀번호확인
<input type="password" id="userpwchk" name = "userid">
</label>
</div>
</form>
</body>
<script>
//userid 인풋에 포커스를 바로 생성하여 즉시 입력할 수 있는 상태로 만듬
// $("#userid").focus();
// $("#userid").on('focus',()=>{
// $("#userid").val("");
// });
$("#userid").on('blur',()=>{
if($("#userid").val().length<8){
alert("아이디는 8자 이상으로 입력하세요");
setTimeout(function() {
$("#userid").focus();
}, 20);
}
});
//비밀번호 확인 Blur 이벤트 매핑
$("#userpwchk").on('blur',()=>{
if($("#userpw").val()!==$("#userpwchk").val()){
const htmlstr = `<p>비밀번호와 비밀번호 확인이 다릅니다.</p>`;
$("#userpwchk").after(htmlstr);
$("#userpw").focus();
} else{
$("p").remove();
}
});
////이거 쓸때마다 계쏙 써짐
</script>
</html>
댓글 영역