Form verilerinizi doğru ve güvenli bir şekilde yönetebilmeniz için doğru validasyon yöntemleri kullanılmalıdır Bu makalede form verileri ve validasyon yönetimini ele alıyoruz Detaylar için hemen okumaya başlayın
Form verilerinin yönetimi ve validasyon işlemleri, web sayfaları ve uygulamaları açısından oldukça önemlidir. Bu alanda işlem yapmak isteyenler için Formik ve React ile form verilerini nasıl yönetileceği ve validasyonlarının nasıl yapılacağı hakkında detaylı bilgiler sunulmaktadır.
Formik kullanarak, initialValues ve onSubmit fonksiyonu kullanılarak form elemanları için verilerin yönetimi yapılabilmektedir. Form elemanlarından gelen veriler, initialValues özelliği sayesinde ön tanımlı olarak ayarlanabilirken, onSubmit fonksiyonu ile de alınan verileri yönetmek mümkündür.
Validasyon işlemleri için ise Yup kütüphanesi kullanılabilir. Form elemanları için validationSchema özelliği kullanılarak validasyon kuralları belirlenir. String, email, şifre ve tarih validasyonlarını yapabilirsiniz. Bunların yanı sıra, custom form elemanları oluşturarak da form özelliklerini özelleştirebilirsiniz.
Formik ile birçok uzantı kütüphanesi kullanılabilir. Örneğin, React Select, React Datepicker gibi kütüphaneleri kullanarak form elemanlarını özelleştirebilirsiniz. Ayrıca hello@dünya.com gibi bir email adresinin validasyonunu yapmak istediğinizde, "Hello, World" gibi çıktılar üretebilirsiniz.
Form Verileri Yönetimi
Formik, React uygulamalarında form verilerini yönetmek için kullanılan bir kütüphanedir. Kurulumu oldukça basittir ve kullanımı da oldukça kolaydır. Form elemanları için initialValues özelliği ile başlangıç değerlerini belirleyebilir, onSubmit fonksiyonunu kullanarak da form verilerini yönetebilirsiniz.
initialValues özelliği, form elemanlarının başlangıç değerlerini belirlemek için kullanılır. Örneğin, bir giriş formunda kullanıcı adı ve şifre için başlangıç değerleri belirleyebilirsiniz. onSubmit fonksiyonu ise form gönderildiğinde çalışacak olan fonksiyondur. Bu fonksiyon sayesinde form verilerini alabilir ve uygun işlemleri yapabilirsiniz.
Form verilerini yönetmek için Formik kullanmak uygulamanızı daha düzenli hale getirebilir ve hataları önlemenize yardımcı olur. İsterseniz, form elemanlarına placeholder özelliği ile kullanıcılar için bilgilendirici mesajlar da ekleyebilirsiniz.
Validasyon Yönetimi
Form elemanlarına yapılan girişlerin doğru ve geçerli olup olmadığını kontrol etmek, kullanıcı deneyimini artırmak için oldukça önemlidir. Form verilerinin doğruluğunu kontrol etmek ve hataları düzeltmek için Formik ve Yup gibi kütüphaneleri kullanmak, bu süreci oldukça kolaylaştıracaktır.
Formik, form verilerini kolayca yönetmek için birçok özellik sunuyor. Bunlar arasında, initialValues özelliği sayesinde form elemanlarının başlangıç değeri belirtilirken, onSubmit fonksiyonu ile form elemanlarındaki verilerin alınması ve sunucuya gönderilmesi sağlanır.
Form elemanlarının hatalı girişlerinin kontrol edilmesi için ise, validationSchema özelliği kullanılmaktadır. Yup kütüphanesi ile birlikte kullanılan validationSchema özelliği sayesinde, form elemanlarına uygunluk kontrolü yapılabilmektedir. Örneğin, form elemanının sadece harf ve sayılar içermesi için string validasyonu, geçerli bir email adresi içermesi için email validasyonu, şifre minimum uzunluğu ve karakter sınırları için şifre validasyonu ve belirli bir formatı takip etmek için tarih validasyonu yapılabilir.
Ayrıca, form elemanlarının validasyon durumunun kontrol edilebildiği onBlur ve onChange gibi özellikler de Formik tarafından sunulmaktadır. Bu özellikler sayesinde, kullanıcı formu doldururken her bir giriş alanında kaydedilmiş verilerin uygunluğu kontrol edilebilir.
Son olarak, Formik ile uyumlu birçok kütüphane bulunmaktadır. Bu kütüphaneler kullanılarak form elemanları daha da özelleştirilebilir. Örneğin, React Select kütüphanesi ile açılır liste elemanları, React Datepicker ile tarih seçimi elemanları özelleştirilebilir.
String Validasyonu
Form verilerinin doğru ve güvenli bir şekilde yönetilmesi, web sitesi veya uygulamanın kullanıcı deneyimini olumlu etkiler. Formik ve React kullanarak form verilerinin nasıl yönetileceği ve validasyonların nasıl yapılacağı hakkında bilgi sahibi olabilirsiniz. Form elemanları için initialValues ve onSubmit fonksiyonlarını kullanarak verileri yönetmek mümkündür.
Ayrıca form elemanlarının doğru girdileri alması gereklidir. Formik ve Yup kullanarak girdi alanları için validasyon kurallarını tanımlayabilirsiniz. Form elemanları için validationSchema özelliğini kullanarak, girdi alanlarının hangi kurala uygun olması gerektiğini belirleyebilirsiniz. String validasyonu yaparken, girdi alanının sadece harf ve sayılardan oluşması gerektiği belirtilmelidir. Uzunluk sınırlaması da isteğe bağlı olarak belirlenebilir.
| Girdi Alanı | String Validasyonu |
|---|---|
| Ad Soyad | Sadece harf ve sayı içermelidir. |
| Şirket Adı | Sadece harf ve sayı içermelidir. En fazla 50 karakter uzunluğunda olabilir. |
| Kullanıcı Adı | Sadece harf ve sayı içermelidir. En az 5, en fazla 20 karakter uzunluğunda olabilir. |
Girdi alanındaki verilerin uygunluğunu kontrol etmek, veri doğruluğu için son derece önemlidir. Bu nedenle form elemanlarının validasyonlarının doğru bir şekilde tanımlanması gerekir.
- Girdi alanı sadece harf ve sayılardan oluşmalıdır.
- Uzunluk sınırlaması isteğe bağlı olarak belirlenebilir.
Form verilerinin yönetimi ve doğruluğu için yapılacak bu işlemler, web sitesi veya uygulamanın kullanıcılara daha iyi bir deneyim sunmasını sağlayacaktır. Formik ve React kullanarak form verilerini kolay ve güvenli bir şekilde yönetmek mümkündür.
Email Validasyonu
Email validasyon işlemi formunuzu güvenli hale getirmek için oldukça önemlidir. Formik ve Yup kullanarak girdi alanına geçerli bir e-posta adresi girilmesini sağlayabilirsiniz. Bunun için form elemanına validationSchema özelliğini ekleyerek gerekli validasyon kurallarını tanımlamalısınız.
Validasyon kuralları içerisinde email verisinin geçerli bir formatta olması için email() fonksiyonunu kullanabilirsiniz. Bu fonksiyon girdi alanı verisinin e-posta formatına uygunluğunu kontrol eder. Girilen veri e-posta formatında değilse hata mesajı gösterir. Kod örneği aşağıdaki gibidir:
import React from 'react';import { Formik, Form, Field, ErrorMessage } from 'formik';import * as Yup from 'yup';const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;const validationSchema = Yup.object().shape({ email: Yup.string().matches(emailRegex, 'Geçerli bir e-posta adresi girin').required('E-posta adresi boş bırakılamaz'),});function EmailForm() { return ( { // form submit functionality }} > {({ errors, touched }) => ( )} );}Bu örnekte validationSchema özelliği kullanılarak email() fonksiyonu girdi alanındaki verinin e-posta formatında olup olmadığını kontrol eder. Veri e-posta formatında değilse hata mesajı gösterilir. Field elemanının type özelliğine email tipi verilerek kullanıcının sadece e-posta formatında veri girmesi sağlanır.
Şifre Validasyonu
Form verilerinin doğru ve güvenli bir şekilde tutulması için gerekli olan bir diğer validasyon türü ise şifre validasyonudur. Şifre en az 8 karakter uzunluğunda olmalıdır ve hem büyük hem de küçük harf ile sayı içermelidir. Bu validasyon işlemini gerçekleştirmek için Formik ile Yup kütüphanesini birlikte kullanabilirsiniz.
Yup kütüphanesinin string() ve min() methodlarını kullanarak, şifre girdisi için belirtilen kriterleri validasyon kuralları olarak tanımlayabilirsiniz. Aşağıdaki örnek kodda, şifre girdisi password alanlarına sahip bir form elemanı için gerekli olan doğrulama kuralları tanımlanmıştır:
import { Formik, Field } from 'formik';import * as Yup from 'yup';const validationSchema = Yup.object().shape({ password: Yup.string() .min(8, 'Şifreniz en az 8 karakter olmalıdır') .matches( /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})/, "Şifreniz en az 8 karakter uzunluğunda olmalıdır ve hem büyük hem de küçük harf ile sayı içermelidir." )});<Formik initialValues={{ password: '' }} validationSchema={validationSchema} onSubmit={values => { // Form submit işlemleri }}> {({ errors, touched }) => ( <form> <Field name="password" type="password" placeholder="Şifrenizi girin" className={errors.password && touched.password ? 'is-invalid' : ''} /> {errors.password && touched.password ? ( <div className="invalid-feedback">{errors.password}</div> ) : null} <button type="submit">Gönder</button> </form> )}</Formik>Bu şekilde, form elemanlarının doğru bir şekilde validasyon işlemi gerçekleştirilebilir ve kullanıcılar tarafından girilen verilerin doğru bir şekilde tutulması sağlanabilir.
Tarih Validasyonu
hemen her formda karşılaşılan tarih alanlarında da validasyon işlemleri yapmak gerekebilir. Formik ve Yup kullanarak tarih validasyonu işlemleri de oldukça basit hale getirilir. Girdi alanına sadece tarih formatında veri girişi sağlamak için validationSchema özelliği kullanılabilir.
Örneğin, dd/mm/yyyy formatında tarih girişi yapılması gerektiğinde, validation kuralları aşağıdaki gibi tanımlanır:
```import * as Yup from 'yup';
...
const validationSchema = Yup.object().shape({ ...
// tarih alanı validasyonu date: Yup.date() .nullable() .required('Lütfen bir tarih giriniz') .transform(parseDate) .test('isValid', 'Geçersiz bir tarih formatı', (date) => date instanceof Date && !isNaN(date) ),});
```
Yukarıdaki örnekte, Yup.validate() yöntemi kullanılarak tarih validasyonu işlemleri gerçekleştirildi. Tarih alanı şartlarını belirleyerek kullanıcının geçersiz bir tarih girme riskini ortadan kaldırabilirsiniz. Ayrıca, tarih alanında da benzersiz validasyon teknikleri uygulanabilir.
dd/mm/yyyyTarih validasyonu, form verilerinin doğru biçimde girilmesi için oldukça önemlidir. Formik ve Yup, tarih formatının doğru olup olmadığını kontrol edebilen validationSchema özelliğini kullanır. Tarih formatı hn/ay/yıl şeklinde de olabilir veya yıl/ay/hn şeklinde de olabilir. Validasyon kuralları, input alanı için tanımlanabilir ve invalid uyarısı ve hata mesajı gösterilebilir. Ayrıca, form elemanlarından biri olarak Datepicker bile kullanılabilir. Bu sayede, kullanıcılar girdikleri tarihleri kolayca seçebilirler ve validasyon hatalarından kaçınırlar.
formatında olabilir.Girdi alanının doğru bir tarih formatında olması gerektiğinde formik ve yup kullanarak bu işlemi kolaylıkla yapabilirsiniz. Form elemanı için oluşturulan validationSchema özelliği sayesinde girdi alanının doğru formatta olup olmadığını kontrol edebilirsiniz. Örneğin, "dd/mm/yyyy" formatında bir tarih girilmesi gerekiyorsa, doğru formatta girilmediğinde uygun bir hata mesajı verir. Bu sayede yanlış formatlarda girdi alınmamasını sağlayarak, veri uyumluluğunu arttırır.
Başka Özellikler
Formik, elemanların durumlarını takip etmek için birkaç özellik sunar. Bunlar, onBlur, onFocus, onChange gibi özelliklerdir. Bunlar sayesinde form elemanlarındaki durumları yönetmek daha kolay hale gelir. Örneğin, onBlur özelliği kullanarak, kullanıcının bir form elemanından ayrıldığı andaki durumlu takip edebilirsiniz.
Ayrıca, Formik kullanarak form elemanlarının validasyon durumlarını da kontrol edebilirsiniz. Bu sayede, her eleman için ayrı ayrı kontrol etmek yerine, hepsini tek bir yerden kontrol edebilirsiniz. Validasyon işlemi, elemanlar için `validationSchema` özelliği kullanılarak tanımlanır.
Form elemanlarını özelleştirmek için, `render` veya `component` özelliğini kullanabilirsiniz. Bu özellikler sayesinde, her form elemanı için farklı özellikler belirleyebilirsiniz. Örneğin, bir açılır liste elemanını özelleştirerek, farklı bir görünüm elde edebilirsiniz.
Formik ayrıca, uyumlu olduğu kütüphanelerle birlikte kullanılarak, form elemanlarını daha da özelleştirebilir. Örneğin, `React Select` veya `React Datepicker` kullanarak form elemanlarını farklı bir görünüm kazandırabilirsiniz.
Sonuç olarak, Formik'in sunduğu özellikler sayesinde form elemanlarını yönetmek ve validasyon işlemlerini kontrol etmek çok daha kolay hale gelir. Form elemanlarını özelleştirmek için ise, `render` veya `component` özelliği kullanarak farklı görünümler elde edebilirsiniz. Ayrıca, uyumlu kütüphanelerle birlikte kullanarak, form elemanlarını daha da özelleştirebilirsiniz.
Custom Form Elemanları
Formik, form elemanlarını özelleştirmenize olanak sağlayarak, kullanıcılara daha iyi bir deneyim sunar. Form elemanları, açılır liste, radyo butonları ya da checkboxlar gibi farklı gereksinimleri karşılamak için çok çeşitli şekillerde yapılandırılabilir.
Örneğin, açılır liste kullanarak, kullanıcılara birçok seçenek arasından seçim yapma olanağı sunabilirsiniz. Bu seçenekler, statik olarak oluşturulabileceği gibi, dinamik şekilde API'den de alınabilir.
Radyo butonları, kullanıcılara bir seçenek listesi sunarak, bir seçeneği seçmelerini gerektirir. Bu özellik, bir grup eleman arasında seçim yapma gerektiği durumlarda kullanılabilir.
Checkboxlar, kullanıcılara bir onaylama kutusu sunar ve işaretlenmesi gereken seçenekleri tanımlayan bir metin içerebilir.
Bunların yanı sıra, Formik ile birçok özelleştirme yapabileceğiniz uzantı kütüphanesi mevcuttur. Bu kütüphaneleri kullanarak form elemanlarınızı daha işlevsel bir hale getirebilirsiniz.
Formik ile Uzantı Kütüphaneleri Kullanımı
Formik, React ile uyumlu bir kütüphane olarak form yönetimini oldukça kolaylaştırır. Ancak, bazı özel durumlarda form elemanlarının özelleştirilmesi gerekebilir. Bu durumlarda Formik ile uyumlu bazı kütüphaneler kullanabilirsiniz.
React Select, form elemanları için seçeneklerin açılır bir liste halinde sunulmasını sağlar. Bu, kullanıcının seçim yapmasını kolaylaştırır ve hata riskini azaltır. Örneğin, kullanıcının ülke, şehir veya cinsiyet seçimlerini yapması gereken bir formda, React Select kullanarak seçenekleri açılır liste şeklinde sunabilirsiniz.
React Datepicker, form elemanları için tarih seçimini kolaylaştırır. Bu, kullanıcının doğum tarihi, randevu tarihi gibi bilgileri girmesini sağlar. Ayrıca, doğru tarih formatına uyum sağlayarak validasyon işlemini de kolaylaştırır.
Bunların yanı sıra, Formik ile uyumlu birçok kütüphane mevcuttur ve ihtiyacınız olan özelliklere göre kullanabilirsiniz. Bu kütüphaneler sizin için kod tekrarını azaltacak ve form yönetimini oldukça kolaylaştıracaktır.