비밀번호 정규식
'(?=)' '?=' 뒤의 문자열이 있어야 하지만 결과값에는 포함되지 않음.
'(?!)' 는 반대 상황
JQuery
JQuery : 일종의 JavaScript Library, 확장 JavaScript 라고 해도 무방
JQuery 다운로드
google 검색 - jquery 사이트 - download - 링크 우클릭 - 다른이름으로 링크 저장
(그냥 링크를 클릭하게되면 중간의 사진처럼 source 가 열린다)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.7.1.min.js"></script>
<!-- <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> -->
</head>
<body>
<h2>클릭하면 사라집니다.</h2>
<script>
$(document).ready(function(){
$("h2").click(function(){
$(this).hide();
});
});
</script>
</body>
</html>
클릭하면 사라짐.
<!-- <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> -->는 CDN ( 네트워크를 통해 연결 )
document 는 생략 가능, 여기서 this 는 h2 태그를 의미
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="slidedown">slidedown</button>
<button id="slideup">slideup</button>
<br>
<img src="../img/apple2.png" alt="" id="apple" width="120" height="100"
style="display: none; position: relative">
<script>
$(document).ready(function(){
$("#slidedown").click(function(){
$("#apple").slideDown(3000);
});
$("#slideup").click(function(){
$("#apple").slideUp(3000);
});
});
</script>
</body>
</html>
오늘 HTML 은 여기서 끝
오늘 깃은 Branch 복습
미션
join.html 과 jobkorea.html 만들기회원가입
ID
PW
3개 정규식을 통과하면
jobkorea.html 로 화면 이동 구현
jobkorea.html 예시 화면
메일로 제출
메일제목 : 정규식가입_홍길동
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Join</title>
</head>
<body>
<!-- 회원가입 폼 만들기 -->
<!-- id, pw, email -->
<!-- 정규식으로 3개가 다 통과하는지 아닌지 메세지로 출력 -->
<!-- id : 5~6자리 -->
<!-- pw : 8~10자리 -->
<form action="jobkorea.html" onsubmit="return signUp(document.getElementById('id'),
document.getElementById('pw'),document.getElementById('email'));">
<h1>Join Form</h1>
ID : <input type="text" id="id" size="10"> <br>
[영문 대.소문자 / 숫자 조합 5~6자리] <br><br>
PW : <input type="text" id="pw" size="10"> <br>
[영어 대.소문자 / 숫자 / 특수문자 (!@#$%^*+=-) 조합 8~10자리]<br><br>
E-Mail : <input type="text" id="email" size="20"> <br><br>
<center>
<input type="submit" value="Join" style="width: 100px; height: 50px; font-size: 30px;">
</center>
</form>
<script>
function signUp(elem1,elem2,elem3){
var exp1=/^[0-9a-zA-Z]{5,6}$/;
var exp2=/^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,10}$/;
var exp3=/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/;
var isId=exp1.test(elem1.value);
var isPw=exp2.test(elem2.value);
var isEmail=exp3.test(elem3.value);
var isSubmit=false;
if(isId && isPw && isEmail){
alert("회원가입 완료!");
isSubmit=true;
}else{
alert("ID,PW,E-Mail 중 틀린 곳을 확인하세요.");
isSubmit=false;
}
return isSubmit;
}
</script>
</body>
</html>join.html 은 완성
나머지는
내일까지 진행 예정
개발자 준비의 준비준비중..