VineJS lwn. Zod untuk pengesahan skema

Ditulis oleh Oghenetega Denedo✏️

Pengesahan skema adalah mesti ada untuk mana-mana apl sedia pengeluaran, kerana mana-mana data daripada pengguna atau sumber luaran lain perlu mematuhi struktur atau format yang dipratentukan untuk mengekalkan integriti data dan mencegah sebarang gelagat yang tidak dijangka dalam aplikasi kami.

Lazimnya, pembangun perlu menghasilkan pengesahan untuk data input apabila pengguna menyerahkan borang ke tapak web atau untuk muatan yang dihantar ke API melalui permintaan HTTP. Walau bagaimanapun, menulis logik pengesahan ini secara manual boleh berulang dan memakan masa, yang tidak baik untuk produktiviti pembangun.

Nasib baik, perpustakaan untuk tugas pembangunan biasa hampir tidak menjadi masalah dalam komuniti JavaScript, dan pengesahan skema tidak terkecuali.

Dalam artikel ini, kami akan membandingkan VineJS dan Zod dengan menilai keupayaan pengesahan, prestasi, penyepaduan dengan alatan dan ekosistem mereka. Pada akhirnya, anda akan melihat bahawa walaupun VineJS cemerlang dengan prestasi, kepelbagaian Zod dan penyepaduan TypeScript yang kukuh menjadikannya pilihan yang lebih lengkap untuk kebanyakan projek.

Apakah VineJS?

VineJS ialah perpustakaan pengesahan skema JavaScript/TypeScript moden yang direka bentuk untuk ringan, mudah digunakan dan berprestasi tinggi.

Projek ini berasal daripada pangkalan kod pengesah AdonisJS dan telah dinaik taraf serta dikeluarkan sebagai perpustakaan kendiri. VineJS dibina untuk digunakan dalam persekitaran bahagian pelayan Node.js, terutamanya dalam senario seperti mengesahkan permintaan masuk kepada API untuk memastikan muatan adalah daripada format yang dijangkakan sebelum diproses selanjutnya.

Beberapa ciri utama VineJS termasuk:

• Ringan dan pantas — Perpustakaan direka bentuk agar ringan untuk mengesahkan data dengan berkesan dengan overhed minimum untuk aplikasi
• Sokongan TypeScript — VineJS menyediakan inferens jenis untuk skema yang ditentukan supaya data yang disahkan ditaip dengan betul
• Mesej ralat tersuai — Dengan API pembekal mesej ringkas, mesej ralat boleh disesuaikan agar jelas dan khusus konteks
• Sintaks deklaratif — VineJS juga menawarkan cara yang jelas dan ringkas untuk mentakrifkan skema pengesahan untuk kebolehbacaan yang lebih baik dan kemudahan penyelenggaraan
• Skema pra-penyusun — Salah satu ciri menonjol VineJS ialah bagaimana ia meningkatkan prestasi dengan pra-penyusun skema ke dalam fungsi JavaScript yang dioptimumkan untuk digunakan semula untuk pengesahan
• Kebolehlanjutan — VineJS menjadikannya sangat mudah untuk mencipta jenis skema tersuai dan peraturan pengesahan untuk memenuhi keperluan khusus projek anda

Dalam bahagian seterusnya, kita akan melihat cara beberapa ciri ini dimainkan.

Pengesahan skema dengan VineJS

Mari kita lihat beberapa keupayaan pengesahan skema VineJS.

Jenis data asas

Apabila bekerja dengan input pengguna atau data daripada sumber luaran, mengesahkan jenis data asas seperti rentetan, nombor dan boolean selalunya merupakan langkah pertama. VineJS memudahkan proses ini dengan API intuitifnya.

Sebagai contoh, mari sahkan umur pengguna:

import vine, { errors } from "@vinejs/vine"; // NOTE: VineJS is ESM only

const ageSchema = vine.number().min(18).max(30);

