{"id":34279,"date":"2025-11-14T06:40:50","date_gmt":"2025-11-14T03:40:50","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=34279"},"modified":"2025-11-14T06:40:50","modified_gmt":"2025-11-14T03:40:50","slug":"vuetify-form-alani-dogrulamasini-genisletmek","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vuetify-form-alani-dogrulamasini-genisletmek\/","title":{"rendered":"Vuetify Form Alan\u0131 Do\u011frulamas\u0131n\u0131 Geni\u015fletmek"},"content":{"rendered":"<p><body><\/p>\n<h2>Vuetify Form Alan\u0131 Do\u011frulamas\u0131n\u0131 Geni\u015fletmek<\/h2>\n<h3>Giri\u015f<\/h3>\n<p>Web uygulamalar\u0131n\u0131n temel ta\u015flar\u0131ndan biri olan formlar, kullan\u0131c\u0131dan veri toplaman\u0131n ve bu verileri i\u015flemenin ana aray\u00fcz\u00fcn\u00fc olu\u015fturur. Kullan\u0131c\u0131dan al\u0131nan verilerin do\u011fru, tutarl\u0131 ve beklenen formatta olmas\u0131, uygulaman\u0131n g\u00fcvenilirli\u011fi ve kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. Bu noktada, form do\u011frulama (validation) devreye girer. Vuetify, modern ve estetik kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in kullan\u0131lan pop\u00fcler bir Vue.js UI framework&#8217;\u00fcd\u00fcr. Vuetify, form bile\u015fenleriyle birlikte g\u00fc\u00e7l\u00fc ve esnek bir do\u011frulama mekanizmas\u0131 sunar. Ancak, her projenin kendine \u00f6zg\u00fc ihtiya\u00e7lar\u0131 oldu\u011fundan, Vuetify&#8217;\u0131n varsay\u0131lan do\u011frulama yeteneklerini geni\u015fletmek ve \u00f6zelle\u015ftirmek \u00e7o\u011fu zaman ka\u00e7\u0131n\u0131lmaz hale gelir.<\/p>\n<p>Bu makale, Vuetify form alan\u0131 do\u011frulamas\u0131n\u0131n temellerini anlamaktan ba\u015flayarak, \u00f6zel do\u011frulama kurallar\u0131 olu\u015fturma, asenkron do\u011frulama teknikleri, karma\u015f\u0131k senaryolar i\u00e7in geli\u015fmi\u015f yakla\u015f\u0131mlar ve hata mesaj\u0131 \u00f6zelle\u015ftirmeleri gibi konular\u0131 detayl\u0131 bir \u015fekilde ele alacakt\u0131r. Amac\u0131m\u0131z, geli\u015ftiricilere Vuetify&#8217;\u0131n do\u011frulama g\u00fcc\u00fcn\u00fc sonuna kadar kullanmalar\u0131 ve uygulamalar\u0131n\u0131n formlar\u0131n\u0131 daha sa\u011flam, kullan\u0131c\u0131 dostu ve i\u015f mant\u0131\u011f\u0131na uygun hale getirmeleri i\u00e7in kapsaml\u0131 bir rehber sunmakt\u0131r.<\/p>\n<h3>Vuetify&#8217;da Temel Form Do\u011frulama<\/h3>\n<p>Vuetify&#8217;da form do\u011frulama, <code>v-form<\/code> bile\u015feni ve \u00e7e\u015fitli form giri\u015f bile\u015fenlerinin (\u00f6rne\u011fin, <code>v-text-field<\/code>, <code>v-select<\/code>, <code>v-textarea<\/code>) <code>rules<\/code> prop&#8217;u arac\u0131l\u0131\u011f\u0131yla ger\u00e7ekle\u015ftirilir. <code>v-form<\/code> bile\u015feni, t\u00fcm formun ge\u00e7erlilik durumunu y\u00f6netmek i\u00e7in merkezi bir rol oynar.<\/p>\n<h4><code>v-form<\/code> Bile\u015feni ve Rol\u00fc<\/h4>\n<p><code>v-form<\/code> bile\u015feni, i\u00e7erdi\u011fi t\u00fcm form elemanlar\u0131n\u0131n ge\u00e7erlili\u011fini izler ve bir b\u00fct\u00fcn olarak formun ge\u00e7erli olup olmad\u0131\u011f\u0131n\u0131 anlamam\u0131z\u0131 sa\u011flar. Bu bile\u015fen, formun g\u00f6nderilmesi gibi eylemlerden \u00f6nce do\u011frulama yap\u0131lmas\u0131na olanak tan\u0131r.<\/p>\n<pre><code class=\"language-html\"><template>\n  <v-form ref=\"form\" v-model=\"valid\" lazy-validation>\n    <v-text-field\n      v-model=\"name\"\n      :rules=\"nameRules\"\n      label=\"Ad\u0131n\u0131z Soyad\u0131n\u0131z\"\n      required\n    ><\/v-text-field>\n\n    <v-text-field\n      v-model=\"email\"\n      :rules=\"emailRules\"\n      label=\"E-posta\"\n      required\n    ><\/v-text-field>\n\n    <v-btn\n      :disabled=\"!valid\"\n      color=\"success\"\n      class=\"mr-4\"\n      @click=\"validate\"\n    >\n      G\u00f6nder\n    <\/v-btn>\n\n    <v-btn\n      color=\"error\"\n      class=\"mr-4\"\n      @click=\"reset\"\n    >\n      S\u0131f\u0131rla\n    <\/v-btn>\n\n    <v-btn\n      color=\"warning\"\n      @click=\"resetValidation\"\n    >\n      Do\u011frulamay\u0131 S\u0131f\u0131rla\n    <\/v-btn>\n  <\/v-form>\n<\/template>\n\n<script>\nexport default {\n  data: () => ({\n    valid: true,\n    name: '',\n    nameRules: [\n      v => !!v || 'Ad\u0131n\u0131z soyad\u0131n\u0131z zorunludur',\n      v => (v && v.length >= 3) || 'Ad\u0131n\u0131z soyad\u0131n\u0131z en az 3 karakter olmal\u0131d\u0131r',\n    ],\n    email: '',\n    emailRules: [\n      v => !!v || 'E-posta zorunludur',\n      v => \/.+@.+\\..+\/.test(v) || 'Ge\u00e7erli bir e-posta adresi giriniz',\n    ],\n  }),\n\n  methods: {\n    validate () {\n      this.$refs.form.validate()\n    },\n    reset () {\n      this.$refs.form.reset()\n    },\n    resetValidation () {\n      this.$refs.form.resetValidation()\n    },\n  },\n}\n<\/script><\/code><\/pre>\n<p>Yukar\u0131daki \u00f6rnekte:<br \/>\n*   <code>ref=\"form\"<\/code>: <code>v-form<\/code> bile\u015fenine referans verir, b\u00f6ylece bile\u015fenin metotlar\u0131na eri\u015febiliriz.<br \/>\n*   <code>v-model=\"valid\"<\/code>: Formun genel ge\u00e7erlilik durumunu izleyen bir boolean de\u011feri ba\u011flar. Formdaki t\u00fcm alanlar ge\u00e7erliyse <code>valid<\/code> <code>true<\/code> olur.<br \/>\n*   <code>lazy-validation<\/code>: Varsay\u0131lan olarak, bir form alan\u0131 ilk odakland\u0131\u011f\u0131nda veya de\u011feri de\u011fi\u015fti\u011finde do\u011frulan\u0131r. <code>lazy-validation<\/code> prop&#8217;u, formun yaln\u0131zca <code>validate()<\/code> metodu \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda veya bir <code>v-btn<\/code> gibi bir bile\u015fen taraf\u0131ndan tetiklendi\u011finde do\u011frulanmas\u0131n\u0131 sa\u011flar.<\/p>\n<h4><code>rules<\/code> Prop&#8217;u ve Kullan\u0131m\u0131<\/h4>\n<p>Her bir <code>v-text-field<\/code> veya benzeri giri\u015f bile\u015feni, bir dizi do\u011frulama kural\u0131 i\u00e7eren <code>rules<\/code> prop&#8217;unu kabul eder. Bu kurallar, giri\u015fin ge\u00e7erli olup olmad\u0131\u011f\u0131n\u0131 belirleyen fonksiyonlard\u0131r.<\/p>\n<p>Bir kural fonksiyonu \u015fu yap\u0131y\u0131 takip eder: <code>value => boolean | string<\/code>.<br \/>\n*   E\u011fer kural ge\u00e7erliyse <code>true<\/code> d\u00f6ner.<br \/>\n*   E\u011fer kural ge\u00e7ersizse, hata mesaj\u0131n\u0131 temsil eden bir <code>string<\/code> d\u00f6ner.<\/p>\n<p>Yukar\u0131daki \u00f6rnekte <code>nameRules<\/code> ve <code>emailRules<\/code> dizileri basit do\u011frulama kurallar\u0131n\u0131 g\u00f6stermektedir:<br \/>\n*   <code>v => !!v || '...'<\/code>: Giri\u015fin bo\u015f olup olmad\u0131\u011f\u0131n\u0131 kontrol eder (required kural\u0131). <code>!!v<\/code> ifadesi, <code>v<\/code>&#8216;nin truthy (bo\u015f olmayan) bir de\u011fer olup olmad\u0131\u011f\u0131n\u0131 kontrol eder.<br \/>\n*   <code>v => (v && v.length >= 3) || '...'<\/code>: Giri\u015fin belirli bir minimum uzunlu\u011fa sahip olup olmad\u0131\u011f\u0131n\u0131 kontrol eder.<br \/>\n*   <code>v => \/.+@.+\\..+\/.test(v) || '...'<\/code>: D\u00fczenli ifade (regex) kullanarak e-posta format\u0131n\u0131n ge\u00e7erlili\u011fini kontrol eder.<\/p>\n<p>Bu temel kurallar, bir\u00e7ok senaryo i\u00e7in yeterli olsa da, daha karma\u015f\u0131k i\u015f mant\u0131klar\u0131 veya harici veri kontrolleri gerekti\u011finde geni\u015fletme ihtiyac\u0131 do\u011far.<\/p>\n<h3>\u00d6zel Do\u011frulama Kurallar\u0131 Olu\u015fturma<\/h3>\n<p>Vuetify&#8217;\u0131n sundu\u011fu esneklik sayesinde, projenizin \u00f6zel gereksinimlerine uygun kendi do\u011frulama kurallar\u0131n\u0131z\u0131 kolayca olu\u015fturabilirsiniz. \u00d6zel kurallar, temel <code>value => boolean | string<\/code> yap\u0131s\u0131n\u0131 takip ederek yaz\u0131l\u0131r.<\/p>\n<h4>Kural Fonksiyonlar\u0131n\u0131n Yap\u0131s\u0131<\/h4>\n<p>\u00d6zel bir kural, giri\u015f alan\u0131n\u0131n mevcut de\u011ferini (value) parametre olarak alan bir JavaScript fonksiyonudur. Bu fonksiyon, de\u011fer ge\u00e7erliyse <code>true<\/code> d\u00f6nd\u00fcrmeli, ge\u00e7ersizse bir hata mesaj\u0131 dizesi d\u00f6nd\u00fcrmelidir.<\/p>\n<pre><code class=\"language-javascript\">\/\/ \u00d6rnek: B\u00fcy\u00fck harf kontrol\u00fc\nconst uppercaseRule = value => {\n  if (value && value === value.toUpperCase()) {\n    return true;\n  }\n  return 'T\u00fcm karakterler b\u00fcy\u00fck harf olmal\u0131d\u0131r.';\n};\n\n\/\/ \u00d6rnek: Belirli bir kelimeyi i\u00e7erme kontrol\u00fc\nconst containsKeywordRule = keyword => value => {\n  if (value && value.includes(keyword)) {\n    return true;\n  }\n  return <code>Giri\u015f \"${keyword}\" kelimesini i\u00e7ermelidir.<\/code>;\n};<\/code><\/pre>\n<p>\u0130lk \u00f6rnek <code>uppercaseRule<\/code>, do\u011frudan bir kural fonksiyonudur. \u0130kinci \u00f6rnek <code>containsKeywordRule<\/code>, bir &#8220;kural \u00fcreteci&#8221; (rule factory) fonksiyonudur. Bu t\u00fcr fonksiyonlar, d\u0131\u015far\u0131dan parametreler alarak dinamik kural fonksiyonlar\u0131 olu\u015fturman\u0131za olanak tan\u0131r. Bu, ayn\u0131 kural mant\u0131\u011f\u0131n\u0131 farkl\u0131 parametrelerle yeniden kullanmak istedi\u011finizde \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n<h4>\u00d6rnek: \u015eifre Karma\u015f\u0131kl\u0131\u011f\u0131 Kural\u0131<\/h4>\n<p>Tipik bir senaryo, \u015fifrelerin belirli karma\u015f\u0131kl\u0131k gereksinimlerini kar\u015f\u0131lamas\u0131n\u0131 sa\u011flamakt\u0131r (\u00f6rne\u011fin, en az bir b\u00fcy\u00fck harf, bir k\u00fc\u00e7\u00fck harf, bir rakam ve bir \u00f6zel karakter).<\/p>\n<pre><code class=\"language-html\"><template>\n  <v-form ref=\"passwordForm\">\n    <v-text-field\n      v-model=\"password\"\n      :rules=\"passwordRules\"\n      label=\"\u015eifre\"\n      type=\"password\"\n    ><\/v-text-field>\n  <\/v-form>\n<\/template>\n\n<script>\nexport default {\n  data: () => ({\n    password: '',\n    passwordRules: [\n      v => !!v || '\u015eifre zorunludur',\n      v => (v && v.length >= 8) || '\u015eifre en az 8 karakter olmal\u0131d\u0131r',\n      v => \/[A-Z]\/.test(v) || '\u015eifre en az bir b\u00fcy\u00fck harf i\u00e7ermelidir',\n      v => \/[a-z]\/.test(v) || '\u015eifre en az bir k\u00fc\u00e7\u00fck harf i\u00e7ermelidir',\n      v => \/[0-9]\/.test(v) || '\u015eifre en az bir rakam i\u00e7ermelidir',\n      v => \/[^A-Za-z0-9]\/.test(v) || '\u015eifre en az bir \u00f6zel karakter i\u00e7ermelidir',\n    ],\n  }),\n};\n<\/script><\/code><\/pre>\n<p>Bu \u00f6rnekte, her bir karma\u015f\u0131kl\u0131k gereksinimi i\u00e7in ayr\u0131 bir regex tabanl\u0131 kural tan\u0131mlanm\u0131\u015ft\u0131r. Bu yakla\u015f\u0131m, kullan\u0131c\u0131ya hangi gereksinimin kar\u015f\u0131lanmad\u0131\u011f\u0131n\u0131 net bir \u015fekilde bildirmek i\u00e7in faydal\u0131d\u0131r.<\/p>\n<h4>Daha Karma\u015f\u0131k \u00d6zel Kurallar Yazma Stratejileri<\/h4>\n<p>*   <strong>Mod\u00fclerlik:<\/strong> E\u011fer \u00e7ok say\u0131da \u00f6zel kural\u0131n\u0131z varsa, bunlar\u0131 ayr\u0131 bir JavaScript dosyas\u0131nda tan\u0131mlay\u0131p bile\u015fenlerinize import edebilirsiniz. Bu, kodunuzu daha d\u00fczenli ve yeniden kullan\u0131labilir hale getirir.<\/p>\n<pre><code class=\"language-javascript\">\/\/ validationRules.js\n    export const requiredRule = v => !!v || 'Bu alan zorunludur';\n    export const minLengthRule = len => v => (v && v.length >= len) || <code>En az ${len} karakter olmal\u0131d\u0131r<\/code>;\n    export const emailRule = v => \/.+@.+\\..+\/.test(v) || 'Ge\u00e7erli bir e-posta adresi giriniz';\n    \/\/ ... di\u011fer kurallar<\/code><\/pre>\n<pre><code class=\"language-javascript\">\/\/ MyComponent.vue\n    import { requiredRule, minLengthRule, emailRule } from '@\/utils\/validationRules';\n\n    export default {\n      data: () => ({\n        \/\/ ...\n        emailRules: [requiredRule, emailRule],\n        nameRules: [requiredRule, minLengthRule(3)], \/\/ Kural \u00fcreteci kullan\u0131m\u0131\n      }),\n    };<\/code><\/pre>\n<p>*   <strong>Kural Zincirleme:<\/strong> Vuetify, <code>rules<\/code> dizisindeki t\u00fcm kurallar\u0131 s\u0131rayla \u00e7al\u0131\u015ft\u0131r\u0131r ve ilk ba\u015far\u0131s\u0131z olan kural\u0131n hata mesaj\u0131n\u0131 g\u00f6sterir. Bu davran\u0131\u015f\u0131 kullanarak, belirli bir s\u0131rayla kontrol edilmesi gereken kurallar\u0131 mant\u0131kl\u0131 bir \u015fekilde zincirleyebilirsiniz.<\/p>\n<h3>Asenkron Do\u011frulama<\/h3>\n<p>Bazen bir alan\u0131n ge\u00e7erlili\u011fini kontrol etmek i\u00e7in harici bir kayna\u011fa (\u00f6rne\u011fin, bir API&#8217;ye veya veritaban\u0131na) ba\u015fvurman\u0131z gerekebilir. Bu t\u00fcr senaryolar i\u00e7in asenkron do\u011frulama kullan\u0131l\u0131r. En yayg\u0131n \u00f6rnek, bir kullan\u0131c\u0131 ad\u0131n\u0131n veya e-posta adresinin veritaban\u0131nda zaten mevcut olup olmad\u0131\u011f\u0131n\u0131 kontrol etmektir.<\/p>\n<h4>Neden Asenkron Do\u011frulamaya \u0130htiya\u00e7 Duyar\u0131z?<\/h4>\n<p>*   <strong>Kullan\u0131c\u0131 Ad\u0131\/E-posta Benzersizli\u011fi:<\/strong> Yeni bir kullan\u0131c\u0131 kaydolurken, se\u00e7ilen kullan\u0131c\u0131 ad\u0131n\u0131n veya e-posta adresinin sistemde benzersiz oldu\u011funu do\u011frulamak.<br \/>\n*   <strong>Harici Veri Kontrol\u00fc:<\/strong> Bir \u00fcr\u00fcn kodunun veya sipari\u015f numaras\u0131n\u0131n ge\u00e7erlili\u011fini bir API \u00fczerinden kontrol etmek.<br \/>\n*   <strong>Dinamik Kural Y\u00fckleme:<\/strong> Belirli ko\u015fullara ba\u011fl\u0131 olarak farkl\u0131 do\u011frulama kurallar\u0131n\u0131 uzaktan y\u00fcklemek.<\/p>\n<h4><code>rules<\/code> \u0130\u00e7inde Promise Kullan\u0131m\u0131<\/h4>\n<p>Vuetify&#8217;\u0131n do\u011frulama sistemi, kural fonksiyonlar\u0131n\u0131n bir <code>Promise<\/code> d\u00f6nd\u00fcrmesine izin verir. Bu Promise, ba\u015far\u0131l\u0131 oldu\u011funda <code>true<\/code> veya ge\u00e7ersizse bir hata mesaj\u0131 d\u00f6nd\u00fcrmelidir.<\/p>\n<pre><code class=\"language-html\"><template>\n  <v-form ref=\"asyncForm\">\n    <v-text-field\n      v-model=\"username\"\n      :rules=\"usernameRules\"\n      label=\"Kullan\u0131c\u0131 Ad\u0131\"\n      required\n      :loading=\"usernameLoading\"\n      :error-messages=\"usernameErrorMessages\"\n    ><\/v-text-field>\n  <\/v-form>\n<\/template>\n\n<script>\nexport default {\n  data: () => ({\n    username: '',\n    usernameLoading: false,\n    usernameErrorMessages: [],\n    usernameRules: [\n      v => !!v || 'Kullan\u0131c\u0131 ad\u0131 zorunludur',\n      v => (v && v.length >= 3) || 'Kullan\u0131c\u0131 ad\u0131 en az 3 karakter olmal\u0131d\u0131r',\n      \/\/ Asenkron kural\n      v => new Promise(resolve => {\n        \/\/ E\u011fer de\u011fer bo\u015f veya minimum uzunluktan k\u0131saysa, asenkron kontrol yapmaya gerek yok\n        if (!v || v.length < 3) {\n          resolve(true); \/\/ Di\u011fer kurallar zaten hata verir\n          return;\n        }\n\n        this.usernameLoading = true;\n        this.checkUsernameAvailability(v)\n          .then(isAvailable => {\n            if (isAvailable) {\n              resolve(true);\n            } else {\n              resolve('Bu kullan\u0131c\u0131 ad\u0131 zaten al\u0131nm\u0131\u015f.');\n            }\n          })\n          .catch(() => {\n            resolve('Kullan\u0131c\u0131 ad\u0131 kontrol\u00fc s\u0131ras\u0131nda bir hata olu\u015ftu.');\n          })\n          .finally(() => {\n            this.usernameLoading = false;\n          });\n      }),\n    ],\n  }),\n  methods: {\n    \/\/ API \u00e7a\u011fr\u0131s\u0131n\u0131 sim\u00fcle eden bir metod\n    checkUsernameAvailability(username) {\n      this.usernameErrorMessages = []; \/\/ Hata mesajlar\u0131n\u0131 temizle\n      return new Promise(resolve => {\n        setTimeout(() => {\n          const takenUsernames = ['admin', 'testuser', 'johndoe'];\n          if (takenUsernames.includes(username.toLowerCase())) {\n            resolve(false); \/\/ Kullan\u0131c\u0131 ad\u0131 al\u0131nm\u0131\u015f\n          } else {\n            resolve(true); \/\/ Kullan\u0131c\u0131 ad\u0131 kullan\u0131labilir\n          }\n        }, 1000); \/\/ 1 saniye gecikme ile API \u00e7a\u011fr\u0131s\u0131n\u0131 sim\u00fcle et\n      });\n    },\n  },\n};\n<\/script><\/code><\/pre>\n<p>Yukar\u0131daki \u00f6rnekte:<br \/>\n*   <code>usernameRules<\/code> dizisi i\u00e7inde bir <code>Promise<\/code> d\u00f6nd\u00fcren bir fonksiyon bulunmaktad\u0131r.<br \/>\n*   <code>checkUsernameAvailability<\/code> metodu, bir API \u00e7a\u011fr\u0131s\u0131n\u0131 sim\u00fcle eder ve kullan\u0131c\u0131n\u0131n girdi\u011fi ad\u0131n benzersiz olup olmad\u0131\u011f\u0131n\u0131 kontrol eder.<br \/>\n*   <code>usernameLoading<\/code> prop&#8217;u, asenkron i\u015flem devam ederken kullan\u0131c\u0131ya geri bildirim sa\u011flamak i\u00e7in <code>v-text-field<\/code>&#8216;\u0131n loading durumunu kontrol eder.<br \/>\n*   <code>usernameErrorMessages<\/code> prop&#8217;u, API&#8217;den gelen genel hatalar\u0131 g\u00f6stermek i\u00e7in kullan\u0131labilir (bu \u00f6rnekte basit tutulmu\u015ftur).<\/p>\n<h4>Debounce Kullan\u0131m\u0131 ile API \u00c7a\u011fr\u0131lar\u0131n\u0131 Optimize Etme<\/h4>\n<p>Kullan\u0131c\u0131 her tu\u015fa bast\u0131\u011f\u0131nda API \u00e7a\u011fr\u0131s\u0131 yapmak gereksiz y\u00fck olu\u015fturabilir. <code>lodash.debounce<\/code> gibi bir k\u00fct\u00fcphane kullanarak veya kendi debounce fonksiyonunuzu yazarak API \u00e7a\u011fr\u0131lar\u0131n\u0131 optimize edebilirsiniz. Bu, kullan\u0131c\u0131n\u0131n yazmay\u0131 bitirmesini bekleyerek API \u00e7a\u011fr\u0131s\u0131 say\u0131s\u0131n\u0131 azalt\u0131r.<\/p>\n<pre><code class=\"language-javascript\">import _ from 'lodash'; \/\/ lodash k\u00fct\u00fcphanesini y\u00fckledi\u011finizi varsayal\u0131m\n\nexport default {\n  data: () => ({\n    username: '',\n    \/\/ ... di\u011fer data\n  }),\n  created() {\n    \/\/ Debounced versiyonunu olu\u015ftur\n    this.debouncedCheckUsername = _.debounce(this.checkUsernameAvailability, 500);\n  },\n  methods: {\n    \/\/ ...\n    checkUsernameAvailability(username) {\n      \/\/ API \u00e7a\u011fr\u0131s\u0131 mant\u0131\u011f\u0131 buraya gelecek\n      \/\/ Promise d\u00f6nd\u00fcrmeyi unutmay\u0131n\n    },\n    asyncUsernameRule(v) {\n      if (!v || v.length < 3) {\n        return true;\n      }\n      this.usernameLoading = true;\n      \/\/ Debounced fonksiyonu \u00e7a\u011f\u0131r\n      return this.debouncedCheckUsername(v)\n        .then(isAvailable => {\n          this.usernameLoading = false;\n          return isAvailable || 'Bu kullan\u0131c\u0131 ad\u0131 zaten al\u0131nm\u0131\u015f.';\n        })\n        .catch(() => {\n          this.usernameLoading = false;\n          return 'Kullan\u0131c\u0131 ad\u0131 kontrol\u00fc s\u0131ras\u0131nda bir hata olu\u015ftu.';\n        });\n    }\n  },\n  \/\/ usernameRules dizisinde asyncUsernameRule metodunu kullan\u0131n\n  \/\/ usernameRules: [..., this.asyncUsernameRule]\n};<\/code><\/pre>\n<p>Bu yakla\u015f\u0131mda, <code>usernameRules<\/code> i\u00e7inde do\u011frudan Promise d\u00f6nd\u00fcren bir fonksiyon yerine, <code>asyncUsernameRule<\/code> ad\u0131nda bir metod tan\u0131mlayarak debounce i\u015flemini y\u00f6netiyoruz.<\/p>\n<h3>Karma\u015f\u0131k Do\u011frulama Senaryolar\u0131 ve Geli\u015fmi\u015f Teknikler<\/h3>\n<p>Bazen tek bir alan\u0131n de\u011ferine ba\u011fl\u0131 olmayan, birden fazla alan\u0131n birbiriyle ili\u015fkili oldu\u011fu veya dinamik olarak de\u011fi\u015fen kurallar gerektiren senaryolarla kar\u015f\u0131la\u015f\u0131r\u0131z.<\/p>\n<h4>\u00c7apraz Alan Do\u011frulamas\u0131 (Cross-Field Validation)<\/h4>\n<p>\u0130ki veya daha fazla form alan\u0131n\u0131n de\u011ferlerinin birbiriyle ili\u015fkili oldu\u011fu durumlarda \u00e7apraz alan do\u011frulamas\u0131 kullan\u0131l\u0131r. En bilinen \u00f6rnek, &#8220;\u015eifre&#8221; ve &#8220;\u015eifre Tekrar\u0131&#8221; alanlar\u0131n\u0131n birbiriyle e\u015fle\u015fmesi gerekti\u011fidir.<\/p>\n<pre><code class=\"language-html\"><template>\n  <v-form ref=\"crossFieldForm\">\n    <v-text-field\n      v-model=\"password\"\n      :rules=\"passwordRules\"\n      label=\"\u015eifre\"\n      type=\"password\"\n      required\n    ><\/v-text-field>\n\n    <v-text-field\n      v-model=\"confirmPassword\"\n      :rules=\"confirmPasswordRules\"\n      label=\"\u015eifre Tekrar\u0131\"\n      type=\"password\"\n      required\n    ><\/v-text-field>\n\n    <v-btn @click=\"submitForm\">G\u00f6nder<\/v-btn>\n  <\/v-form>\n<\/template>\n\n<script>\nexport default {\n  data: () => ({\n    password: '',\n    confirmPassword: '',\n  }),\n  computed: {\n    passwordRules() {\n      return [\n        v => !!v || '\u015eifre zorunludur',\n        v => (v && v.length >= 6) || '\u015eifre en az 6 karakter olmal\u0131d\u0131r',\n      ];\n    },\n    confirmPasswordRules() {\n      return [\n        v => !!v || '\u015eifre tekrar\u0131 zorunludur',\n        v => v === this.password || '\u015eifreler e\u015fle\u015fmiyor',\n      ];\n    },\n  },\n  methods: {\n    submitForm() {\n      if (this.$refs.crossFieldForm.validate()) {\n        alert('Form ge\u00e7erli!');\n      } else {\n        alert('Formda hatalar var.');\n      }\n    },\n  },\n};\n<\/script><\/code><\/pre>\n<p>Bu \u00f6rnekte:<br \/>\n*   <code>passwordRules<\/code> ve <code>confirmPasswordRules<\/code> bir <code>computed<\/code> property olarak tan\u0131mlanm\u0131\u015ft\u0131r. Bu sayede, <code>password<\/code> de\u011feri de\u011fi\u015fti\u011finde <code>confirmPasswordRules<\/code> otomatik olarak yeniden hesaplan\u0131r ve do\u011frulama tetiklenir.<br \/>\n*   <code>confirmPasswordRules<\/code> i\u00e7indeki kural, <code>v === this.password<\/code> ifadesiyle <code>confirmPassword<\/code> de\u011ferinin <code>password<\/code> de\u011feriyle e\u015fle\u015fip e\u015fle\u015fmedi\u011fini kontrol eder.<\/p>\n<h4>Dinamik Kurallar (Dynamic Rules)<\/h4>\n<p>Uygulaman\u0131n durumuna, kullan\u0131c\u0131n\u0131n rol\u00fcne veya belirli bir se\u00e7ime g\u00f6re do\u011frulama kurallar\u0131n\u0131n de\u011fi\u015fmesi gerekebilir. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n &#8220;y\u00f6netici&#8221; rol\u00fc varsa belirli bir alan\u0131 zorunlu k\u0131lmak.<\/p>\n<pre><code class=\"language-html\"><template>\n  <v-form ref=\"dynamicForm\">\n    <v-checkbox v-model=\"isAdmin\" label=\"Y\u00f6neticiyim\"><\/v-checkbox>\n\n    <v-text-field\n      v-model=\"adminCode\"\n      :rules=\"adminCodeRules\"\n      label=\"Y\u00f6netici Kodu\"\n      :disabled=\"!isAdmin\"\n    ><\/v-text-field>\n  <\/v-form>\n<\/template>\n\n<script>\nexport default {\n  data: () => ({\n    isAdmin: false,\n    adminCode: '',\n  }),\n  computed: {\n    adminCodeRules() {\n      const rules = [];\n      if (this.isAdmin) {\n        rules.push(v => !!v || 'Y\u00f6netici kodu zorunludur');\n        rules.push(v => (v && v.length === 5) || 'Y\u00f6netici kodu 5 haneli olmal\u0131d\u0131r');\n        \/\/ Ek olarak bir API \u00e7a\u011fr\u0131s\u0131 ile kodun ge\u00e7erlili\u011fi kontrol edilebilir.\n      }\n      return rules;\n    },\n  },\n};\n<\/script><\/code><\/pre>\n<p>Burada <code>adminCodeRules<\/code> yine bir <code>computed<\/code> property olarak tan\u0131mlanm\u0131\u015ft\u0131r. <code>isAdmin<\/code> de\u011feri de\u011fi\u015fti\u011finde, <code>adminCodeRules<\/code> yeniden hesaplan\u0131r ve <code>adminCode<\/code> alan\u0131n\u0131n do\u011frulama kurallar\u0131 dinamik olarak g\u00fcncellenir. E\u011fer <code>isAdmin<\/code> <code>true<\/code> ise, <code>adminCode<\/code> alan\u0131 i\u00e7in zorunluluk ve uzunluk kurallar\u0131 eklenir.<\/p>\n<h4>Form Do\u011frulama Durumunu Y\u00f6netme<\/h4>\n<p><code>v-form<\/code> bile\u015fenine bir <code>ref<\/code> atayarak, formun do\u011frulama durumunu manuel olarak kontrol edebiliriz.<\/p>\n<p>*   <code>this.$refs.form.validate()<\/code>: T\u00fcm form alanlar\u0131n\u0131 do\u011frular ve formun ge\u00e7erli olup olmad\u0131\u011f\u0131n\u0131 belirten bir boolean d\u00f6nd\u00fcr\u00fcr. E\u011fer <code>lazy-validation<\/code> <code>true<\/code> ise, bu metot formun do\u011frulanmas\u0131n\u0131 tetikler.<br \/>\n*   <code>this.$refs.form.reset()<\/code>: T\u00fcm form alanlar\u0131n\u0131 ba\u015flang\u0131\u00e7 de\u011ferlerine s\u0131f\u0131rlar ve do\u011frulama hatalar\u0131n\u0131 temizler.<br \/>\n*   <code>this.$refs.form.resetValidation()<\/code>: Sadece do\u011frulama hatalar\u0131n\u0131 temizler, alan de\u011ferlerini s\u0131f\u0131rlamaz.<\/p>\n<p>Bu metotlar, form g\u00f6nderiminde, formun belirli bir b\u00f6l\u00fcm\u00fcn\u00fc s\u0131f\u0131rlarken veya kullan\u0131c\u0131ya geri bildirim sa\u011flarken \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n<h4>Harici K\u00fct\u00fcphanelerle Entegrasyon (Vuelidate \u00d6rne\u011fi)<\/h4>\n<p>Vuetify&#8217;\u0131n kendi do\u011frulama sistemi \u00e7o\u011fu senaryo i\u00e7in yeterli olsa da, Vuelidate veya VeeValidate gibi harici do\u011frulama k\u00fct\u00fcphaneleri daha zengin kural setleri, daha esnek hata mesaj\u0131 y\u00f6netimi veya daha karma\u015f\u0131k i\u00e7 i\u00e7e form yap\u0131lar\u0131 i\u00e7in tercih edilebilir. Bu k\u00fct\u00fcphaneler, Vuetify bile\u015fenleriyle birlikte sorunsuz bir \u015fekilde \u00e7al\u0131\u015ft\u0131r\u0131labilir.<\/p>\n<p>\u00d6rnek olarak Vuelidate ile temel bir entegrasyonu inceleyelim:<\/p>\n<pre><code class=\"language-html\"><template>\n  <v-form ref=\"vuelidateForm\">\n    <v-text-field\n      v-model=\"$v.email.$model\"\n      :error-messages=\"emailErrors\"\n      label=\"E-posta\"\n      required\n      @blur=\"$v.email.$touch()\"\n    ><\/v-text-field>\n\n    <v-text-field\n      v-model=\"$v.password.$model\"\n      :error-messages=\"passwordErrors\"\n      label=\"\u015eifre\"\n      type=\"password\"\n      required\n      @blur=\"$v.password.$touch()\"\n    ><\/v-text-field>\n\n    <v-btn :disabled=\"$v.$invalid\" @click=\"submitVuelidateForm\">G\u00f6nder<\/v-btn>\n  <\/v-form>\n<\/template>\n\n<script>\nimport { required, email, minLength } from 'vuelidate\/lib\/validators';\n\nexport default {\n  data: () => ({\n    email: '',\n    password: '',\n  }),\n  validations: {\n    email: {\n      required,\n      email,\n    },\n    password: {\n      required,\n      minLength: minLength(6),\n    },\n  },\n  computed: {\n    emailErrors() {\n      const errors = [];\n      if (!this.$v.email.$dirty) return errors;\n      !this.$v.email.email && errors.push('Ge\u00e7erli bir e-posta adresi olmal\u0131d\u0131r.');\n      !this.$v.email.required && errors.push('E-posta zorunludur.');\n      return errors;\n    },\n    passwordErrors() {\n      const errors = [];\n      if (!this.$v.password.$dirty) return errors;\n      !this.$v.password.minLength && errors.push('\u015eifre en az 6 karakter olmal\u0131d\u0131r.');\n      !this.$v.password.required && errors.push('\u015eifre zorunludur.');\n      return errors;\n    },\n  },\n  methods: {\n    submitVuelidateForm() {\n      this.$v.$touch(); \/\/ T\u00fcm alanlar\u0131 kirli i\u015faretle\n      if (!this.$v.$invalid) {\n        alert('Vuelidate form ge\u00e7erli!');\n      } else {\n        alert('Vuelidate formda hatalar var.');\n      }\n    },\n  },\n};\n<\/script><\/code><\/pre>\n<p>Bu entegrasyonda:<br \/>\n*   Vuelidate&#8217;in <code>$v<\/code> nesnesi, do\u011frulama durumunu i\u00e7erir.<br \/>\n*   <code>v-model<\/code> do\u011frudan Vuelidate&#8217;in <code>$model<\/code> \u00f6zelli\u011fine ba\u011flan\u0131r.<br \/>\n*   <code>error-messages<\/code> prop&#8217;u, <code>computed<\/code> property&#8217;ler arac\u0131l\u0131\u011f\u0131yla Vuelidate&#8217;den gelen hatalar\u0131 g\u00f6sterir.<br \/>\n*   <code>@blur=\"$v.email.$touch()\"<\/code> gibi eventler, alan\u0131n &#8220;kirli&#8221; (dirty) durumunu ayarlayarak hata mesajlar\u0131n\u0131n ne zaman g\u00f6sterilece\u011fini kontrol eder.<br \/>\n*   <code>this.$v.$invalid<\/code> genel formun ge\u00e7erlilik durumunu verir.<\/p>\n<h3>Hata Mesajlar\u0131n\u0131 \u00d6zelle\u015ftirme ve Kullan\u0131c\u0131 Deneyimi<\/h3>\n<p>Do\u011frulama hatalar\u0131, kullan\u0131c\u0131n\u0131n formu do\u011fru bir \u015fekilde doldurmas\u0131na yard\u0131mc\u0131 olan \u00f6nemli geri bildirimlerdir. Bu mesajlar\u0131n a\u00e7\u0131k, anla\u015f\u0131l\u0131r ve kullan\u0131c\u0131 dostu olmas\u0131, uygulaman\u0131n genel kullan\u0131c\u0131 deneyimini iyile\u015ftirir.<\/p>\n<h4>Varsay\u0131lan Hata Mesajlar\u0131n\u0131 Ge\u00e7ersiz K\u0131lma<\/h4>\n<p>Vuetify&#8217;da bir kural fonksiyonu <code>false<\/code> yerine bir <code>string<\/code> d\u00f6nd\u00fcrd\u00fc\u011f\u00fcnde, bu string do\u011frudan hata mesaj\u0131 olarak kullan\u0131l\u0131r. Bu, hata mesajlar\u0131n\u0131 \u00f6zelle\u015ftirmenin en temel yoludur.<\/p>\n<pre><code class=\"language-javascript\">\/\/ \u00d6rnek: Varsay\u0131lan mesaj\u0131 ge\u00e7ersiz k\u0131lma\nconst nameRules = [\n  v => !!v || 'L\u00fctfen ad\u0131n\u0131z\u0131 ve soyad\u0131n\u0131z\u0131 giriniz.', \/\/ Daha a\u00e7\u0131klay\u0131c\u0131 mesaj\n  v => (v && v.length <= 50) || 'Ad\u0131n\u0131z soyad\u0131n\u0131z 50 karakterden uzun olamaz.',\n];<\/code><\/pre>\n<h4>Daha A\u00e7\u0131klay\u0131c\u0131 ve Kullan\u0131c\u0131 Dostu Hata Mesajlar\u0131<\/h4>\n<p>Hata mesajlar\u0131, kullan\u0131c\u0131n\u0131n neyi yanl\u0131\u015f yapt\u0131\u011f\u0131n\u0131 ve nas\u0131l d\u00fczeltebilece\u011fini net bir \u015fekilde belirtmelidir.<br \/>\n*   \"Ge\u00e7ersiz giri\u015f\" yerine \"E-posta adresi ge\u00e7erli formatta de\u011fil.\"<br \/>\n*   \"Zorunlu alan\" yerine \"Bu alan bo\u015f b\u0131rak\u0131lamaz.\"<\/p>\n<p>Dinamik hata mesajlar\u0131, kural parametrelerini mesaj\u0131n i\u00e7ine dahil ederek daha da faydal\u0131 olabilir:<\/p>\n<pre><code class=\"language-javascript\">const minLengthRule = len => v => (v && v.length >= len) || <code>L\u00fctfen en az ${len} karakter giriniz. Mevcut: ${v ? v.length : 0} karakter.<\/code>;<\/code><\/pre>\n<p>Bu kural, kullan\u0131c\u0131n\u0131n ka\u00e7 karakter girdi\u011fini g\u00f6stererek, eksik kalan karakter say\u0131s\u0131n\u0131 anlamas\u0131na yard\u0131mc\u0131 olur.<\/p>\n<h4>Kullan\u0131c\u0131ya An\u0131nda Geri Bildirim Sa\u011flama Stratejileri<\/h4>\n<p>*   <strong>An\u0131nda Do\u011frulama:<\/strong> Varsay\u0131lan olarak Vuetify, bir alan\u0131n de\u011feri de\u011fi\u015fti\u011finde veya odak d\u0131\u015f\u0131na \u00e7\u0131kt\u0131\u011f\u0131nda do\u011frulamay\u0131 tetikler. Bu, kullan\u0131c\u0131ya an\u0131nda geri bildirim sa\u011flar.<br \/>\n*   <strong><code>success-messages<\/code> ve <code>success<\/code> prop'lar\u0131:<\/strong> Vuetify, ba\u015far\u0131l\u0131 do\u011frulama durumlar\u0131nda <code>success-messages<\/code> prop'unu kullanarak ye\u015fil renkli mesajlar g\u00f6stermenize veya <code>success<\/code> prop'unu <code>true<\/code> yaparak bile\u015feni ye\u015fil renkte vurgulaman\u0131za olanak tan\u0131r. Bu, kullan\u0131c\u0131n\u0131n do\u011fru giri\u015f yapt\u0131\u011f\u0131n\u0131 onaylar.<br \/>\n*   <strong><code>loading<\/code> prop'u:<\/strong> Asenkron do\u011frulama s\u0131ras\u0131nda bir y\u00fckleme g\u00f6stergesi (spinner) g\u00f6stermek, kullan\u0131c\u0131n\u0131n i\u015flemin devam etti\u011fini anlamas\u0131n\u0131 sa\u011flar.<br \/>\n*   <strong><code>error-count<\/code> prop'u:<\/strong> <code>v-text-field<\/code> gibi bile\u015fenlerde <code>error-count<\/code> prop'unu kullanarak ayn\u0131 anda ka\u00e7 hata mesaj\u0131n\u0131n g\u00f6sterilece\u011fini kontrol edebilirsiniz. Genellikle 1 hata mesaj\u0131 yeterlidir.<\/p>\n<h3>En \u0130yi Uygulamalar ve \u0130pu\u00e7lar\u0131<\/h3>\n<p>Vuetify form do\u011frulamas\u0131n\u0131 geni\u015fletirken g\u00f6z \u00f6n\u00fcnde bulundurman\u0131z gereken baz\u0131 en iyi uygulamalar ve ipu\u00e7lar\u0131:<\/p>\n<p>*   <strong>Kurallar\u0131 Mod\u00fcler Hale Getirme:<\/strong> Tekrar eden do\u011frulama kurallar\u0131n\u0131 ayr\u0131 bir JavaScript dosyas\u0131nda tan\u0131mlay\u0131n ve bile\u015fenlerinizde yeniden kullan\u0131n. Bu, kod tekrar\u0131n\u0131 azalt\u0131r ve bak\u0131m\u0131 kolayla\u015ft\u0131r\u0131r.<br \/>\n*   <strong>Anlaml\u0131 Hata Mesajlar\u0131:<\/strong> Kullan\u0131c\u0131ya neyi yanl\u0131\u015f yapt\u0131\u011f\u0131n\u0131 ve nas\u0131l d\u00fczeltebilece\u011fini net bir \u015fekilde anlatan mesajlar kullan\u0131n. Teknik terimlerden ka\u00e7\u0131n\u0131n.<br \/>\n*   <strong>Performans\u0131 G\u00f6z \u00d6n\u00fcnde Bulundurma:<\/strong> \u00d6zellikle asenkron do\u011frulama kullan\u0131rken, gereksiz API \u00e7a\u011fr\u0131lar\u0131ndan ka\u00e7\u0131nmak i\u00e7in debounce veya throttle gibi teknikler kullan\u0131n. \u00c7ok say\u0131da kural\u0131 olan \u00e7ok karma\u015f\u0131k formlarda, performans sorunlar\u0131 ya\u015fanmamas\u0131 i\u00e7in dikkatli olun.<br \/>\n*   <strong>Test Edilebilir Kurallar Yazma:<\/strong> Kural fonksiyonlar\u0131n\u0131z\u0131 saf fonksiyonlar olarak yazmaya \u00e7al\u0131\u015f\u0131n, b\u00f6ylece onlar\u0131 kolayca birim testlerine tabi tutabilirsiniz.<br \/>\n*   <strong>Eri\u015filebilirlik (Accessibility):<\/strong> Formlar\u0131n\u0131z\u0131n eri\u015filebilir oldu\u011fundan emin olun. Vuetify bile\u015fenleri genellikle iyi eri\u015filebilirlik \u00f6zelliklerine sahiptir, ancak \u00f6zel hata mesajlar\u0131 veya etkile\u015fimler eklerken bu konuyu g\u00f6z ard\u0131 etmeyin. <code>aria-describedby<\/code> gibi HTML niteliklerini do\u011fru kullanmaya \u00f6zen g\u00f6sterin.<br \/>\n*   <strong>Kullan\u0131c\u0131ya Geri Bildirim Sa\u011flama:<\/strong> Do\u011frulama s\u0131ras\u0131nda y\u00fckleme g\u00f6stergeleri, ba\u015far\u0131 mesajlar\u0131 ve net hata mesajlar\u0131 ile kullan\u0131c\u0131ya s\u00fcrekli geri bildirim sa\u011flay\u0131n. Bu, kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<br \/>\n*   <strong>Sunucu Taraf\u0131 Do\u011frulama ile Birlikte Kullan\u0131m:<\/strong> Frontend do\u011frulamas\u0131, iyi bir kullan\u0131c\u0131 deneyimi i\u00e7in \u00f6nemlidir, ancak g\u00fcvenlik i\u00e7in asla tek ba\u015f\u0131na yeterli de\u011fildir. Her zaman sunucu taraf\u0131nda da ayn\u0131 do\u011frulamalar\u0131 uygulay\u0131n. Frontend do\u011frulamas\u0131, sunucuya gereksiz istekleri g\u00f6ndermeyi engellerken, sunucu taraf\u0131 do\u011frulamas\u0131 k\u00f6t\u00fc niyetli veya hatal\u0131 verilerin sisteminize girmesini \u00f6nler.<br \/>\n*   <strong>Geli\u015fmi\u015f Durum Y\u00f6netimi:<\/strong> Karma\u015f\u0131k formlar ve do\u011frulama mant\u0131\u011f\u0131 i\u00e7in Vuex gibi bir durum y\u00f6netim k\u00fct\u00fcphanesi kullanmay\u0131 d\u00fc\u015f\u00fcnebilirsiniz. Bu, form verilerini ve do\u011frulama durumunu merkezi bir yerde y\u00f6netmenizi sa\u011flar.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>Vuetify, modern ve etkile\u015fimli formlar olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc ve esnek bir do\u011frulama sistemi sunar. Bu makalede, Vuetify'\u0131n temel do\u011frulama mekanizmalar\u0131ndan ba\u015flayarak, \u00f6zel do\u011frulama kurallar\u0131 olu\u015fturma, asenkron do\u011frulama tekniklerini uygulama, \u00e7apraz alan do\u011frulamas\u0131 gibi karma\u015f\u0131k senaryolar\u0131 ele alma ve harici k\u00fct\u00fcphanelerle entegrasyon gibi konular\u0131 detayl\u0131 bir \u015fekilde inceledik. Ayr\u0131ca, hata mesajlar\u0131n\u0131 \u00f6zelle\u015ftirmenin ve kullan\u0131c\u0131 deneyimini iyile\u015ftirmenin yollar\u0131n\u0131 ve en iyi uygulamalar\u0131 tart\u0131\u015ft\u0131k.<\/p>\n<p>Vuetify'\u0131n <code>rules<\/code> prop'u ve <code>v-form<\/code> bile\u015feninin sa\u011flad\u0131\u011f\u0131 esneklik sayesinde, hemen hemen her t\u00fcrl\u00fc do\u011frulama gereksinimini kar\u015f\u0131layabilirsiniz. \u0130ster basit bir zorunluluk kontrol\u00fc olsun, ister bir API'den veri \u00e7eken karma\u015f\u0131k bir asenkron do\u011frulama, Vuetify geli\u015ftiricilere bu i\u015flemleri kolayca yapabilmeleri i\u00e7in gerekli ara\u00e7lar\u0131 sunar. Bu yetenekleri ustaca kullanarak, uygulamalar\u0131n\u0131zda daha sa\u011flam, g\u00fcvenilir ve kullan\u0131c\u0131 dostu formlar olu\u015fturabilirsiniz. Unutmay\u0131n, iyi bir do\u011frulama sistemi, hem geli\u015ftirici hem de son kullan\u0131c\u0131 i\u00e7in sorunsuz bir deneyimin anahtar\u0131d\u0131r.<br \/>\n<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Vuetify Form Alan\u0131 Do\u011frulamas\u0131n\u0131 Geni\u015fletmek\nGiri\u015f\nWeb uygulamalar\u0131n\u0131n temel ta\u015flar\u0131ndan biri olan formlar, kullan\u0131c\u0131dan veri toplaman\u0131","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1402],"tags":[],"class_list":{"0":"post-34279","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-vue","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Vuetify Form Alan\u0131 Do\u011frulamas\u0131n\u0131 Geni\u015fletmek - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/vuetify-form-alani-dogrulamasini-genisletmek\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vuetify Form Alan\u0131 Do\u011frulamas\u0131n\u0131 Geni\u015fletmek\" \/>\n<meta property=\"og:description\" content=\"Vuetify Form Alan\u0131 Do\u011frulamas\u0131n\u0131 Geni\u015fletmek Giri\u015f Web uygulamalar\u0131n\u0131n temel ta\u015flar\u0131ndan biri olan formlar, kullan\u0131c\u0131dan veri toplaman\u0131\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/vuetify-form-alani-dogrulamasini-genisletmek\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-14T03:40:50+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vuetify-form-alani-dogrulamasini-genisletmek\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vuetify-form-alani-dogrulamasini-genisletmek\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Vuetify Form Alan\u0131 Do\u011frulamas\u0131n\u0131 Geni\u015fletmek\",\"datePublished\":\"2025-11-14T03:40:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vuetify-form-alani-dogrulamasini-genisletmek\/\"},\"wordCount\":2481,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Vue\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/vuetify-form-alani-dogrulamasini-genisletmek\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vuetify-form-alani-dogrulamasini-genisletmek\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/vuetify-form-alani-dogrulamasini-genisletmek\/\",\"name\":\"Vuetify Form Alan\u0131 Do\u011frulamas\u0131n\u0131 Geni\u015fletmek - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-14T03:40:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vuetify-form-alani-dogrulamasini-genisletmek\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/vuetify-form-alani-dogrulamasini-genisletmek\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vuetify-form-alani-dogrulamasini-genisletmek\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vuetify Form Alan\u0131 Do\u011frulamas\u0131n\u0131 Geni\u015fletmek\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Vuetify Form Alan\u0131 Do\u011frulamas\u0131n\u0131 Geni\u015fletmek - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/vuetify-form-alani-dogrulamasini-genisletmek\/","og_locale":"tr_TR","og_type":"article","og_title":"Vuetify Form Alan\u0131 Do\u011frulamas\u0131n\u0131 Geni\u015fletmek","og_description":"Vuetify Form Alan\u0131 Do\u011frulamas\u0131n\u0131 Geni\u015fletmek Giri\u015f Web uygulamalar\u0131n\u0131n temel ta\u015flar\u0131ndan biri olan formlar, kullan\u0131c\u0131dan veri toplaman\u0131","og_url":"https:\/\/fatihsoysal.com\/blog\/vuetify-form-alani-dogrulamasini-genisletmek\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-14T03:40:50+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"14 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/vuetify-form-alani-dogrulamasini-genisletmek\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/vuetify-form-alani-dogrulamasini-genisletmek\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Vuetify Form Alan\u0131 Do\u011frulamas\u0131n\u0131 Geni\u015fletmek","datePublished":"2025-11-14T03:40:50+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/vuetify-form-alani-dogrulamasini-genisletmek\/"},"wordCount":2481,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Vue"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/vuetify-form-alani-dogrulamasini-genisletmek\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/vuetify-form-alani-dogrulamasini-genisletmek\/","url":"https:\/\/fatihsoysal.com\/blog\/vuetify-form-alani-dogrulamasini-genisletmek\/","name":"Vuetify Form Alan\u0131 Do\u011frulamas\u0131n\u0131 Geni\u015fletmek - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-14T03:40:50+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/vuetify-form-alani-dogrulamasini-genisletmek\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/vuetify-form-alani-dogrulamasini-genisletmek\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/vuetify-form-alani-dogrulamasini-genisletmek\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Vuetify Form Alan\u0131 Do\u011frulamas\u0131n\u0131 Geni\u015fletmek"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34279","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=34279"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34279\/revisions"}],"predecessor-version":[{"id":34280,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34279\/revisions\/34280"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=34279"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=34279"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=34279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}