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

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

Barbara Streisand

發布： 2025-01-07 20:37:42

原創

313 人瀏覽過

Validate Email Address Format and Domain Libraries for Use in 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);
};

<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

將 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!');
}

登入後複製