HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>계정 만들기</title> <link rel="stylesheet" href="styles.css"> </head> <body> <form id="registrationForm"> <label for="email">이메일 *</label> <input type="email" id="email" name="email" required> <label for="password">비밀번호 *</label> <input type="password" id="password" name="password" required> <label for="username">이름 *</label> <input type="text" id="username" name="username" required> <label for="age">성 *</label> <input type="text" id="age" name="age" required> <button type="submit">계정 만들기</button> </form> <script src="script.js"></script> </body> </html> |
CSS (styles.css)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
body { font-family: 'Arial', sans-serif; } form { width: 300px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } input[type=email], input[type=password], input[type=text] { width: calc(100% - 22px); padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 5px; } button[type=submit] { width: 100%; padding: 10px; border: none; border-radius: 5px; background-color: #5cb85c; color: white; cursor: pointer; } button[type=submit]:hover { background-color: #4cae4c; } |
JavaScript (script.js)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
document.getElementById('registrationForm').addEventListener('submit', function(event) { event.preventDefault(); var email = document.getElementById('email').value; var password = document.getElementById('password').value; var username = document.getElementById('username').value; var errorMessage = validatePassword(password, username); if (errorMessage !== '비밀번호가 모든 조건을 충족합니다.') { alert(errorMessage); } else { // 폼 제출 처리 // 예: 서버에 데이터를 보내거나, 다른 페이지로 이동하는 등의 처리 alert('계정 생성이 완료되었습니다.'); } }); function validatePassword(password, username) { if (password.length < 12 || password.length > 60) { return '비밀번호는 12자 이상, 60자 이하이어야 합니다.'; } if (!/[a-z]/.test(password)) { return '비밀번호에는 최소 한 개의 소문자가 포함되어야 합니다.'; } if (!/[A-Z]/.test(password)) { return '비밀번호에는 최소 한 개의 대문자가 포함되어야 합니다.'; } if (!/[0-9]/.test(password)) { return '비밀번호에는 최소 한 개의 숫자가 포함되어야 합니다.'; } if (!/[!@#\$%\^\&*\)\(+=._-]/.test(password)) { return '비밀번호에는 최소 한 개의 특수 문자가 포함되어야 합니다.'; } if (password |