try {
  const output = await vine.validate({ schema: ageSchema, data: 21 });
  console.log(output);
} catch (error) {
  if (error instanceof errors.E_VALIDATION_ERROR) {
    console.log("validation error: age is invalid");
  } else {
    console.log("an unexpected error occurred");
  }
}

Dalam contoh ini, kami mencipta skema ringkas untuk mengesahkan input ialah nombor dan menggunakan kaedah min dan maks untuk memastikan ia antara 18 dan 30. VineJS menawarkan peraturan pengesahan tambahan ini untuk menjadikan pengesahan lebih tepat.

Kadangkala, anda perlu memformat data input sebelum menggunakan peraturan pengesahan. Contohnya, jika anda ingin memastikan rentetan input ditukar kepada huruf kecil sebelum pengesahan, anda boleh melakukan ini dalam skema:

const usernameSchema = vine
  .string()
  .toLowerCase()
  .minLength(3)
  .maxLength(15)
  .regex(/^[a-z0-9_]+$/);

console.log(vine.validate({schema: nameSchema, data: "Bruce_Wayne"})) // logs bruce wayne

Dalam skema ini, nama pengguna ditukar kepada huruf kecil sebelum menyemak panjang dan formatnya.

Mengesahkan objek dan tatasusunan

Di luar jenis skema asas, VineJS menawarkan pengesahan untuk objek dan tatasusunan, menjadikannya amat berguna untuk mengesahkan borang atau muatan API dengan berbilang medan.

Mari lihat bagaimana anda boleh mengesahkan objek yang mewakili profil pengguna:

const userProfileSchema = vine.object({
  name: vine.string().minLength(3),
  email: vine.string().email(),
  age: vine.number().min(18).max(65).optional(),
});

const output = await vine.validate({
  schema: ageSchema,
  data: {
    name: "Jane Doe",
    email: "jane.doe@example.com",
    age: 29,
  },
}); // logs { name: 'Jane Doe', email: 'jane.doe@example.com', age: 29 }

Dalam contoh ini, kami telah menyediakan skema untuk profil pengguna dengan medan untuk nama, e-mel dan umur.

Dengan menggunakan kaedah vine.object(), kami boleh mengesahkan setiap medan mengikut peraturan yang diberikan. Semua medan dalam vine.object diperlukan secara lalai, jadi ia mesti ada dalam objek yang sedang disahkan. Walau bagaimanapun, kami telah menandakan medan umur sebagai pilihan dengan kaedah optional(), jadi pengesahan tidak akan gagal jika tiada.

Tatasusunan juga boleh dikendalikan dengan cara yang sama:

const tagsSchema = vine
  .array(vine.string().minLength(2).maxLength(20))
  .minLength(1)
  .maxLength(10);

console.log(
  await vine.validate({
    schema: tagsSchema,
    data: ["tech", "news", "coding"],
  })
); // logs [ 'tech', 'news', 'coding' ]

Dalam contoh ini, skema memastikan setiap item dalam tatasusunan ialah rentetan antara 2 dan 20 aksara panjang, dan tatasusunan itu sendiri mesti mengandungi 1 hingga 10 elemen. Ini amat berguna untuk mengesahkan senarai seperti teg atau kategori.

Pra-penyusun skema

Pra-penyusun ialah ciri utama VineJS yang menukarkan skema kepada fungsi JavaScript yang dioptimumkan yang boleh digunakan semula untuk pengesahan untuk membantu mengurangkan kos menghuraikan dan mengesahkan skema berulang kali. Ini boleh menjadi sangat berguna dalam persekitaran pengeluaran untuk memberikan keuntungan prestasi.

Untuk pra-penyusun skema, anda boleh menggunakan kaedah vine.compile():

const compiledSchema = vine.compile(
  vine.object({
    username: vine.string().minLength(3).maxLength(30),
    password: vine.string().minLength(8),
  })
);

// Use the compiled schema to validate data
console.log(
  await compiledSchema.validate({
    username: "janedoe",
    password: "password123",
  })
);

