検索

ホームページ >ウェブフロントエンド >jsチュートリアル >Vanilla JS を使用したフォーム検証の実装 (初心者向け)

Vanilla JS を使用したフォーム検証の実装 (初心者向け)

WBOY
WBOYオリジナル
2024-08-06 00:58:21430ブラウズ

Implementing Form Validation with Vanilla JS (Beginner-Friendly)

演習: フォームの検証

客観的

名前、電子メール、パスワードのフィールドを含む基本的なフォームを作成します。 JavaScript 検証を実装して、送信前にフィールドが正しく入力されていることを確認します。これは、JS での基本的なフォーム検証を開始することを目的とした単純なコード付きプロジェクトです。

要件

  1. HTML フォーム: 名前、電子メール、パスワードを入力する HTML フォームを作成します。
  2. CSS スタイリング: 基本的なスタイルを追加して、フォームをすっきりと使いやすいものにします。
  3. JavaScript 検証: JavaScript を実装してフォームフィールドを検証します。

ステップバイステップの説明

ステップ 1: HTML 構造をセットアップする

  1. 新しい HTML ファイルを作成します

    • index.html という名前の新しいファイルを作成します。

  2. 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>

  3. フォーム要素を追加します

    • フォームに名前、電子メール、パスワードのフィールドが含まれていることを確認し、それぞれに対応するエラー メッセージ範囲を含めてください。

ステップ 2: 基本的な CSS スタイルを追加する

  1. 新しい CSS ファイルを作成する

    • styles.css という名前の新しいファイルを作成します。

  2. 基本スタイルの追加

    • フォームをきれいで使いやすいものにするために、基本的なスタイルを追加します。 
     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 検証を実装する

  1. 新しい JavaScript ファイルを作成します

    • script.js という名前の新しいファイルを作成します。

  2. フォームにイベント リスナーを追加

    • フォームの送信を処理するためにフォームにイベント リスナーを追加します。 
     document.getElementById('registrationForm').addEventListener('submit', function(event) {
     event.preventDefault();
     validateForm();
 });

  3. 検証関数の作成

    • フォームフィールドを検証する関数を追加します。 
     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: フォームをテストする

  1. ブラウザでindex.htmlを開きます
    • Web ブラウザで HTML ファイルを開いてフォーム検証をテストします。
    • 検証が期待どおりに機能することを確認するために、別の入力を使用してフォームを送信してみてください。

自由にコードをいじって創造性を表現してください。

コーディングを楽しんでください!

以上がVanilla JS を使用したフォーム検証の実装 (初心者向け)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript css html express for try Error Event JS function this
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：コーディングの衰退：コードを書くWebアプリ開発者が減少[調査結果]次の記事：コーディングの衰退：コードを書くWebアプリ開発者が減少[調査結果]

関連記事

続きを見る