DEV Community

F. Güngör
F. Güngör

Posted on

React form validasyon işlemlerinde derinlemesine Yup Kullanımı

Yup Nedir ?

Yup, react uygulamalarında form validasyon yapmamızı sağlayan kütüphanedir.

"npm install yup" komutu ile kolayca projenize ekleyebilirsiniz. Yup kurulumu tamamlanınca, şema tanımlama işlemine başlayabilirsiniz. Yup'ta form validasyonları şema olarak adlandırılan object'ler ile yapılır.

örnek olarak kullanıcı adı ve parola alanı için bir validasyon şeması tanımlayalım.


import schema from './validationScheme';
export default function YupTest() {
  const formData = {
    username:"user",
    password:"pass123"
  };
  const errors = schema.validate(formData);
  console.error(errors)
}
Enter fullscreen mode Exit fullscreen mode

validationSchema.js

import * as YUP from 'yup'

const schema=YUP.object().shape({
    username:YUP.string().required(),
    password:YUP.string().required().min(8)
})
export default schema;
Enter fullscreen mode Exit fullscreen mode

uygulamayı çalıştırdığımızda konsolda aşağıdaki gibi hata alacağız

ValidationError: password must be at least 8 characters
Enter fullscreen mode Exit fullscreen mode

Dikkat edilmesi gereken hususlar, formdaki alanların, şemaa içerisindeki field'lar ile aynı olmasıdır.
Yup, farklı veri türleri için validasyon şema nesnesi barındırır. Örneğin number(),positive(),email() vb.

import schema from './validationScheme';
export default function YupTest() {
  const formData = {
    username:"user",
    password:"pass123",
    email:"aaa.gmail.com"
  };
  const errors = schema.validate(formData);
  console.error(errors)
}
Enter fullscreen mode Exit fullscreen mode

validationSchema.js

import * as YUP from 'yup'

const schema=YUP.object().shape({
    username:YUP.string().required(),
    password:YUP.string().required().min(8),
    email:YUP.string().email("eposta formatına uygun olmalıdır ").required("E posta alanı gereklidir")
})

export default schema;
Enter fullscreen mode Exit fullscreen mode

uygulamayı çalıştırdığımızda aşağıdaki hatayı alacağız

ValidationError: eposta formatına uygun olmalıdır
Enter fullscreen mode Exit fullscreen mode

Eğer aşağıdaki gibi bir formData validate etmeye çalışırsak, "Eposta alanı gereklidir" hatası alıyor olacağız.

import schema from './validationScheme';
export default function YupTest() {
  const formData = {
    username:"user",
    password:"pass123",
    email:""
  };
  const errors = schema.validate(formData);
  console.error(errors)
}
Enter fullscreen mode Exit fullscreen mode

Yup ile regex pattern tanımlayıp, formdaki alanın bu kalıba uyup uymadığını da test edebiliriz.

Telefon numarası için tanımlanmış bir yup şeması

import * as YUP from 'yup'

const schema=YUP.object().shape({
    phone:YUP.string()
             .required()
             .matches("^5[0-9]{2}[0-9]{7}","Hatalı telefon numarası") //5 ile  başlayan 10 haneli telefon numarası ile match olacak 
})

export default schema;
Enter fullscreen mode Exit fullscreen mode

validationSchema.js


import schema from './validationScheme';
export default function YupTest() {
  const formData = {
   phone:"1441234567"
  };
  const errors = schema.validate(formData);
  console.error(errors)
}

// çıktı :ValidationError: Hatalı telefon numarası
Enter fullscreen mode Exit fullscreen mode

yup ile url validasyonu yapabilirsiniz

import schema from './validationScheme';
export default function YupTest() {
  const formData = {
   url:"http://aa.com"
  };
  const errors = schema.validate(formData);
  console.error(errors)
}
Enter fullscreen mode Exit fullscreen mode

validationScheme.js

import * as YUP from 'yup'

const schema=YUP.object().shape({
   url:YUP.string().url("tanımsız url")
})

export default schema;
Enter fullscreen mode Exit fullscreen mode

Tarih(date) alanları için validasyon

import * as YUP from 'yup'

const schema=YUP.object().shape({
   tarih:YUP.date().default(()=>new Date())
})

export default schema;
Enter fullscreen mode Exit fullscreen mode

Numerik alanlar için validasyon şeması tanımını da yapabilmekteyiz.

Örnek olarak Pozitif tam sayı şeması tanımlanmıştır.


const schema=YUP.object().shape({
   sayi:YUP
         .number("Nümerik olmalı") 
         .positive("Sıfırdan büyük olmalı")
         .integer("tam sayı olmalı")
})

export default schema;
Enter fullscreen mode Exit fullscreen mode 
import schema from './validationScheme';
export default function YupTest() {
  const formData = {
   sayi:1.2
  };
  const errors = schema.validate(formData);
  console.error(errors)
}
Enter fullscreen mode Exit fullscreen mode

çalıştırdığımızda "ValidationError: tam sayı olmalı" hatasını alacağız.

Yup ile test methodu da tanımlayıp, validasyon testini de yapabilmekteyiz.
Aşağıdaki örnekte, araba alanı mercedes olarak gönderilmediği takdirde "xx not mercedes" hatası dönecek şemayı yazdık.

import * as YUP from 'yup'

const schema=YUP.object().shape({
   araba:YUP
         .string()
         .test("is mercedes","${path} is not mercedes",value=>value==="mercedes")

})

export default schema;
Enter fullscreen mode Exit fullscreen mode

Yeni yazımızda görüşmek üzere ...

Top comments (0)

Read next

jojomondag profile image

🎄 A Christmas Gift for Developers: FileToMarkdown!

Josef Nobach -

efecan_buyukda_e0c381aa6 profile image

Untitled

Efecan Buyukdağ -

alsamiulhimel profile image

Al Samiul Himel

AL Samiul Himel -

ryo_suwito profile image

Neuer: The End of Framework Slavery

Ryo Suwito -