바닐라 JS로 양식 유효성 검사 구현(초보자 친화적)-JS 튜토리얼-php.cn

바닐라 JS로 양식 유효성 검사 구현(초보자 친화적)

WBOY

풀어 주다： 2024-08-06 00:58:21

원래의

429명이 탐색했습니다.

Implementing Form Validation with Vanilla JS (Beginner-Friendly)

연습 연습: 양식 유효성 검사

목적

이름, 이메일, 비밀번호 입력란이 포함된 기본 양식을 만듭니다. 제출하기 전에 필드가 올바르게 채워졌는지 확인하려면 JavaScript 유효성 검사를 구현하세요. 이는 JS의 기본 양식 유효성 검사를 시작하기 위한 간단한 코드 실행 프로젝트입니다.

요구사항

HTML 양식: 이름, 이메일, 비밀번호를 입력하여 HTML 양식을 만듭니다.
CSS 스타일링: 기본 스타일을 추가하여 양식을 깔끔하고 사용자 친화적으로 만듭니다.
JavaScript 유효성 검사: JavaScript를 구현하여 양식 필드의 유효성을 검사합니다.

단계별 지침

1단계: HTML 구조 설정

새 HTML 파일 만들기
- index.html이라는 새 파일을 만듭니다.

HTML 상용구 추가

파일에 기본 HTML 상용구를 추가하세요.

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Form Validation</title>
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
     <form id="registrationForm">
         <h2>Registration Form</h2>
         <div>
             <label for="name">Name:</label>
             <input type="text" id="name" name="name">
             <span id="nameError" class="error"></span>
         </div>
         <div>
             <label for="email">Email:</label>
             <input type="email" id="email" name="email">
             <span id="emailError" class="error"></span>
         </div>
         <div>
             <label for="password">Password:</label>
             <input type="password" id="password" name="password">
             <span id="passwordError" class="error"></span>
         </div>
         <button type="submit">Register</button>
     </form>
     <script src="script.js"></script>
 </body>
 </html>

로그인 후 복사

양식 요소 추가
- 양식에 이름, 이메일, 비밀번호 필드가 포함되어 있는지 확인하세요. 각 필드에는 해당 오류 메시지 범위가 포함되어 있습니다.

2단계: 기본 CSS 스타일 추가

새 CSS 파일 만들기
- styles.css라는 새 파일을 만듭니다.

기본 스타일 추가

기본 스타일을 추가하여 양식을 깔끔하고 사용자 친화적으로 만듭니다.

 body {
     font-family: Arial, sans-serif;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     background-color: #f4f4f4;
     margin: 0;
 }

 form {
     background: #fff;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     max-width: 400px;
     width: 100%;
 }

 div {
     margin-bottom: 15px;
 }

 label {
     display: block;
     margin-bottom: 5px;
 }

 input {
     width: 100%;
     padding: 8px;
     box-sizing: border-box;
 }

 .error {
     color: red;
     font-size: 12px;
 }

 button {
     background-color: #007BFF;
     color: #fff;
     padding: 10px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
 }

 button:hover {
     background-color: #0056b3;
 }

로그인 후 복사

3단계: JavaScript 유효성 검사 구현

새 JavaScript 파일 만들기
- script.js라는 새 파일을 만듭니다.

양식에 이벤트 리스너 추가

양식 제출을 처리하려면 양식에 이벤트 리스너를 추가하세요.

 document.getElementById('registrationForm').addEventListener('submit', function(event) {
     event.preventDefault();
     validateForm();
 });

로그인 후 복사

검증 기능 생성

양식 필드의 유효성을 검사하는 함수를 추가합니다.

 function validateForm() {
     // Clear previous error messages
     document.getElementById('nameError').innerText = '';
     document.getElementById('emailError').innerText = '';
     document.getElementById('passwordError').innerText = '';

     // Get form values
     const name = document.getElementById('name').value;
     const email = document.getElementById('email').value;
     const password = document.getElementById('password').value;

     // Validation flags
     let isValid = true;

     // Validate name
     if (name.trim() === '') {
         document.getElementById('nameError').innerText = 'Name is required';
         isValid = false;
     }

     // Validate email
     if (email.trim() === '') {
         document.getElementById('emailError').innerText = 'Email is required';
         isValid = false;
     } else if (!validateEmail(email)) {
         document.getElementById('emailError').innerText = 'Email is not valid';
         isValid = false;
     }

     // Validate password
     if (password.trim() === '') {
         document.getElementById('passwordError').innerText = 'Password is required';
         isValid = false;
     } else if (password.length < 6) {
         document.getElementById('passwordError').innerText = 'Password must be at least 6 characters';
         isValid = false;
     }

     // If all fields are valid, submit the form (for demonstration, we'll just alert a message)
     if (isValid) {
         alert('Form submitted successfully!');
     }
 }

 // Email validation function
 function validateEmail(email) {
     const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     return re.test(String(email).toLowerCase());
 }

로그인 후 복사