Pra-penyusun amat berguna untuk skema yang memerlukan pengesahan yang kerap, seperti yang terdapat di titik akhir API trafik tinggi.

Memandangkan skema akan disusun menjadi fungsi yang boleh diguna semula, proses berulang untuk menghuraikan dan mengesahkan skema tidak dapat dielakkan supaya VineJS dapat mempercepatkan proses pengesahan untuk menjadikan aplikasi anda lebih responsif.

Mesej ralat tersuai

Mesej ralat tersuai membantu memberikan maklum balas yang lebih jelas kepada pengguna untuk memudahkan mengenal pasti dan membetulkan kesilapan. VineJS menggunakan API SimpleMessagesProvider terbina dalam untuk mentakrifkan mesej ralat sebagai pasangan nilai kunci. Kuncinya boleh menjadi nama peraturan iaitu diperlukan dan rentetan atau gabungan peraturan medan tertentu, dan nilainya ialah mesej ralat yang sepadan.

API SimpleMessagesProvider boleh dikonfigurasikan secara global, pada tahap setiap skema, atau apabila kaedah pengesahan dipanggil. Untuk contoh kod yang akan menyusul, kami akan menggunakan API secara global.

Sebagai contoh, katakan anda ingin menyesuaikan mesej ralat untuk nama pengguna dan medan e-mel:

import vine, { errors } from "@vinejs/vine"; // NOTE: VineJS is ESM only

const ageSchema = vine.number().min(18).max(30);

try {
  const output = await vine.validate({ schema: ageSchema, data: 21 });
  console.log(output);
} catch (error) {
  if (error instanceof errors.E_VALIDATION_ERROR) {
    console.log("validation error: age is invalid");
  } else {
    console.log("an unexpected error occurred");
  }
}

Anda juga boleh menyesuaikan mesej untuk medan bersarang atau elemen tatasusunan. Untuk medan bersarang, gunakan notasi titik:

const usernameSchema = vine
  .string()
  .toLowerCase()
  .minLength(3)
  .maxLength(15)
  .regex(/^[a-z0-9_]+$/);

console.log(vine.validate({schema: nameSchema, data: "Bruce_Wayne"})) // logs bruce wayne

Untuk elemen tatasusunan, anda boleh menggunakan kad bebas (*) untuk menyasarkan semua item atau menentukan indeks:

const userProfileSchema = vine.object({
  name: vine.string().minLength(3),
  email: vine.string().email(),
  age: vine.number().min(18).max(65).optional(),
});

const output = await vine.validate({
  schema: ageSchema,
  data: {
    name: "Jane Doe",
    email: "jane.doe@example.com",
    age: 29,
  },
}); // logs { name: 'Jane Doe', email: 'jane.doe@example.com', age: 29 }

VineJS juga membolehkan anda menggantikan nama medan dengan label yang lebih mesra pengguna. Ini berguna apabila nama medan dalam kod anda tidak sesuai untuk mesej yang dihadapi pengguna:

const tagsSchema = vine
  .array(vine.string().minLength(2).maxLength(20))
  .minLength(1)
  .maxLength(10);

console.log(
  await vine.validate({
    schema: tagsSchema,
    data: ["tech", "news", "coding"],
  })
); // logs [ 'tech', 'news', 'coding' ]

Peraturan pengesahan tersuai

Di luar apa yang disediakan oleh peraturan terbina dalam, VineJS memberi pembangun keupayaan untuk mencipta peraturan pengesahan tersuai untuk memenuhi keperluan khusus anda. Anda boleh menggunakan peraturan tersuai ini dalam projek anda dengan melaksanakannya sebagai fungsi kendiri atau dengan menyepadukannya ke dalam kelas skema sedia ada.

Dalam VineJS, peraturan tersuai hanyalah fungsi yang mengemas kini atau mengesahkan nilai medan. Tiga parameter biasanya dihantar ke fungsi: nilai yang akan disahkan, sebarang pilihan yang mungkin diperlukan oleh peraturan dan konteks medan.

