<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사용자 등록</title>
<!-- css 파일을 불러오는 코드 -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<!-- 내가 만든 CSS 파일-->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
</style>
<!-- javascript 작성 공간 -->
<script>
function checkMemberId() {
var input = document.querySelector("[name=memberId]");
var regex = /^[a-z0-9]{5,20}$/;
input.classList.remove("success", "fail");
if(regex.test(input.value)) {
input.classList.add("success");
return true;
}
else {
input.classList.add("fail");
return false;
}
}
function checkMemberPw() {
var input = document.querySelector("[name=memberPw]");
var regex = /^[A-Za-z0-9!@#$]{8,16}$/;
input.classList.remove("success", "fail");
if(regex.test(input.value)) {
input.classList.add("success");
return true;
}
else {
input.classList.add("fail");
return false;
}
}
//폼 검사는 기존 검사 함수를 불러 결과를 받아 반환하도록 구현
function checkForm() {
//return checkMemberId() && checkMemberPw();
var result1 = checkMemberId();
var result2 = checkMemberPw();
return result1 && result2;
}
</script>
</head>
<body>
<div class="container w-500">
<div class="row">
<h1>사용자 등록</h1>
</div>
<form autocomplete="off" onsubmit="return checkForm()">
<div class="row left">
<label>아이디</label>
<input name="memberId" placeholder="영문,숫자 5~20자"
class="form-input w-100" onblur="checkMemberId();">
<div class="success-feedback">멋진 아이디입니다!</div>
<div class="fail-feedback">아이디가 형식에 맞지 않아요</div>
</div>
<div class="row left">
<label>비밀번호</label>
<input name="memberPw" placeholder="영문,숫자,특수문자 포함 8~16자"
class="form-input w-100" onblur="checkMemberPw();">
<div class="success-feedback">올바른 비밀번호 형식입니다</div>
<div class="fail-feedback">잘못된 비밀번호 형식입니다</div>
</div>
<div class="row">
<button type="submit" class="btn btn-positive w-100">
<i class="fa-solid fa-plus"></i>
등록하기
</button>
</div>
</form>
</div>
</body>
</html>
'Javascript' 카테고리의 다른 글
| 자바스크립트 내장 객체 (0) | 2023.09.18 |
|---|---|
| 게시글 작성 (0) | 2023.09.15 |
| 기본 이벤트 제어 (0) | 2023.09.13 |
| 회원가입 (0) | 2023.09.12 |
| 정규표현식 (0) | 2023.09.11 |