JQUERY/예제들
회원가입 정규표현식 시험 예제
나이많은 초보
2022. 9. 29. 16:56
<!-- 1. 폼 회원가입에서 회원가입 버튼을 클릭하면 result.html로 이동한다.
2. 아이디, 패스워드, 패스워드확인, 이름, 이메일 모든 항목은 반드시 입력해야 한다.
3. 아이디는 라벨을 클릭해도 해당 입력 상자로 포커스 이동한다.
4. 취소 버튼을 이용해서 입력 상자를 초기화 한다.
5. 아이디는 입력시 첫글자는 대문자이고 나머지 글자는 영문자, 숫자로 4글자 이상만 가능하다.
6. 아이디 입력 후 포커스가 이동할 경우에 조건 체크 한다.
7. 조건 체크에 만족하지 않으면 '4글자이상, 첫글자는 대문자이고 영문자, 숫자만 가능" 이라는 대화 상자가 나타난다.
8. 입력한 아이디 값도 삭제한다.
9. 패스워드 입력 하지 않고 패스워드확인을 입력한 경우 "패스워드를 입력하세요"라는 대화 상자가 나타나고
패스워드확인 값 삭제하고 패스워드 입력 상자로 포커스 이동한다.
패스워드 입력창 옆에 패스워드와 패스워드확인이 일치하면 '패스워드가 일치합니다'라는 문자를 초록색 진하게 출력하고,
일치하지 않으면 '패스워드가 일치하지 않습니다'를 빨간색으로 진하게 출력한다.
10. 성별입력은 회원가입 버튼을 클릭시 남 또는 여 radio 버튼 선택여부 확인한다.
성별입력을 선택하지 않은 경우 "성별을 선택하세요"라는 메시지 출력하고 submit 이벤트 발생하지 않는다. -->
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function(){
$('#userId').blur(function(){
var value=$('#userId').val().trim();
var reg=/^[A-Z][A-Za-z0-9]{3,}/;
if(!reg.test(value))
{
alert("4글자이상, 첫글자는 대문자이고, 영문자, 숫자만 가능");
$('#userId').val('');
}
});
$('#check_pw').keyup(function(){
var pw1=$('#password').val().trim();
if(pw1==""){
alert("패스워드를 입력하세요");
$('#check_pw').val('');
$('#password').focus();
}
var pw2=$('#check_pw').val().trim();
if(pw1.length!=0 && pw2.length!=0){
if(pw1==pw2)
{
$('#out').html("패스워드가 일치합니다.");
$('#out').css({'color':'green','font-weight':'bolder'});
}
else{
$('#out').html("패스워드가 일치하지 않습니다.");
$('#out').css({'color':'red','font-weight':'bolder'});
}
}
});
$("form").submit(function(){
var rcheck= $(".gender1:checked").length;
if(rcheck==0){
alert("성별을 선택하세요");
return false;
}
})
});
</script>
<style>
form ul{list-style: none;}
form ul>li{text-align:right;width:100px;
display: inline-block; margin-right:5px}
form li:last-child{
width:300px;
text-align: center;
}
</style>
</head>
<body>
<form action="result.html" method="post">
<fieldset>
<legend>회원가입</legend>
<ul>
<li><label for="userId">아이디</label></li>
<li><input type="text" name='userId' id="userId" size='10' required></li><br>
<li><label for="password">패스워드</label></li>
<li><input type="password" name='password' id="password" size='10' required></li><span id="out"></span>
<br>
<li><label for='check_pw'>패스워드확인</label></li>
<li><input type="password" id="check_pw" size='10' required></li><br>
<li><label for='userName'>이름</label></li>
<li><input type="text" name='userName' id="userName" size='10' required></li><br>
<li>성별</li>
<li><label>남<input type="radio" name='gender' class="gender1" value="M"></label>
<label>여<input type="radio" name='gender' class="gender1" value="F"></label></li>
<br>
<li><label for='email'>이메일</label></li>
<li><input type="email" name='email' id="email" size='10' required></li><br><br>
<li>
<input type="submit" value="회원가입">
<input type="reset" value="취소">
</li>
</ul>
</fieldset>
</form>