집 > 기사 > 웹 프론트엔드 > 바닐라 JS로 양식 유효성 검사 구현(초보자 친화적)

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

WBOY원래의: 2024-08-06 00:58:21332검색

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());
 }

4단계: 양식 테스트

브라우저에서 index.html 열기
- 웹 브라우저에서 HTML 파일을 열어 양식 유효성 검사를 테스트하세요.
- 검증이 예상대로 작동하는지 확인하려면 다양한 입력을 사용하여 양식을 제출해 보세요.

코드를 자유롭게 활용하고 창의력을 표현해 보세요.

즐거운 코딩하세요!

위 내용은 바닐라 JS로 양식 유효성 검사 구현(초보자 친화적)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript css html express for try Error Event JS function this

성명：

이전 기사：코딩 감소: 웹 앱 개발자의 코드 작성 감소 [연구 결과]다음 기사：코딩 감소: 웹 앱 개발자의 코드 작성 감소 [연구 결과]