Sebagai contoh, mari buat peraturan tersuai yang dipanggil mongodbId yang menyemak sama ada rentetan ialah MongoDB ObjectId yang sah:

const compiledSchema = vine.compile(
  vine.object({
    username: vine.string().minLength(3).maxLength(30),
    password: vine.string().minLength(8),
  })
);

// Use the compiled schema to validate data
console.log(
  await compiledSchema.validate({
    username: "janedoe",
    password: "password123",
  })
);

Untuk menjadikan peraturan ini boleh digunakan dalam skema VineJS, kita mesti menukarnya terlebih dahulu menjadi peraturan yang serasi dengan VineJS menggunakan kaedah vine.createRule:

import vine, { SimpleMessagesProvider } from '@vinejs/vine';

vine.messagesProvider = new SimpleMessagesProvider({
  'required': 'You must provide a value for {{ field }}.',
  'email': '{{ field }} needs to be a valid email address.',
  'username.required': 'A username is required to continue.',
});

Untuk memudahkan lagi penggunaannya, anda mungkin mahu menambah kaedah mongodbId terus ke kelas VineString untuk mendapat manfaat daripada API boleh rantai:

Apa itu Zod?

Zod ialah perpustakaan pengesahan skema pertama TypeScript yang mudah dan berkuasa. Ia memudahkan penentuan dan penguatkuasaan struktur data dan peraturan pengesahan, dan ia berfungsi dengan baik untuk kedua-dua aplikasi bahagian hadapan dan belakang.

Direka bentuk khusus untuk TypeScript, Zod memastikan penyepaduan yang lancar dan inferens jenis yang kukuh untuk projek TypeScript.

Beberapa ciri utama Zod ialah:

• Penyepaduan TypeScript — Zod sepenuhnya serasi TypeScript, menawarkan inferens jenis yang sangat baik untuk memastikan peraturan pengesahan anda kekal selari dengan jenis TypeScript anda
• Mesej ralat tersuai — Zod membenarkan anda menentukan mesej ralat tersuai untuk maklum balas yang bermakna kepada pengguna
• Fungsi utiliti — Ia termasuk fungsi berguna untuk komposisi dan pengesahan skema, seperti menggabungkan skema dan peraturan penapisan
• Ketidakbolehubah — Skema Zod tidak berubah yang bermaksud anda tidak boleh mengubah suainya secara tidak sengaja selepas penciptaan
• Sifar kebergantungan — Pakej Zod npm sangat ringan tanpa kebergantungan luaran
• Keserasian Penyemak Imbas dan Node.js — Zod berfungsi dalam kedua-dua Node.js dan penyemak imbas moden kerana ini menjadikannya sesuai untuk menggunakan semula skema pengesahan

Pengesahan skema dengan Zod

Zod menjadikan pengesahan skema mudah dan fleksibel, membolehkan anda mengendalikan pelbagai jenis data dan keperluan pengesahan dengan mudah. Sintaksnya sangat serupa dengan VineJS seperti yang anda akan lihat dalam bahagian yang berikut.

Jenis data asas

Zod mengendalikan jenis data asas seperti rentetan, nombor, boolean dan tarikh dengan baik.

Sebagai contoh, mari buat skema mudah untuk mengesahkan rentetan dan nombor:

import vine, { errors } from "@vinejs/vine"; // NOTE: VineJS is ESM only

const ageSchema = vine.number().min(18).max(30);

try {
  const output = await vine.validate({ schema: ageSchema, data: 21 });
  console.log(output);
} catch (error) {
  if (error instanceof errors.E_VALIDATION_ERROR) {
    console.log("validation error: age is invalid");
  } else {
    console.log("an unexpected error occurred");
  }
}

