FormKit ile Vue3'te Yeniden Kullanılabilir Formlar Nasıl Oluşturulur

Formlar, kullanıcıların uygulamanızla etkileşime geçmesi ve hesap oluşturma, ödeme işleme ve bilgi toplama gibi görevler için gerekli verileri sağlaması için bir ağ geçididir. Ancak form oluşturmak, zaman alıcı ve hataya açık kapsamlı standart kod gerektiren göz korkutucu bir görev olabilir.

FormKit, ortak kod ihtiyacını ortadan kaldıran önceden oluşturulmuş bileşenler sağlayarak bir çözüm sunar. İşte nasıl kullanılacağı.

FormKit Nedir?

Form Kiti yüksek kaliteli, üretime hazır formlar oluşturma sürecini basitleştirmek için tasarlanmış, Vue 3 için özel olarak geliştirilmiş açık kaynaklı bir form oluşturma çerçevesidir. Popüler olanın geliştirilmiş bir versiyonudur. Vue formüle 25'in üzerinde özelleştirilebilir ve erişilebilir giriş seçeneğinin yanı sıra önceden tanımlanmış bir dizi doğrulama kuralı sağlar.

FormKit ayrıca JSON uyumlu dinamik şemalar aracılığıyla formlar oluşturma yeteneği sunarak karmaşık formları hızlı bir şekilde oluşturmayı kolaylaştırır. Ek olarak, FormKit'in Discord'da destek sağlayan ve kullanıcılar arasında işbirliğini geliştiren aktif bir topluluğu vardır. Kapsamlı özellikleri ve destek sistemi ile FormKit, Vue 3 projeleri için formlar oluşturmak isteyen geliştiriciler için güvenilir ve verimli bir araçtır.

FormKit Çerçevesinin Özellikleri

FormKit'te çok çeşitli form oluşturma özellikleri bulacaksınız.

1. Tek Bileşenli API

FormKit'in ilginç özelliklerinden biri, tek bileşenli API'sidir: bileşen. Tüm giriş türlerine erişmenizi sağlar. Bu, yerel HTML öğelerini kullanmak yerine form öğelerinin oluşturulmasına doğrudan ve kolay erişim sağlar.

2. Önceden Tanımlanmış Doğrulama Kuralları

Formkit, form doğrulama işlemlerini basitleştirir doğrulama pervanesini kullanarak girdilere doğrudan bir dizi kural uygulamanıza izin vererek. Tercihinize bağlı olarak seçebileceğiniz 30'dan fazla farklı önceden tanımlanmış kurala sahiptir. Alternatif olarak, karmaşık kısıtlamalar için genel olarak veya özel olarak girişte kayıtlı özel kurallar oluşturabilirsiniz.

3. Özelleştirilebilir Şekillendirme Seçenekleri

FormKit, varsayılan stil seçenekleri olmadan gelir, ancak isteğe bağlı bir temel temaya sahiptir - Genesis. Bunu ayrı olarak yüklemeniz gerekir.

İlk önce kurulumu yaparak @formkit/temalar paket.

npm kurulum @formkit/themes

Ardından projenize aktarın

içe aktarmak"@formkit/themes/genesis"

Diğer stil seçenekleri, kendi stillerinizi ve sınıflarınızı FormKit'in sağladığı işaretlemeye uygulamanıza izin veren özel sınıfların kullanımını içerir.

4. Şema Oluşturma

FormKit'in şema oluşturma özelliği, form alanları oluşturma sürecini basitleştiren mükemmel bir özelliktir. Şema, her nesnenin bir HTML öğesini temsil ettiği ve yalnızca JSON biçiminde temsil edebilirsiniz.

Şema dizisi, HTML öğeleri, bileşenler veya metin düğümleri gibi çeşitli öğelere karşılık gelen FormKit düğüm nesnelerinden oluşur. Bu nesneler, önceden var olan Vue değişkenlerine başvurabilir ve herhangi bir biçimlendirmeyi veya bileşeni düzenlenebilir öznitelikler ve desteklerle işleyebilir, bu da onu formları oluşturmak ve özelleştirmek için verimli bir yöntem haline getirir. Varsayılan olarak, küresel olarak kayıtlı değildir, bu nedenle içe aktarmanız gerekir.

içe aktarmak { FormKitSchema } itibaren"@formkit/vue"

FormKit'i Vue3'e entegre etme

FormKit'i bir Vue 3 uygulamasında kullanmaya başlamak için önce onu projenize kurun. Bu bölüm, sıfırdan yeni bir vue uygulaması kullanan bir demo içerecektir.

FormKit'i Kullanmanın Ön Koşulları

Başlamadan önce, aşağıdakilere sahip olduğunuzdan emin olun:

• Temel Vue ve JavaScript anlayışı
• Node.js ve npm bilgisayarınızda kurulu

Hızlandıktan sonra, ilk uygulamanızı oluşturmaya hazırsınız.

Yeni Bir Vue Uygulaması Oluşturma

Öncelikle, yeni bir Vue uygulamasını başlatmak için terminalinizde aşağıdaki komutu çalıştırın:

npm başlatma vue@en sonuncu

Ardından istemde belirtilen adımları tercihinize göre uygulayın. Proje tamamen kurulduktan sonra FormKit'i uygulamaya yüklemeye devam edin.

npm kurulum @formkit/vue 

Sonraki, içinde ana.js dosya.

