Yalnızca web sayfasının size bir veya daha fazla alanın geçersiz olduğunu söyleyen bir hata mesajı vermesi için bir form göndermeyi hiç denediniz mi? Öyleyse, form doğrulamasını deneyimlediniz demektir.

Doğrulama genellikle temiz, kullanılabilir veriler elde etmek için gereklidir. E-posta adreslerinden tarihlere kadar, doğru olması gerekiyorsa dikkatlice kontrol etmeniz gerekir.

Form Doğrulama Nedir?

Form doğrulama, bir kullanıcı tarafından bir forma girilen verilerin doğru ve eksiksiz olmasını sağlama işlemidir. Bunu, gerekli öznitelik gibi yerleşik HTML özelliklerini kullanarak istemci tarafında yapabilirsiniz. ayrıca yapabilirsin JavaScript kullanarak istemcide doğrulamave süreci kolaylaştırmaya yardımcı olacak harici Next.js kitaplıkları vardır.

Form doğrulamanın gerekli olmasının birkaç nedeni vardır. İlk olarak, bir forma girilen verilerin eksiksiz ve doğru olduğundan emin olunmasına yardımcı olur. Bu önemlidir, çünkü uygulamanız verileri bir sunucuya veya veritabanına gönderirken hataların önlenmesine yardımcı olur.

instagram viewer

İkincisi, form doğrulama, bir kullanıcı geçersiz veri girdiğinde geri bildirim sağlayarak formun kullanılabilirliğini geliştirmeye yardımcı olabilir. Bu, kullanıcı tarafında hayal kırıklığı ve kafa karışıklığının önlenmesine yardımcı olabilir.

Son olarak, form doğrulama, yalnızca geçerli verileri göndermesini sağlayarak bir formun güvenliğini artırmaya yardımcı olabilir.

Next.js'de Formlar Nasıl Doğrulanır?

Next.js'de formları doğrulamanın iki yolu vardır: yerleşik yöntemleri kullanmak veya harici kitaplıkları kullanmak.

Yerleşik Yöntemleri Kullanma

HTML, formları doğrulamak için çeşitli yöntemler sağlar, bunlardan en yaygın olanı gerekli bağlanmak. Bu, bir alanın boş olmamasını sağlar. Niteliği oluşturduğunuz giriş etiketlerine dahil ederek, bu yöntemi Next.js uygulamanızdan kullanabilirsiniz. HTML ayrıca bir model bağlanmak. Bunu bir ile birlikte kullanabilirsiniz daha karmaşık doğrulama için normal ifade.

Bu örnek, iki alanlı bir form içerir: ad ve e-posta. Ad alanı zorunludur ve e-posta alanı normal bir ifadeyle eşleşmelidir.

içe aktarmak Tepki itibaren 'tepki'
sınıfBenim FormumuzanırTepki.Bileşen{
 render() {
geri dönmek (
<biçim >
<etiket>
 İsim:
<giriş türü="metin" isim="isim" gerekli />
</label>
<etiket>
 E-posta:
<giriş türü="e-posta" isim="e-posta"
 desen="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
</label>
<giriş türü="göndermek" değer="Göndermek" />
</form>
 )
 }
}
ihracatvarsayılan Benim Formum

Bu kod, React kitaplığını içe aktarır, ardından MyForm adlı bir sınıf oluşturur ve bir form öğesi oluşturur. Form öğesinin içinde iki etiket öğesi vardır.

İlk etiket öğesi, gerekli bir metin giriş alanı içerir. İkinci etiket öğesi, desen özelliğinde normal ifade içeren bir e-posta giriş alanı içerir.

Son olarak, bir gönder düğmeniz var. Bir kullanıcı formu gönderdiğinde, gerekli öznitelik kullanıcının ad alanını doldurmasını sağlar. E-posta alanının desen özelliği, e-postanın belirtilen biçimde olmasını sağlar. Bu koşullardan herhangi biri başarısız olursa, form gönderilmez.

Yerleşik yöntemleri kullanmanın birkaç dezavantajı vardır. İlk olarak, oluşturduğunuz tüm farklı doğrulama kurallarını takip etmek zor olabilir. İkincisi, çok fazla alanınız varsa, her birine gerekli özelliği eklemek sıkıcı olabilir. Son olarak, yerleşik yöntemler yalnızca temel doğrulama sağlar. Daha karmaşık doğrulama yapmak istiyorsanız harici bir kitaplık kullanmanız gerekecektir.

Harici Kitaplık Kullanma