Dalam contoh ini, nameSchema mengesahkan bahawa "Peter Parker" ialah rentetan dan lulus, manakala ageResult gagal kerana umur di bawah 18 tahun.

Mengesahkan objek dan tatasusunan

Apabila berurusan dengan objek dan tatasusunan, Zod menjadikannya mudah untuk menentukan bentuk data anda. Sebagai contoh, mengesahkan objek pengguna dan senarai teg boleh dilakukan seperti ini:

const usernameSchema = vine
  .string()
  .toLowerCase()
  .minLength(3)
  .maxLength(15)
  .regex(/^[a-z0-9_]+$/);

console.log(vine.validate({schema: nameSchema, data: "Bruce_Wayne"})) // logs bruce wayne

Dalam contoh di atas, UserSchema mengesahkan data pengguna dan tagSchema menyemak bahawa tatasusunan hanya mengandungi rentetan. Pengesahan tatasusunan gagal kerana 123 bukan rentetan.

Mesej ralat tersuai

Untuk menjadikan maklum balas pengesahan lebih berguna dan mengecam ralat lebih mudah, Zod turut menyokong mesej ralat boleh dikonfigurasikan.

Sebagai contoh, jika umur di bawah 18 tahun, anda boleh menetapkan mesej yang diperibadikan:

const userProfileSchema = vine.object({
  name: vine.string().minLength(3),
  email: vine.string().email(),
  age: vine.number().min(18).max(65).optional(),
});

const output = await vine.validate({
  schema: ageSchema,
  data: {
    name: "Jane Doe",
    email: "jane.doe@example.com",
    age: 29,
  },
}); // logs { name: 'Jane Doe', email: 'jane.doe@example.com', age: 29 }

Di sini, pengesahan gagal dan ralat dilemparkan dengan mesej ralat tersuai Anda mesti berumur 18 tahun atau lebih.

Pengesahan tersuai

Zod menyediakan fleksibiliti untuk mencipta logik pengesahan tersuai menggunakan kaedah perhalusi, yang membolehkan anda menguatkuasakan peraturan melangkaui semakan jenis asas.

Untuk mengesahkan kod warna heks, contohnya, tidak cukup dengan hanya menentukan sama ada ia adalah rentetan; ia juga perlu mematuhi corak tertentu. Begini cara untuk melakukannya:

const tagsSchema = vine
  .array(vine.string().minLength(2).maxLength(20))
  .minLength(1)
  .maxLength(10);

console.log(
  await vine.validate({
    schema: tagsSchema,
    data: ["tech", "news", "coding"],
  })
); // logs [ 'tech', 'news', 'coding' ]

