Vue.js を使ってカスタムフォーム検証を実装する

はじめに

このプロジェクトでは、Vue.js を使ってカスタムフォームバリデータを実装する方法を学びます。カスタムフォームバリデータを使うと、ユーザーがフォームを送信する前に、フォームフィールドを検証し、データの妥当性を確認できます。

👀 プレビュー

Form validation demo animation

🎯 タスク

このプロジェクトで学ぶことは以下の通りです。

入力フィールドの値が変更されたときに、コンポーネントの v-model 値を更新する FormInput コンポーネントを実装する方法。
特定のルールに基づいてメールアドレスを検証する is_email 関数を実装する方法。
定義された検証ルールに基づいてフォームデータを検証する validateForm 関数を実装する方法。

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

Vue.js でカスタムフォームバリデータを作成する。
カスタム検証ルールを使ってフォームフィールドを検証する。
フォーム検証エラーを処理し、ユーザーに表示する。

プロジェクト構造を設定する

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了しましょう。

プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── components
│   ├── FormInput.js
│   └── FormValidator.js
├── css
├── index.html
├── js
│   └── util.js
└── lib
    └── vue.global.js

ここで：

index.html はメインページです。
css はプロジェクトのスタイルを格納するフォルダです。
lib はプロジェクトの依存関係を格納するフォルダです。
components/FormInput.js は input コンポーネントです。
components/FormValidator.js はフォームバリデータコンポーネントです。
js/util.js はプロジェクトで必要なユーティリティ関数です。

WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動で更新してページを表示します。

FormInput コンポーネントを実装する

このステップでは、入力フィールドの値が変更されたときに index.html 内のコンポーネントの v-model 値を更新するための FormInput コンポーネントをどのように実装するか学びます。

components ディレクトリにある FormInput.js ファイルを開きます。
FormInput コンポーネントの setup 関数の中で、目標 1 の TODO セクションを探します。
入力フィールド（form-input クラスを持つ）の値が変更されたときにコンポーネントの v-model 値を更新するイベントをトリガーするコードを実装します。
```
watch(inputValue, (newValue) => {
  emit("update:modelValue", newValue);
});
```
このコードは、watch 関数を使って inputValue リアクティブ変数の変更を監視します。値が変更されると、新しい値でイベントを発行して親コンポーネント内の v-model バインディングを更新します。
FormInput.js ファイルの変更を保存します。

is_email 関数を実装する

このステップでは、util.js ファイルに is_email 関数をどのように実装するか学びます。この関数はメールアドレスを検証します。

js ディレクトリにある util.js ファイルを開きます。
is_email 関数の中で、目標 2 の TODO セクションを探します。
以下の要件に基づいてメールアドレスを検証するロジックを実装します。
- メールアドレスは 6 文字以上 20 文字以下でなければなりません。
- メールアドレスは @ 記号で区切られたユーザー名部分とドメイン部分で構成されていなければなりません。
- ユーザー名部分は少なくとも 1 文字以上で、数字または文字を含むことができます。
- ドメイン部分は途中に . を含み、. の前の部分は少なくとも 1 文字以上で、. の後の部分は 2 文字以上 4 文字以下の文字でなければなりません。
以下は例となる実装です。
```
const is_email = (val) => {
  const emailRegex = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+.[a-zA-Z]{2,4}$/;
  return emailRegex.test(val);
};
```
util.js ファイルの変更を保存します。

validateForm 関数を実装する

このステップでは、FormValidator.js ファイルに validateForm 関数をどのように実装するか学びます。この関数はフォームデータを検証します。

components ディレクトリにある FormValidator.js ファイルを開きます。
validateForm 関数の中で、目標 3 の TODO セクションを探します。

提供された formRules オブジェクトに基づいてフォームデータを検証するロジックを実装します。検証は以下のルールに従う必要があります。

nickname フィールドが空の場合、キー "nickname" で errors オブジェクトにエラーメッセージを追加します。
email フィールドについて：

フィールドが空の場合、キー "email" で errors オブジェクトにエラーメッセージを追加します。
メールアドレスがルールに準拠せず、または正しい長さ範囲内でない場合、キー "email" で errors オブジェクトにエラーメッセージを追加します。

以下は例となる実装です。

const validateForm = () => {
  return new Promise((resolve, reject) => {
    errors.value = {}; // 前のエラーメッセージをクリア
    // ニックネームを検証
    try {
      props.rules.nickname.map((item) => {
        item?.validator(null, props.formData.nickname, (err) => {
          if (err) {
            throw "nickname|" + err.message;
          }
        });
      });
    } catch (e) {
      const parseErr = e.split("|"),
        errKey = parseErr[0],
        errValue = parseErr[1];
      errors.value[errKey] = errValue;
    }
    // メールアドレスを検証
    try {
      props.rules.email.map((item) => {
        if (item?.required) {
          if (props.formData.email == "") throw "email|" + item.message;
        }
        if (item?.type) {
          if (!validateByType(item.type, props.formData.email))
            throw "email|" + item.message;
          if (props.formData.email.length < 6) throw "email|" + item.message;
          if (props.formData.email.length > 20)
            throw "email|" + item.message;
        }
      });
    } catch (e) {
      const parseErr = e.split("|"),
        errKey = parseErr[0],
        errValue = parseErr[1];
      errors.value[errKey] = errValue;
    }
    if (hasErrors.value) {
      resolve(false); // エラーが存在するため、検証に失敗
    } else {
      resolve(true);
    }
    emit("valid", errors.value);
  });
};

FormValidator.js ファイルの変更を保存します。

おめでとうございます！これでカスタムフォームバリデータの実装が完了しました。これでプロジェクトを実行してフォームとやり取りすることでアプリケーションをテストできます。完成した結果は以下の通りです。

Completed Effect

まとめ

おめでとうございます！このプロジェクトを完了しました。技術力を向上させるために、LabEx でさらに多くの実験を行って練習してください。

Vue.js を使ったカスタムフォーム検証