Yup Notları ve İpuçları

İçindekiler

1. Kurulum
2. Temel Kullanım
3. String Doğrulama
4. Sayı Doğrulama
5. Boolean Doğrulama
6. Tarih Doğrulama
7. Dizi Doğrulama
8. Nesne Doğrulama
9. Özel Doğrulama
10. Koşullu Doğrulama
11. Hata Yönetimi
12. React Hook Form ile Entegrasyon

Kurulum

Yup'i yükleyin:

npm install yup

Temel Kullanım

Temel şema tanımı ve doğrulama:

import * as Yup from 'yup';

const schema = Yup.object().shape({
  name: Yup.string().required('İsim gereklidir'),
  email: Yup.string().email('Geçersiz e-posta').required('E-posta gereklidir'),
  age: Yup.number().positive().integer().required('Yaş gereklidir')
});

// Doğrula
schema.validate({ name: 'John', email: 'john@example.com', age: 30 })
  .then(() => console.log('Geçerli'))
  .catch(error => console.log('Hata', error.errors));

String Doğrulama

Çeşitli string doğrulama yöntemleri:

const stringSchema = Yup.object().shape({
  username: Yup.string()
    .min(3, 'Kullanıcı adı en az 3 karakter olmalıdır')
    .max(20, 'Kullanıcı adı en fazla 20 karakter olmalıdır')
    .matches(/^[a-zA-Z0-9]+$/, 'Kullanıcı adı yalnızca alfasayısal karakterler içerebilir')
    .required('Kullanıcı adı gereklidir'),
  email: Yup.string()
    .email('Geçersiz e-posta adresi')
    .required('E-posta gereklidir'),
  password: Yup.string()
    .min(8, 'Şifre en az 8 karakter olmalıdır')
    .matches(/[a-zA-Z]/, 'Şifre en az bir harf içermelidir')
    .matches(/[0-9]/, 'Şifre en az bir rakam içermelidir')
    .required('Şifre gereklidir'),
  url: Yup.string()
    .url('Geçersiz URL')
});

Sayı Doğrulama

Sayı doğrulama yöntemleri:

const numberSchema = Yup.object().shape({
  age: Yup.number()
    .positive('Yaş pozitif bir sayı olmalıdır')
    .integer('Yaş bir tam sayı olmalıdır')
    .min(18, 'En az 18 yaşında olmalısınız')
    .max(100, 'En fazla 100 yaşında olmalısınız')
    .required('Yaş gereklidir'),
  price: Yup.number()
    .positive('Fiyat pozitif olmalıdır')
    .round('ceil')
    .moreThan(0, 'Fiyat 0'dan büyük olmalıdır')
    .lessThan(1000000, 'Fiyat 1,000,000'dan küçük olmalıdır')
});

Boolean Doğrulama

Boolean doğrulama:

const booleanSchema = Yup.object().shape({
  acceptTerms: Yup.boolean()
    .oneOf([true], 'Şartları ve koşulları kabul etmelisiniz')
    .required('Şartları ve koşulları kabul etmelisiniz'),
  subscribeNewsletter: Yup.boolean()
});

Tarih Doğrulama

Tarih doğrulama yöntemleri:

const dateSchema = Yup.object().shape({
  birthDate: Yup.date()
    .max(new Date(), 'Doğum tarihi gelecekte olamaz')
    .required('Doğum tarihi gereklidir'),
  appointmentDate: Yup.date()
    .min(new Date(), 'Randevu tarihi gelecekte olmalıdır')
    .required('Randevu tarihi gereklidir')
});

Dizi Doğrulama

Dizi doğrulama yöntemleri:

const arraySchema = Yup.object().shape({
  friends: Yup.array()
    .of(Yup.string())
    .min(1, 'En az bir arkadaşınız olmalıdır')
    .max(5, 'En fazla 5 arkadaşınız olabilir'),
  scores: Yup.array()
    .of(Yup.number().positive().integer())
    .min(3, 'En az 3 puanınız olmalıdır')
    .required('Puanlar gereklidir')
});

Nesne Doğrulama

İç içe geçmiş nesne doğrulama:

const objectSchema = Yup.object().shape({
  user: Yup.object().shape({
    name: Yup.string().required('İsim gereklidir'),
    email: Yup.string().email('Geçersiz e-posta').required('E-posta gereklidir')
  }),
  address: Yup.object().shape({
    street: Yup.string().required('Sokak adı gereklidir'),
    city: Yup.string().required('Şehir adı gereklidir'),
    zipCode: Yup.string().matches(/^d{5}$/, 'Geçersiz posta kodu')
  })
});

Özel Doğrulama

Özel doğrulama kuralları oluşturma:

const customSchema = Yup.object().shape({
  username: Yup.string()
    .test('is-unique', 'Kullanıcı adı zaten alınmış', async (value) => {
      // Kullanıcı adı benzersizliğini kontrol etmek için API çağrısını simüle et
      const isUnique = await checkUsernameUniqueness(value);
      return isUnique;
    }),
  password: Yup.string()
    .test('is-strong', 'Şifre yeterince güçlü değil', (value) => {
      // Özel şifre güç testi
      return /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[@$!%*?&])[A-Za-zd@$!%*?&]{8,}$/.test(value);
    })
});

Koşullu Doğrulama

Koşullu doğrulama uygulama:

const conditionalSchema = Yup.object().shape({
  isEmployed: Yup.boolean(),
  companyName: Yup.string().when('isEmployed', {
    is: true,
    then: Yup.string().required('Çalışan olduğunuzda şirket adı gereklidir'),
    otherwise: Yup.string()
  }),
  phoneType: Yup.string().oneOf(['mobile', 'home']),
  phoneNumber: Yup.string().when('phoneType', {
    is: 'mobile',
    then: Yup.string().matches(/^d{10}$/, 'Geçerli bir 10 haneli mobil numara olmalıdır'),
    otherwise: Yup.string().matches(/^d{7}$/, 'Geçerli bir 7 haneli ev numarası olmalıdır')
  })
});

Hata Yönetimi

Doğrulama hatalarını yönetme:

const schema = Yup.object().shape({
  name: Yup.string().required('İsim gereklidir'),
  email: Yup.string().email('Geçersiz e-posta').required('E-posta gereklidir')
});

try {
  await schema.validate({ name: '', email: 'invalid' }, { abortEarly: false });
} catch (error) {
  if (error instanceof Yup.ValidationError) {
    const errorMessages = {};
    error.inner.forEach((err) => {
      errorMessages[err.path] = err.message;
    });
    console.log('Doğrulama hataları:', errorMessages);
  }
}

React Hook Form ile Entegrasyon

Yup'i React Hook Form ile kullanma:

import React from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as Yup from 'yup';

const schema = Yup.object().shape({
  name: Yup.string().required('İsim gereklidir'),
  email: Yup.string().email('Geçersiz e-posta').required('E-posta gereklidir')
});

function Form() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(schema)
  });

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name")} />
      {errors.name && <p>{errors.name.message}</p>}
      
      <input {...register("email")} />
      {errors.email && <p>{errors.email.message}</p>}
      
      <input type="submit" />
    </form>
  );
}