Formik 과 Yup ile React Form Validasyonu

Bir çoğumuz projelerimizde ve gündelik çalışmalarımızda forlar ile çalıştık ve çalışıyoruz. Peki oluşturduğumuz bu form yapılarımıza valisdasyonlarımızı yani doğrulamalarımızı koyuyor muyuz ?

İstemci tarafı form doğrulamasını yerleştirmeliyiz. Bunun nedeni, kullanıcı deneyimini ve web sitesi performansını iyileştirmesi ve arka uç sunucusuna geçersiz veri gönderilmesini engeller.

React'a Formik과 Yup Kullanarak 이메일을 사용하는 경우 , şifre 와 şifre şifre şifre şifre kalanlarına nasıl doğrulama ekleyeceğimizi anlatacağım.

Adım 1 : React projesi oluşturalım.

npx create-react-app form-validation

Adım 2 : Ardından uygulamaya formik kütüphanesini kuralım

cd form-validation
npm install formik --save

Adım 3 : Ardından uygulamamıza Yup'u dahil edelim

npm install yup --save

Adım 4: Uygulama klasörlerimiz içerisinde components isimli bir klasör daha açalım ve bunun içerisine Signup.js isimli dosya oluşturalım. Daha sonra validations.js isimli bir dosya daha oluşturalım burada form'umuz için gerekli olan validasyonları tanımlayıp Signup.js sayfamızda import edeceğiz.

Adım 5: Signup.js dosyamızda gerekli importları yapalım.

import React from "react";
import { useFormik } from "formik";
import validationSchema from "./validations";

Adım 6: 다음 useFormik ile initialValues ​​, handleSubmit,validationSchema özelliklerini ekleyin.

const { handleChange, handleSubmit, values, handleBlur, errors, touched } =
    useFormik({
      initialValues: {
        email: "",
        password: "",
        passwordConfirm: "",
      },
      onSubmit: (values) => {
        console.log(values);
      },
      validationSchema,
    });

Burada gördüğümüz :

handleChange: yapısında inputlar içerisindeki değişimleri yakalamak için을 형성하십시오.

handleSubmit: 양식 제출 olduğunda kullanacağımız özellik.

값: Form inputlarında girilen değerleri yakalamak için kullandığımız özellik

handleBlur: İnputa tıklandı ve daha sonra tıklanan inputtan çıktığınız an çalışan özellik.

오류: Yup'un formikle uyumlu çalıştığını gösteren özellik ismindende anlaşılacağı gibi inputlardaki error mesajları için kullanılır.

감동: İnputa daha önce touch olmuşmu yani focus yapılmışmı.

validations.js import ettiğimiz isimi fark ettiyseniz useFormik içerisinde kullandığımız validationSchema ile aynı bunun nedeni eğer farklı bir isimle(validations) import etseydik useFormik içerisinde validationSchema=validations şeklinde kullanmamız gerekecekti.

Daha kolay ve pratik olması için ben böyle bir kullanıma gittim bu sizin tercihinize gore değişebilir.

Adım 7: validations.js dosyamızda artık gerekli kontrolleri yazabiliriz.

const validations = yup.object().shape({
  email: yup
    .string()
    .email("Geçerli Bir Email Giriniz !!")
    .required("Zorunlu Alan"), 
  password: yup.string().min(5, "En az 5 karakter giriniz !!").required(),
  passwordConfirm: yup
    .string()
    .oneOf([yup.ref("password")])
    .required(),
});

Burada 이메일은 strgin olduğunu ve geçerli bir email olup olmadığının kontrolü için yup'un email() fonk. kullanıyoruz ve son olarak zorunlu alan olduğu içinde required() kullanıyoruz.

비밀번호와 비밀번호는 문자열에서 이전 비밀번호와 최소 5개의 비밀번호를 확인하고 비밀번호를 확인하고 비밀번호를 확인하세요.

Burada parantez içerisinde yazdığım türkçe uyarılar ise yup'un bize sağladığı default errorlar haricinde kendi görmek istediğiniz errorları oluşturmanız için kullanılan alan olarak düşünebilirz.

Adım 8: Son olarak form yapımızı oluşturalım ve inputların her birine onChange eklemeyi unutmayalım.

<form onSubmit={handleSubmit}>
        <label>Email</label>
        <input
          name="email"
          value={values.email}
          onChange={handleChange}
          onBlur={handleBlur}
        />
        {errors.email && touched.email && (
          <div className="errors">{errors.email}</div>
        )}
        <br />
        <br />
        <label>Password</label>
        <input
          name="password"
          value={values.password}
          onChange={handleChange}
          onBlur={handleBlur}
        />
        {errors.password && touched.password && (
          <div className="errors">{errors.password}</div>
        )}

        <br />
        <br />
        <label>Password Confirm</label>
        <input
          name="passwordConfirm"
          value={values.passwordConfirm}
          onChange={handleChange}
          onBlur={handleBlur}
        />
        {errors.passwordConfirm && touched.passwordConfirm && (
          <div className="errors">{errors.passwordConfirm}</div>
        )}

        <br />
        <br />
        <button type="submit">Submit</button>
      </form>

Uygulamamızda errorlar şu şekilde gözükecektir.



Uygulama Kodları: formik-yup-app

Vaktinizi ayırıp yazımı okuduğunuz için teşekkür ederim. Daha fazla bilgi için iletişime geçebilirsiniz.