要驗(yàn)證 Next.js 應(yīng)用程式中的電子郵件地址格式和網(wǎng)域，您可以利用多個(gè)提供強(qiáng)大功能的程式庫。以下是您可以考慮的前五個(gè)函式庫：

Next.js 的 4 個(gè)最佳電子郵件驗(yàn)證庫

• 是的

  • 說明： Yup 是一個(gè)模式驗(yàn)證函式庫，可以與 Formik 等表單管理函式庫配合良好。它可以輕鬆驗(yàn)證電子郵件格式，並且可以無縫整合到 React 應(yīng)用程式中。
  • 使用範(fàn)例：

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

• Validator.js

  • 描述：一個(gè)輕量級(jí)程式庫，提供了一種簡單有效的方法來驗(yàn)證各種類型的輸入，包括電子郵件地址。它包括一個(gè) isEmail() 方法，用於檢查有效的電子郵件格式。
  • 使用範(fàn)例：

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

• 電子郵件驗(yàn)證器

  • 說明：此程式庫專門用於驗(yàn)證電子郵件地址的格式。它使用簡單並提供快速驗(yàn)證。
  • 使用範(fàn)例：

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

• React Hook Form（是的）

  • 描述：React Hook Form 是另一個(gè)流行的函式庫，用於在 React 應(yīng)用程式中管理表單。它與 Yup 很好地配合進(jìn)行基於模式的驗(yàn)證，使其成為驗(yàn)證電子郵件的絕佳選擇。
  • 使用範(fàn)例：

  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>
  

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

要在 Next.js 應(yīng)用程式中使用 Zod 程式庫驗(yàn)證電子郵件地址，您可以建立一個(gè)架構(gòu)來檢查有效的電子郵件格式。以下是如何有效地做到這一點(diǎn)：

使用 Zod 進(jìn)行電子郵件驗(yàn)證

1.安裝 Zod

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

npm install zod

2.導(dǎo)入Zod

將 Zod 匯入到要執(zhí)行驗(yàn)證的檔案中：

import { z } from 'zod';

3.建立電子郵件驗(yàn)證架構(gòu)

您可以使用 Zod 的內(nèi)建方法定義驗(yàn)證電子郵件格式的模式。以下是如何建立電子郵件驗(yàn)證架構(gòu)的範(fàn)例：

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

此架構(gòu)將檢查輸入是否為字串並符合標(biāo)準(zhǔn)電子郵件格式。

4.驗(yàn)證電子郵件地址

要驗(yàn)證電子郵件地址，您可以使用 Zod 提供的解析方法。實(shí)作方法如下：

import * as Yup from 'yup';

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

5.使用非同步驗(yàn)證（可選）

如果您想執(zhí)行額外的檢查，例如驗(yàn)證資料庫中是否存在電子郵件，您可以使用細(xì)化方法進(jìn)行非同步驗(yàn)證。這是一個(gè)基本範(fàn)例：

const validator = require('validator');

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

6.與表單整合

如果您在 Next.js 應(yīng)用程式中使用表單，則可以將此架構(gòu)與 React Hook Form 或 Formik 等表單處理庫集成，以實(shí)現(xiàn)無縫驗(yàn)證和錯(cuò)誤處理。

透過執(zhí)行這些步驟，您可以使用 Zod 有效驗(yàn)證 Next.js 應(yīng)用程式中的電子郵件地址，確保使用者輸入的格式正確並滿足您的應(yīng)用程式的要求。
想要在 10 天內(nèi)打造 MVP？現(xiàn)在就透過下面的評(píng)論與我們聯(lián)絡(luò)。

以上是驗(yàn)證電子郵件地址格式和網(wǎng)域庫以在 Next.js 中使用的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！