Dalam contoh ini, logik pengesahan tersuai ditambah menggunakan kaedah penapisan untuk menentukan sama ada rentetan itu ialah kod warna heks yang sah yang terdiri daripada tiga atau enam aksara (#RGB atau #RRGGBB).

VineJS lwn Zod

Prestasi

Tanda aras daripada dokumen VineJS menunjukkan bahawa VineJS ialah salah satu perpustakaan pengesahan terpantas dalam ekosistem Node.js, mengatasi Yup dan Zod dalam pengesahan objek mudah dan pengesahan lain.
Seperti yang ditunjukkan dalam dokumentasi VineJS.

Carta menunjukkan bahawa VineJS memberikan prestasi unggul, menjadikannya penyelesaian yang baik untuk aplikasi bahagian belakang yang memerlukan prestasi tinggi. Zod berfungsi dengan baik dan cukup pantas untuk kebanyakan kes penggunaan.

Sokongan TypeScript

Sokongan TypeScript sangat baik dalam kedua-duanya, tetapi Zod telah direka bentuk dengan mempertimbangkan TypeScript untuk menjadikan inferens jenis lebih lancar. VineJS juga menyokong TypeScript, tetapi tidak sepadu yang mendalam, menjadikan Zod kelebihan sedikit untuk projek TypeScript-berat.

Ekosistem

Dengan lebih banyak sumber, tutorial dan pemalam tersedia, Zod mempunyai komuniti yang lebih besar dan lebih mantap. Walau bagaimanapun, walaupun VineJS lebih baharu, mempunyai sumber yang lebih sedikit dan mempunyai komuniti yang lebih kecil, VineJS dijangka akan terus berkembang kerana API yang mudah digunakan dan reka bentuk yang memfokuskan prestasi.

Had

Kelemahan utama menggunakan VineJS ialah ia tidak direka bentuk untuk digunakan dalam masa jalan hadapan. Ia kurang sesuai untuk aplikasi yang memerlukan pengesahan pihak klien kerana kekangan ini. Selain itu, ia tidak menyokong CommonJS, yang boleh menjadi isu untuk projek yang menggunakannya. Ia hanya berfungsi dengan Modul ECMAScript (ESM).

Walau bagaimanapun, Zod lebih serba boleh, menyokong dua sistem modul JavaScript utama sambil berfungsi dengan baik tanpa mengira persekitaran tempat anda menjalankan kod anda, yang menjadikannya lebih sesuai untuk projek tindanan penuh.

Pustaka pengesahan skema lain

Selain daripada VineJS dan Zod, beberapa perpustakaan lain untuk pengesahan skema patut disebut untuk pelbagai kes penggunaan.

Disebabkan kemudahan penggunaannya, Yup sangat disukai dan kerap digunakan dalam pengesahan bahagian hadapan, terutamanya apabila digabungkan dengan React dan alatan seperti Formik. Berbanding dengan VineJS atau Zod, ia mungkin tidak berfungsi dengan baik dengan struktur kompleks, tetapi API boleh rantainya menjadikan skema pembangunan mudah.

Pustaka berkuasa yang sering digunakan dalam bahagian belakang Node.js dipanggil joi. Walaupun APInya boleh berasa lebih berat daripada pendekatan ringan VineJS dan Zod, ia memberikan lebih fleksibiliti dan mengurus pengesahan rumit untuk objek bersarang dalam. Untuk apl sebelah pelayan yang memerlukan pengesahan canggih, ia sesuai.

Kelajuan dan pematuhan skema JSON yang lengkap adalah keutamaan utama AJV. Walaupun ia tidak mempunyai API mesra pengguna yang dimiliki oleh Zod atau VineJS, ia bagus untuk mengesahkan data JSON, terutamanya dalam API. Tetapi untuk tugasan yang memerlukan kecekapan tinggi, seperti mengesahkan set data JSON yang besar, ia sesuai.

Kesimpulan

VineJS dan Zod ialah dua alat pengesahan skema yang sangat baik dan anda tidak akan salah dengan salah satu daripadanya, tetapi ia cemerlang dalam bidang yang berbeza. Jika anda masih tidak pasti yang mana untuk digunakan, cuba kedua-duanya dalam projek kecil dan lihat mana yang sesuai untuk anda. Selamat mengekod!

---

LogRocket: Nyahpepijat ralat JavaScript dengan lebih mudah dengan memahami konteks

Kod nyahpepijat sentiasa menjadi tugas yang membosankan. Tetapi semakin anda memahami kesilapan anda, semakin mudah untuk membetulkannya.

LogRocket membolehkan anda memahami ralat ini dengan cara baharu dan unik. Penyelesaian pemantauan bahagian hadapan kami menjejaki penglibatan pengguna dengan bahagian hadapan JavaScript anda untuk memberi anda keupayaan untuk melihat dengan tepat perkara yang dilakukan pengguna yang membawa kepada ralat.

LogRocket merekodkan log konsol, masa muat halaman, surih tindanan, permintaan/tindak balas rangkaian perlahan dengan badan pengepala, metadata penyemak imbas dan log tersuai. Memahami kesan kod JavaScript anda tidak akan menjadi lebih mudah!

Cuba secara percuma.

Atas ialah kandungan terperinci VineJS lwn. Zod untuk pengesahan skema. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!