더보기
<!--
1. 아이디, 비밀번호, 이름, 성별, 이메일 주소를 입력하여 회원가입이 가능하도록 화면을 구성하고
회원가입 버튼을 누를 때, 입력한 아이디값이 알림창으로 출력되게 코드를 작성하세요.
단, 페이지가 이동하면 안됨
2. 회원가입 버튼을 눌렀을 때, 아이디 값이 입력되지 않았으면, 아이디를 입력하세요라고 출력하는 코드로 수정
3. 아이디 입력창 밑에 아이디를 입력하세요라고 출력하는 코드로 수정
4. 아이디가 정규표현식에 맞지 않으면 5~20자의 영문 소문자, 숫자와 특수기호(_),(-)만 사용가능합니다. 라고
출력하도록 코드를 수정, 아이디는 영문 소문자, 숫자, _, -만 사용가능 5~8자
5. 아이디값이 변경되었을 때, 아이디가 입력되지 않으면 아이디를 입력하세요라고 출력하고
입력된 아이디가 정규표현식에 맞지않으면 (5~20자의 영문 소문자, 숫자와 특수기호(_),(-)만 사용가능합니다.) 출력
-->
<title>회원가입</title>
<script src="../JS/jquery.min.js"></script>
<script>
var idRegex= /^[a-z0-9_-]{5,20}$/;
var emptyMsg= '필수정보입니다.';
var idRegexMsg= '5~20자의 영문 소문자, 숫자와 특수기호(_),(-)만 사용가능합니다.';
var pwRegex= /^[a-z0-9A-Z~!@#$%&*]{8,16}$/;
var pwRegexMsg= '8~16자의 영문 대/소문자, 숫자와 특수문자를 사용하세요.';
$(function(){
$('button[type=submit]').click(function(){
var id= $('input[name=id]').val();
var str= check(id, idRegex, emptyMsg, idRegexMsg);
$('#id-error').text(str);
var pw= $('input[name=pw]').val();
str=check(pw, pwRegex,emptyMsg, pwRegexMsg);
$('#pw-error').text(str);
return false;
})
$('input[name=id]').change(function(){
var id=$('input[name=id]').val();
var str= check(id, idRegex, emptyMsg, idRegexMsg);
$('#id-error').text(str);
})
$('input[name=pw]').change(function(){
var pw=$('input[name=pw]').val();
var str= check(pw, pwRegex, emptyMsg, pwRegexMsg);
$('#pw-error').text(str);
})
})
function check(str, regex, emptyMsg, regexMsg){
if(str==''){
return emptyMsg;
}else if(!idRegex.test(str)){
return regexMsg;
}else{
return '';
}
}
</script>
</head>
<body>
<form action="">
<input type="id" name="id" placeholder="아이디"> <br>
<div id="id-error" style="color: red;"></div> <!-- span은 inline이고 div는 block이라서 -->
<input type="password" name="pw" placeholder="비밀번호"> <br>
<div id="pw-error" style="color: red;"></div>
<input type="text" name="name" placeholder="이름"> <br>
<label><input type="radio" name="gender"> 남성 </label>
<label><input type="radio" name="gender"> 여성 </label><br>
<input type="email" name="email" placeholder="이메일"> <br>
<button type="submit">회원가입</button>
</form>
</body>'괴발개발 > Javascript+JQuery' 카테고리의 다른 글
| JQ_요소의 속성정보 가져오기(attr), 설정하기(prop) (0) | 2021.06.23 |
|---|---|
| JQ_이메일주소창 만들기 (0) | 2021.06.23 |
| JQ_요소의 정보를 가져오고(get) 설정하는(set) (0) | 2021.06.22 |
| JQ_chaining(체이닝기법) (0) | 2021.06.22 |
| JQ_더보기기능 (0) | 2021.06.22 |