مرحبًا! ستتعلم في هذا البرنامج التعليمي كيفية التحقق من صحة مجموعة من السلاسل باستخدام مكتبة التحقق من الصحة Yup. أولاً، ستتعلم كيفية التحقق من صحة سلسلة ثم تطبيقها على مصفوفة. لقد واجهت هذه المشكلة مؤخرًا حيث يتطلب النموذج ألا يكون كل حقل إدخال فارغًا. سأشارك في هذا البرنامج التعليمي كيف فعلت ذلك.

ما هو نعم؟

Yup هي مكتبة شائعة وبسيطة ومفتوحة المصدر للتحقق من صحة وقت التشغيل لـ JavaScript (وTypescript). Yup هي مكتبة للتحقق من صحة مخططات JavaScript توفر طريقة لتحديد مخططات البيانات والتحقق من صحتها بطريقة تعريفية وسهلة الاستخدام. يتم استخدامه بشكل شائع في تطوير الواجهة الأمامية، خاصة مع النماذج والتحقق من صحة إدخال البيانات. يمكن للمطورين إنشاء مخططات التحقق من الصحة باستخدام واجهة برمجة التطبيقات الخاصة بـ Yup، مع تحديد شكل وقيود البيانات التي يتوقعونها.

مقدمة

لنفترض أنك تقوم بتنفيذ نموذج حيث يمكن للمستخدم إدخال رسائل بريد إلكتروني متعددة. سيتعين عليك التحقق مما إذا كان كل بريد إلكتروني صالحًا ولكن كيف يمكنك فعليًا إنشاء مخطط حيث يتم التحقق من صحة كل بريد إلكتروني كبريد إلكتروني؟

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

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

كيفية التحقق من صحة السلاسل

للتحقق من صحة السلاسل في نعم، سيتعين عليك استخدام وظيفة string()، وهي وظائف أخرى.

على سبيل المثال، إذا كنت بحاجة إلى بريد إلكتروني صالح، يمكنك فقط استخدام 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

إذا كنت بحاجة إلى حقل مطلوب، يمكنك استخدام string().required().

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

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

هذا بسيط بما فيه الكفاية، والآن دعونا نطبقه على المصفوفات.

كيفية التحقق من صحة مجموعة من السلاسل في Yup

للتحقق من صحة مصفوفة من السلاسل في نعم، سيتعين عليك تحديد نوع المصفوفة التي ستقوم بالتحقق من صحتها باستخدام الدالة array().of() . على سبيل المثال:

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)
});

الآن عندما نحاول اختباره مرة أخرى باستخدام بعض البيانات، نحصل على النتائج الصحيحة:

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

isValid = schema2.isValidSync({
  emails: ["[email protected]", "[email protected]"],
});
console.log(isValid); //true

كيفية التحقق من صحة مجموعة من الأنواع الأخرى

وبالمثل، يمكنك استخدام نفس الأسلوب إذا كنت تريد التحقق من صحة مجموعة من الأرقام أو أي نوع لهذه المسألة. على سبيل المثال:

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
});

هذا كل ما في الأمر!

خاتمة

لقد تعلمت كيفية التحقق من صحة مجموعة من السلاسل عند استخدام Yup. لقد تعلمت أيضًا كيفية التحقق من صحة المصفوفات من الأنواع الأخرى وإنشاء مخططات مصفوفة معقدة باستخدام الدالة array().of(). كل ما يمكنك فعله بكائن واحد، يمكنك أيضًا القيام به باستخدام المصفوفات.