Yerleşik yöntemlere ek olarak, formları doğrulamak için kullanabileceğiniz birçok dış kitaplık da vardır. Bazı popüler kütüphaneler arasında Formik, reaksiyon kancası formu ve Yup bulunur.

Harici bir kitaplığı kullanmak için önce onu yüklemeniz gerekir. Örneğin, Formik'i yüklemek için aşağıdaki komutu çalıştırın:

npm düzenlemek formik

Kitaplığı yükledikten sonra bileşeninize aktarabilir ve formunuzu doğrulamak için kullanabilirsiniz:

içe aktarmak Tepki itibaren 'tepki'
içe aktarmak { Formik, Form, Alan } itibaren 'formik'
sabit BenimForm = () => (
<formik
 ilkDeğerler={{ ad: '', e-posta: '' }}
 valide={değerler => {
sabit hatalar = {}
eğer (!değerler.isim) {
 hatalar.isim = 'Gerekli'
 }
eğer (!değerler.e-posta) {
 hatalar.e-posta = 'Gerekli'
 } başkaeğer (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test (değerler.e-posta)
 ) {
 hatalar.e-posta = 'Geçersiz e-posta adresi'
 }
geri dönmek hatalar
 }}
 onSubmit={(değerler, { setSubmitting }) => {
 setTimeout(() => {
 uyarı(JSON.stringify (değerler, hükümsüz, 2))
 gönderiliyor(YANLIŞ)
 }, 400)
 }}
>
 {({ Gönderiliyor }) => (
<Biçim>
<alan türü="metin" isim="isim" />
<alan türü="e-posta" isim="e-posta" />
<düğme tipi="göndermek" devre dışı bırakıldı={isSubmitting}>
 Göndermek
</button>
</Form>
 )}
</Formik>
)
ihracatvarsayılan Benim Formum

Burada, önce içe aktarırsınız formik, Biçim, Ve Alan Formik kitaplığından bileşenler. Ardından, MyForm adlı bir bileşen oluşturun. Bu bileşen, iki alanı olan bir form oluşturur: ad ve e-posta.

InitialValues ​​prop, form alanlarının başlangıç ​​değerlerini ayarlar. Bu durumda, ad ve e-posta alanlarının ikisi de boş dizelerdir.

valide prop, form alanları için doğrulama kurallarını ayarlar. Bu durumda ad alanı zorunludur ve e-posta alanı normal bir ifadeyle eşleşmelidir.

onSubmit prop, kullanıcı formu gönderdiğinde React'in çağıracağı işlevi ayarlar. Bu durumda işlev, form alanlarının değerlerini görüntüleyecek bir uyarıdır.

isSubmitting prop, formun şu anda gönderilip gönderilmediğini belirler. Bu durumda, onu false olarak ayarlarsınız.

Son olarak, Formik'in Form bileşenini kullanarak formu işleyin.

Next.js'de Harici Kitaplıklar Kullanmanın Yararları

Next.js'de formları doğrulamak için Formik gibi harici bir kitaplık kullanmanın çeşitli avantajları vardır. Bunun bir avantajı, kullanıcıya hata mesajlarını göstermenin çok daha kolay olmasıdır. Örneğin, zorunlu bir alan doldurulmazsa, Formik otomatik olarak önerilen düzeltmeyi içeren bir hata mesajı görüntüler.

Diğer bir fayda da, Formik'in daha karmaşık doğrulama kurallarını işleyebilmesidir. Örneğin, iki alanın aynı olduğunu (parola ve parola onay alanı gibi) doğrulamak için Formik'i kullanabilirsiniz.

Son olarak Formik, form verilerini bir sunucuya göndermeyi kolaylaştırır. Örneğin, form verilerini bir API'ye göndermek için Formik'i kullanabilirsiniz.

Formları Kullanarak Kullanıcı Etkileşimini Artırın

Kullanıcı etkileşimini artırmak için formları kullanabilirsiniz. Bir kullanıcı geçersiz veri girdiğinde geri bildirimde bulunarak hayal kırıklığı ve kafa karışıklığının önlenmesine yardımcı olabilirsiniz.

Harici kitaplıkları kullanarak, otomatik tamamlama ve koşullu alanlar gibi özellikler ekleyebilirsiniz. Bunlar, formlarınızı daha da kullanıcı dostu yapmanıza yardımcı olabilir. Doğru kullanıldığında formlar, kullanıcı katılımını artırmanıza ve ihtiyacınız olan verileri toplamanıza yardımcı olacak güçlü bir araç olabilir.

Doğrulamanın yanı sıra Next.js, kullanıcı katılımını artırmak için kullanabileceğiniz birçok özelliğe sahiptir.