Next.js で使用する電子メール アドレス形式とドメイン ライブラリを検証する

Next.js アプリケーションで電子メール アドレスの形式とドメインを検証するには、堅牢な機能を提供するいくつかのライブラリを利用できます。検討できる上位 5 つのライブラリは次のとおりです:

Next.js のトップ 4 メール検証ライブラリ

• そうだね

  • 説明: はい、Formik のようなフォーム管理ライブラリと連携して動作するスキーマ検証ライブラリです。これにより、電子メール形式を簡単に検証でき、React アプリケーションにシームレスに統合できます。
  • 使用例:

  import * as Yup from 'yup';
  
  const validationSchema = Yup.object().shape({
    email: Yup.string()
      .email('Invalid email format')
      .required('Email is required'),
  });
  

  ログイン後にコピー

  ログイン後にコピー

• Validator.js

  • 説明: 電子メール アドレスを含むさまざまな種類の入力を検証するためのシンプルかつ効果的な方法を提供する軽量ライブラリです。これには、有効な電子メール形式をチェックする isEmail() メソッドが含まれています。
  • 使用例:

  const validator = require('validator');
  
  if (validator.isEmail(emailInput)) {
    console.log('Valid email!');
  } else {
    console.log('Invalid email!');
  }
  

  ログイン後にコピー

  ログイン後にコピー

• メール検証

  • 説明: このライブラリは、電子メール アドレスの形式の検証に特に重点を置いています。使い方は簡単で、迅速な検証が可能です。
  • 使用例:

  const EmailValidator = require('email-validator');
  
  const isValid = EmailValidator.validate('test@example.com'); // true
  

  ログイン後にコピー

• React フックフォーム (Yup 付き)

  • 説明: React Hook Form は、React アプリケーションでフォームを管理するためのもう 1 つの人気のあるライブラリです。スキーマベースの検証では Yup とうまく連携するため、メールの検証に最適です。
  • 使用例:

  import { useForm } from 'react-hook-form';
  import * as Yup from 'yup';
  import { yupResolver } from '@hookform/resolvers/yup';
  
  const schema = Yup.object().shape({
    email: Yup.string().email().required(),
  });
  
  const { register, handleSubmit, errors } = useForm({
    resolver: yupResolver(schema),
  });
  
  const onSubmit = data => {
    console.log(data);
  };
  
  <form onSubmit={handleSubmit(onSubmit)}>
    <input name="email" ref={register} />
    {errors.email && <p>{errors.email.message}</p>}
    <button type="submit">Submit</button>
  </form>
  

  ログイン後にコピー

これらのライブラリは、Next.js アプリケーションで電子メール アドレスを検証するためのさまざまなオプションを提供し、ユーザー入力が正しい形式であることを確認し、データ送信時のエラーの可能性を減らします。

Next.js アプリケーションで Zod ライブラリを使用して電子メール アドレスを検証するには、有効な電子メール形式をチェックするスキーマを作成できます。効果的に行う方法は次のとおりです:

Zod によるメール検証

1. Zod をインストール

まず、プロジェクトに Zod がインストールされていることを確認します。これを実行するには:

npm install zod

2.ゾッドをインポート

検証を実行するファイルに Zod をインポートします:

import { z } from 'zod';

3.電子メール検証スキーマを作成する

Zod の組み込みメソッドを使用して、電子メール形式を検証するスキーマを定義できます。電子メール検証スキーマを作成する方法の例を次に示します:

const emailSchema = z.string().email({ message: "Invalid email address" });

このスキーマは、入力が文字列であるかどうか、および標準の電子メール形式に準拠しているかどうかをチェックします。

4.メールアドレスを検証する

電子メール アドレスを検証するには、Zod が提供する解析メソッドを使用できます。実装方法は次のとおりです:

import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  email: Yup.string()
    .email('Invalid email format')
    .required('Email is required'),
});

5.非同期検証の使用 (オプション)

電子メールがデータベースに存在するかどうかの確認など、追加のチェックを実行したい場合は、非同期検証の絞り込みメソッドを使用できます。基本的な例を次に示します:

const validator = require('validator');

if (validator.isEmail(emailInput)) {
  console.log('Valid email!');
} else {
  console.log('Invalid email!');
}

6.フォームとの統合

Next.js アプリケーションでフォームを使用している場合は、このスキーマを React Hook Form や Formik などのフォーム処理ライブラリと統合して、シームレスな検証とエラー処理を行うことができます。

これらの手順に従うことで、Zod を使用して Next.js アプリケーションの電子メール アドレスを効果的に検証し、ユーザー入力が正しい形式であり、アプリケーションの要件を満たしていることを確認できます。
10 日以内に MVP を構築したいですか?以下にコメントして今すぐご連絡ください。

以上がNext.js で使用する電子メール アドレス形式とドメイン ライブラリを検証するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。