içe aktarmak { Uygulama oluştur } itibaren'vücut'
içe aktarmak'./style.css'
içe aktarmak Uygulama itibaren'./App.vue'
// Formkit'i kur
içe aktarmak { eklenti, defaultConfig } itibaren"@formkit/vue";
// Genesis temasını içe aktar
içe aktarmak"@formkit/temalar/genesis";
createApp (Uygulama).use(Eklenti, defaultConfig).mount('#uygulama')

paket @formkit/vue sorunsuz kurulum için bir Vue eklentisi ve varsayılan olarak yapılandırılmış bir kurulumla birlikte gelir. Kurulumu tamamladıktan sonra, hepsini dahil etmeye hazırsınız. Vue 3 uygulamanıza bileşen. Ayrıca, daha önce belirtildiği gibi Genesis temaları için kurulum ekleyebilirsiniz.

FormKit ile Yeniden Kullanılabilir Formlar Oluşturma

Bu bölüm, basit bir kayıt formu oluşturarak işlevsel ve özelleştirilebilir bir form oluşturmak için FormKit'in nasıl kullanılacağını gösterir.

Daha iyi bir kod yapısı için bu bileşen için ayrı bir dosya oluşturmak iyidir: KayıtForm.vue

İlk olarak, bu formatı kullanarak giriş öğesini tanımlayın

tip="metin"
 etiket="İlk adı"
 yer tutucu="Abiola"
 doğrulama="gerekli|uzunluk: 4"
yardım = "Minimum 4 karakter giriniz"
<Form Kiti/>

Bu kod, bir metin türü kullanarak bir metin girişi oluşturmak için FormKit'in nasıl kullanılacağını gösterir. Doğrulama pervanesi, "|" dikey çizgi simgesini kullanarak kuralları ayırır. Yardım pervanesi, giriş öğesinin hemen altına küçük bir metin yerleştirir.

Ayrıca, aşağıdakiler gibi diğer giriş türlerini de keşfedebilirsiniz.

tip="metin"
 etiket="Soy isim"
 yer tutucu="Ester"
 doğrulama="gerekli|uzunluk: 4"
yardım = "Minimum 4 karakter giriniz"
 />
tip="e-posta"
 etiket="E-posta Adresi"
 önek simgesi="e-posta"
 doğrulama="gerekli|e-posta"
 yer tutucu="[email protected]"
 />
tip="tarih"
 etiket="Doğum tarihi"
yardım="Doğum tarihinizi GG/AA/YYYY biçiminde girin"
 doğrulama="gerekli"
 />
 v-modeli="değer"
tip="radyo"
 etiket="Cinsiyet"
 :seçenekler="['Erkek kadın']"
yardım="Cinsiyetinizi seçiniz"
 />
tip="dosya"
 etiket="Fotoğrafını yükle"
 kabul et=".jpg,.png,.jpeg"
yardım="Resminizi seçin"
 />

Kod, diğer girdi öğelerinden bazılarının nasıl kullanılacağını ve doğrulama kurallarının nasıl ayarlanacağını gösterir.

FormKit, tüm giriş öğelerini saran "form" adlı bir tür prop içerir. Formun doğrulama durumunu izler ve herhangi bir girişin geçersiz olması durumunda kullanıcıların formu göndermesini engeller. Ek olarak, otomatik olarak bir gönder düğmesi oluşturur.

tip="biçim"
 biçim-sınıf="dış kap"
 gönder etiketi="Kayıt olmak"
@göndermek="Kayıt olmak">

Her şeyi bir araya getirmek, aşağıdaki resimde gösterildiği gibi eksiksiz formu sunar.

FormKit'in Şemasını Kullanarak Form Oluşturma

JSON şemaları ile, daha önce yapıldığı gibi, giriş öğelerine benzer formlar oluşturmak mümkündür. Formu oluşturmak için şema dizinizi bileşenini kullanarak şema pervane

Şema Dizisi

sabit şema = [
 {
 $formkit: "e-posta",
 isim: "e-posta",
 etiket: "E-posta Adresi",
 Yer tutucu: "E-postanızı giriniz",
 doğrulama: "gerekli|e-posta",
 },
 {
 $formkit: 'şifre',
 isim: 'şifre',
 etiket: 'Şifre',
 doğrulama: 'gerekli|uzunluk: 5,16'
 },
 {
 $formkit: 'şifre',
 isim: 'şifre onaylama',
 etiket: 'Şifreyi Onayla',
 doğrulama: "gerekli|onayla",
 doğrulama etiketi: 'Şifre onayı',
 },
 ];

Daha sonra FormKit bileşenindeki pervaneye iletilir.

"biçim" biçim-sınıf="dış kap"gönder etiketi="Giriş yapmak">
<FormKitŞeması:şema="şema" />
Form Kiti>

Bu üretilen nihai çıktıdır:

Vue3'te Form Oluşturmaya Daha Hızlı Bir Yaklaşım

FormKit, Vue 3'te form oluşturmaya daha hızlı ve daha verimli bir yaklaşım sağlar. FormKit ile sıfırdan standart şablonlar oluşturma gereksinimini ortadan kaldırarak doğrudan mantığı uygulamaya odaklanmanıza olanak tanır. Bu aerodinamik süreç yalnızca zamandan tasarruf sağlamakla kalmaz, aynı zamanda üretkenliği de artırır.

Ayrıca FormKit, koşullu işleme yoluyla formların dinamik olarak işlenmesini sağlar. Bu özellik, kullanıcılar için form öğelerinin belirli koşullara göre görüntülendiği veya gizlendiği etkileşimli ve kullanıcı dostu arayüzler oluşturmanıza olanak tanır.