驗證電子郵件地址格式和網域庫以在 Next.js 中使用

要驗證 Next.js 應用程式中的電子郵件地址格式和網域，您可以利用多個提供強大功能的程式庫。以下是您可以考慮的前五個函式庫：

Next.js 的 4 個最佳電子郵件驗證庫

• 是的

  • 說明： Yup 是一個模式驗證函式庫，可以與 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 Hook Form（是的）

  • 描述：React Hook Form 是另一個流行的函式庫，用於在 React 應用程式中管理表單。它與 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);
  };
  
  

  {errors.email &&

  {errors.email.message}

  } Submit

這些程式庫提供了多種選項，用於在 Next.js 應用程式中驗證電子郵件地址，確保使用者輸入的格式正確並減少資料提交期間出現錯誤的可能性。

---

要在 Next.js 應用程式中使用 Zod 程式庫驗證電子郵件地址，您可以建立一個架構來檢查有效的電子郵件格式。以下是如何有效地做到這一點：

使用 Zod 進行電子郵件驗證

1.安裝 Zod

首先，請確保您的專案中安裝了 Zod。您可以透過執行以下命令來做到這一點：

npm install zod

2.導入Zod

將 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中文網其他相關文章！