Ana içeriğe geç
Version: 1.0.1

Geliştiriciler İçin Validasyon Örnekleri

Bu doküman, OpsGridForm ile kullanılan inputlar için en yaygın validasyon kurallarını ve bu validasyonların nasıl uygulanacağını örneklerle açıklar. Her validasyon kuralı için, doğrudan kopyalayıp kendi schema tanımınıza ekleyebileceğiniz objeler verilmiştir.

RegisterOptions Örnekleri​

1. Zorunlu Alan​

registerOptions: {
  required: "Bu alan zorunludur",
}

2. Maksimum Uzunluk​

registerOptions: {
  maxLength: {
    value: 200,
    message: "En fazla 200 karakter olabilir",
  },
}

3. Minimum ve Maksimum Değer​

registerOptions: {
  min: {
    value: 18,
    message: "Yaş en az 18 olmalıdır",
  },
  max: {
    value: 65,
    message: "Yaş en fazla 65 olabilir",
  },
}

4. Belirli Bir Desen (Regex)​

registerOptions: {
  pattern: {
    value: /^\(\d{3}\) \d{3}-\d{4}$/,
    message: "Telefon numarası (555) 555-5555 formatında olmalıdır",
  },
}

5. Özel Doğrulama (Custom Validator)​

registerOptions: {
  validate: (value) =>
    value.length >= 8 || "Şifre en az 8 karakter olmalıdır",
}

Yaygın Validasyon Örnekleri​

1. Zorunlu Alan​

{
  name: "Name",
  type: FormItemTypeEnum.TEXT,
  label: "Ad",
  registerOptions: {
    required: "Bu alan zorunludur",
  },
}

2. Maksimum Uzunluk​

{
  name: "Description",
  type: FormItemTypeEnum.TEXT,
  label: "Açıklama",
  registerOptions: {
    maxLength: {
      value: 200,
      message: "En fazla 200 karakter olabilir",
    },
  },
}

3. Minimum ve Maksimum Değer​

{
  name: "Age",
  type: FormItemTypeEnum.NUMBER,
  label: "Yaş",
  registerOptions: {
    min: {
      value: 18,
      message: "Yaş en az 18 olmalıdır",
    },
    max: {
      value: 65,
      message: "Yaş en fazla 65 olabilir",
    },
  },
}

4. Belirli Bir Desen (Regex)​

{
  name: "Phone",
  type: FormItemTypeEnum.TEL,
  label: "Telefon",
  registerOptions: {
    pattern: {
      value: /^\(\d{3}\) \d{3}-\d{4}$/,
      message: "Telefon numarası (555) 555-5555 formatında olmalıdır",
    },
  },
}

5. Özel Doğrulama (Custom Validator)​

{
  name: "Password",
  type: FormItemTypeEnum.TEXT,
  label: "Şifre",
  registerOptions: {
    validate: (value) =>
      value.length >= 8 || "Şifre en az 8 karakter olmalıdır",
  },
}

6. Tarih Aralığı​

{
  name: "StartDate",
  type: FormItemTypeEnum.DATE,
  label: "Başlangıç Tarihi",
  registerOptions: {
    validate: (value) => {
      const selectedDate = new Date(value);
      const today = new Date();
      return (
        selectedDate >= today || "Başlangıç tarihi bugünden önce olamaz"
      );
    },
  },
}

7. Email Formatı​

{
  name: "Email",
  type: FormItemTypeEnum.EMAIL,
  label: "E-posta",
  registerOptions: {
    pattern: {
      value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
      message: "Geçerli bir e-posta adresi girin",
    },
  },
}

8. İki Alanın Eşleşmesi​

{
  name: "ConfirmPassword",
  type: FormItemTypeEnum.TEXT,
  label: "Şifreyi Onayla",
  registerOptions: {
    validate: (value, { password }) =>
      value === password || "Şifreler eşleşmiyor",
  },
}

9. Çoklu Seçim Minimum Seçim Sayısı​

{
  name: "SelectedTags",
  type: FormItemTypeEnum.AUTO_COMPLETE,
  label: "Etiketler",
  autoCompleteProps: {
    isMultiple: true,
  },
  registerOptions: {
    validate: (value) =>
      value?.length >= 2 || "En az 2 etiket seçmelisiniz",
  },
}

10. Sadece Sayısal Giriş​

{
  name: "NumericField",
  type: FormItemTypeEnum.NUMBER,
  label: "Sayı",
  registerOptions: {
    pattern: {
      value: /^[0-9]+$/,
      message: "Sadece sayısal değerler kabul edilir",
    },
  },
}

İpuçları​

  • Birden Fazla Validasyon Kullanımı: Bir input için birden fazla validasyon kuralı tanımlayabilirsiniz. Örneğin, hem required hem de maxLength tanımlayabilirsiniz.
  • Özelleştirilmiş Mesajlar: Kullanıcıya daha açıklayıcı mesajlar vermek için message özelliğini kullanın.
  • Custom Validator: İhtiyaçlarınıza göre özelleştirilmiş validasyon kuralları yazabilirsiniz.

Bu doküman, validasyon kurallarını en hızlı ve kolay şekilde uygulamanız için tasarlanmıştır. Daha fazla bilgi için ilgili diğer dokümanları inceleyebilirsiniz.