Sahkan Format Alamat E-mel dan Perpustakaan Domain untuk Digunakan dalam Next.js

Untuk mengesahkan format alamat e-mel dan domain dalam aplikasi Next.js, anda boleh menggunakan beberapa perpustakaan yang menyediakan fungsi yang mantap. Berikut ialah lima perpustakaan teratas yang boleh anda pertimbangkan:

4 Perpustakaan Pengesahan E-mel Teratas untuk Next.js

• Ya

  • Penerangan: Yup ialah perpustakaan pengesahan skema yang berfungsi dengan baik dengan perpustakaan pengurusan borang seperti Formik. Ia membolehkan pengesahan mudah format e-mel dan boleh disepadukan dengan lancar ke dalam aplikasi React.
  • Contoh Penggunaan:

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

• Validator.js

  • Penerangan: Pustaka ringan yang menyediakan cara mudah dan berkesan untuk mengesahkan pelbagai jenis input, termasuk alamat e-mel. Ia termasuk kaedah isEmail() yang menyemak format e-mel yang sah.
  • Contoh Penggunaan:

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

• pengesah e-mel

  • Penerangan: Pustaka ini memberi tumpuan khusus pada pengesahan format alamat e-mel. Ia mudah digunakan dan memberikan pengesahan yang cepat.
  • Contoh Penggunaan:

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

• Borang Cangkuk Bertindak balas (dengan Yup)

  • Penerangan: React Hook Form ialah satu lagi perpustakaan popular untuk mengurus borang dalam aplikasi React. Ia berfungsi dengan baik dengan Yup untuk pengesahan berasaskan skema, menjadikannya pilihan yang bagus untuk mengesahkan e-mel.
  • Contoh Penggunaan:

  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>
  

Perpustakaan ini menyediakan pelbagai pilihan untuk mengesahkan alamat e-mel dalam aplikasi Next.js, memastikan input pengguna diformat dengan betul dan mengurangkan kemungkinan ralat semasa penyerahan data.

---

Untuk mengesahkan alamat e-mel menggunakan pustaka Zod dalam aplikasi Next.js anda, anda boleh membuat skema yang menyemak format e-mel yang sah. Begini cara melakukannya dengan berkesan:

Pengesahan E-mel dengan Zod

1. Pasang Zod

Pertama, pastikan anda telah memasang Zod dalam projek anda. Anda boleh melakukan ini dengan menjalankan:

npm install zod

2. Import Zod

Import Zod ke dalam fail yang anda mahu lakukan pengesahan:

import { z } from 'zod';

3. Buat Skema Pengesahan E-mel

Anda boleh mentakrifkan skema yang mengesahkan format e-mel menggunakan kaedah terbina dalam Zod. Berikut ialah contoh cara membuat skema pengesahan e-mel:

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

Skema ini akan menyemak sama ada input ialah rentetan dan mematuhi format e-mel standard.

4. Sahkan Alamat E-mel

Untuk mengesahkan alamat e-mel, anda boleh menggunakan kaedah parse yang disediakan oleh Zod. Begini cara anda boleh melaksanakannya:

import * as Yup from 'yup';

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

5. Menggunakan Pengesahan Async (Pilihan)

Jika anda ingin melakukan semakan tambahan, seperti mengesahkan sama ada e-mel wujud dalam pangkalan data anda, anda boleh menggunakan kaedah penapisan untuk pengesahan tak segerak. Berikut ialah contoh asas:

const validator = require('validator');

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

6. Mengintegrasikan dengan Borang

Jika anda menggunakan borang dalam aplikasi Next.js anda, anda boleh menyepadukan skema ini dengan perpustakaan pengendalian borang seperti React Hook Form atau Formik untuk pengesahan yang lancar dan pengendalian ralat.

Dengan mengikut langkah ini, anda boleh mengesahkan alamat e-mel dalam aplikasi Next.js anda dengan berkesan menggunakan Zod, memastikan input pengguna diformat dengan betul dan memenuhi keperluan aplikasi anda.
Ingin membina MVP dalam masa 10 hari? hubungi kami sekarang dengan mengulas di bawah.

Atas ialah kandungan terperinci Sahkan Format Alamat E-mel dan Perpustakaan Domain untuk Digunakan dalam Next.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!