Cara Mengesahkan Susunan Rentetan menggunakan Yup

Helo! Dalam tutorial ini, anda akan belajar cara mengesahkan tatasusunan rentetan menggunakan perpustakaan pengesahan Yup. Mula-mula, anda akan belajar cara mengesahkan rentetan dan kemudian menggunakannya pada tatasusunan. Saya baru-baru ini mengalami masalah ini di mana borang memerlukan setiap medan input tidak kosong. Saya akan kongsikan dalam tutorial ini bagaimana saya melakukannya.

Apa itu Yup?

Yup ialah perpustakaan pengesahan masa jalan yang popular, ringkas, sumber terbuka, untuk JavaScript (dan Typescript). Yup ialah perpustakaan pengesahan skema JavaScript yang menyediakan cara untuk mentakrif dan mengesahkan skema data dengan cara yang deklaratif dan mudah digunakan. Ia biasanya digunakan dalam pembangunan bahagian hadapan, terutamanya dengan borang dan pengesahan input data. Pembangun boleh membuat skema pengesahan menggunakan API Yup, menyatakan bentuk dan kekangan data yang mereka jangkakan.

pengenalan

Andaikan, anda sedang melaksanakan borang yang membolehkan pengguna memasukkan berbilang e-mel. Anda perlu menyemak sama ada setiap e-mel adalah sah tetapi bagaimanakah anda sebenarnya membuat skema di mana setiap e-mel disahkan sebagai e-mel?

import { object, string, array } from 'yup'

const schema = object({
  emails: array() //how do you validate each email in the array as an actual email? 
});

Cara Mengesahkan Rentetan

Untuk mengesahkan rentetan dalam yup, anda perlu menggunakan fungsi string() dan ia adalah fungsi lain.

Sebagai contoh, jika anda memerlukan e-mel yang sah, anda hanya boleh menggunakan string().email().

import { object, string, array } from 'yup'

const schema = object({
  email: string().email()
});

const isValid = schema.isValidSync({
    emails: ["", "@test.com"],
  });
console.log(isValid); //true which is wrong since they are clearly not emails

Jika anda memerlukan medan yang diperlukan, anda boleh menggunakan string().required().

import { object, string, array } from 'yup'

const schema = object({
  requiredField: string().required()
});

Ini cukup mudah, sekarang mari kita gunakannya pada tatasusunan.

Cara Mengesahkan Susunan Rentetan dalam Yup

Untuk mengesahkan tatasusunan rentetan dalam yup, anda perlu menentukan jenis tatasusunan yang akan anda sahkan dengan menggunakan fungsi array().of(). Contohnya:

import { object, string, array } from 'yup'

//1. create a simple validation schema for the string
const requiredEmail = string().email().required("Email is required");

//2. apply it to the array().of() function
const schema = object({
  emails: array().of(requiredEmail)
});

Kini apabila kami cuba mengujinya sekali lagi menggunakan beberapa data, kami mendapat hasil yang betul:

let isValid = schema2.isValidSync({
  emails: ["", "@test.com"],
});
console.log(isValid); //false

isValid = schema2.isValidSync({
  emails: ["hi@test.com", "hello@test.com"],
});
console.log(isValid); //true

Cara Mengesahkan Tatasusunan Jenis Lain

Begitu juga, anda boleh menggunakan teknik yang sama jika anda ingin mengesahkan tatasusunan nombor atau apa-apa jenis untuk perkara itu. Contohnya:

import { object, string, array, number, boolean } from "yup";

const requiredNumber = number().required();
const optionalBoolean = boolean().optional();
const user = object({
  firstName: string().required(),
  lastName: string().required(),
});
const schema3 = object({
  numbers: array().of(requiredNumber), // array of numbers
  booleans: array().of(optionalBoolean), //array of booleans
  users: array().of(user),  // array of objects
});

Itu pada asasnya!

Kesimpulan

Anda mempelajari cara mengesahkan tatasusunan rentetan apabila menggunakan Yup. Anda juga mempelajari cara untuk mengesahkan tatasusunan jenis lain dan mencipta skema tatasusunan kompleks dengan menggunakan fungsi tatasusunan().of(). Apa sahaja yang anda boleh lakukan dengan satu objek, anda juga boleh melakukannya dengan tatasusunan.

Atas ialah kandungan terperinci Cara Mengesahkan Susunan Rentetan menggunakan Yup. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!