Validation 2 - Regular Expression ve Client - Side Validation
SelamünAleyküm, geçtiğimiz yazıda Validation'a giriş yaparak Validation nedir ve Custom Validation alt başlıklarını inceledik. Bu yazıda ise Validation konusuna devam ederek Regular Expression ve Client - Side olarak nasıl Validate işlemi yapılacağını ele alacağız.
Regular Expression Validation
Client'lardan ( Kullanıcılardan ) gelen datalara ( verilere ) Regex ile kısıtlaması yapabiliriz.
Misalen, Img class'ımız olsun ve içerisinde FilePath alanımız olsun. Bu alanda Regex ile girilen dosya yolunu fotoğraf mı olduğunun kontrolünü yapalım. Dosya uzantısı .jpg, .gif veya .png olup olmadığına dair bir doğrulatma yapacağız. Img class'ımıza Regex Expression Validation ekleyelim.
public class Img
{
[RegularExpression(@"(http(s?):)|([/|.|\w|\s])*\.(?:jpg|gif|png)")]
public string FilePath { get; set; }
}
Image adında Controller'imiz olsun. HttpPost ile çağırdığımız Action metodunda Model.State.IsValid'in True ya da False olması durumuna göre ekrana string ifadeler yazsın.
public class ImageController : Controller
{
public IActionResult Index()
{
return View();
}
[HttpPost]
public string Index(Img img)
{
if(!ModelState.IsValid)
{
return "Desteklenen dosya biçimi (png, jpg, gif)";
}
return "Dosya Girişiniz Başarılı.";
}
}
Index Action metoduna ait View dosyamıza olsun. Burada formdan FilePath'i alıp Controller tarafına Post edelim.
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model Regular_Expression_and_Jquery_Client_Side_Validation.Models.Img
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<form method="post">
<div class="text-danger" asp-validation-summary="ModelOnly"></div>
<div class="form-group">
<label asp-for="FilePath"></label>
<input asp-for="FilePath" class="form-control" />
<span asp-validation-for="FilePath"></span>
</div>
<input type="submit" class="btn btn-success btn-sm" />
</form>
</body>
</html>
Şimdi projemizi çalıştıralım ve FilePath'a herhagi bir şey yazalım.
Şimdi de Gönder butonuna basalım.
Görüleceği gibi girilen ifade .png, .jpg, .gif uzantısı ile bitmediğinden fotoğraf doğrulamasından geçemedi.
Jquery ile Client-Side Validation
Jquery kütüphanesini kullanarak da modelimize Attribute olarak eklediğimiz Validation'ları kontrol edebiliriz. Bu şekilde ModelState.IsValid'in True mu False mu olduğunu kontrol etmemize gerek kalmaz (yine de güvenlik açısından ModelState.IsValid ile kontrol etmenizde fayda var). Jquery sayesinde client tarafında validation işlemini yapabiliyoruz ve validation'dan geçen veri, Controller katmanına gönderiliyor. Validation'a uymayan alanlara gerekli uyarıları veriyor ve formu doğrulama kontrollerinden geçemeden Server tarafına göndermiyor. Bu şekilde Server'a ekstradan istek göndermemiş oluyoruz. Böylelikle işimiz Client tarafında hallolmuş oluyor.
Validation kontrolleri yapabilmemiz için Jquery kütüphanesini projemize dahil etmemiz yetmez. Jquery'nin Validate ile ilgili plug-in'lerini ( eklentilerini ) de projemize dahil etmemiz gerekir.
Misalen, Bir formdan adresi alıp bu formu Create Action metoduna gönderen bir misal yazalım.
İlk olarak "Address" class'ımızı oluşturalım ve bu class'ın özellikleri ile ilgili alanaları hazırlayalım.
public class Address
{
[Required]
[MinLength(3)]
[Display(Name = "Mahalle")]
public string Neighborhood { get; set; }
[Required]
[MinLength(3)]
[Display(Name = "Sokak")]
public string Street { get; set; }
[Display(Name = "Kapı Numarası")]
public int No { get; set; }
[Required]
[MinLength(3)]
[Display(Name = "İlçe")]
public string Town { get; set; }
[Range(1, 81)]
[Display(Name = "İl Palaka No")]
public int CityId { get; set; }
}
Bu class'ı AddressController içindeki Create Action metoduna gönderelim ve geriye "Adresiniz sisteme kayıt edilmiştir" metnini yazdıralım.
public class AddressController : Controller
{
public IActionResult Creaet()
{
return View();
}
[HttpPost]
public IActionResult Create(Address address)
{
return Ok("Adresiniz sisteme kayıt edilmiştir");
}
}
Create View'imizi oluşturalım ve buraya formdan alacağımız verileri yazalım. Ayrıyeten Jquery'nin Validation ile alakalı pulg-in'lerini View'e eklemeliyiz. Bu şekilde client'a validation ile alakalı uyarıları dönmüş olacağız.
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model Regular_Expression_and_Jquery_Client_Side_Validation.Models.Address
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Creaet</title>
<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/js/jquery.validate.min.js"></script>
<script src="~/js/jquery.validate.unobtrusive.min.js"></script>
<script src="~/js/jquery-2.2.0.min.js"></script>
</head>
<body>
<form method="post">
<div class="text-danger" asp-validation-summary="ModelOnly"></div>
<div class="form-group">
<label asp-for="Neighborhood">Mahalle Adı: </label>
<input type="text" class="form-control" asp-for="Neighborhood" />
<span asp-validation-for="Neighborhood"></span>
</div>
<div class="form-group">
<label asp-for="Street">Sokak Adı: </label>
<input type="text" class="form-control" asp-for="Street" />
<span asp-validation-for="Street"></span>
</div>
<div class="form-group">
<label asp-for="No">Kapı Numarası: </label>
<input type="text" class="form-control" asp-for="No" />
<span asp-validation-for="No"></span>
</div>
<div class="form-group">
<label asp-for="Town">İlçe Adı: </label>
<input type="text" class="form-control" asp-for="Town" />
<span asp-validation-for="Town"></span>
</div>
<div class="form-group">
<label asp-for="CityId">Şehir Plakası: </label>
<input type="text" class="form-control" asp-for="CityId" />
<span asp-validation-for="CityId"></span>
</div>
<input type="submit" class="btn btn-success btn-sm" value="Gönder" />
</form>
</body>
</html>
View tarafındaki kodlarımızda görüleceği üzere form ile ilgili Tag Helper'lardan önce Jquery kütüphanesini ve Validation'a ilişkin plug-in'leri View'imize ekledik.
<script src="~/js/jquery.validate.min.js"></script>
<script src="~/js/jquery.validate.unobtrusive.min.js"></script>
<script src="~/js/jquery-2.2.0.min.js"></script>
Şimdi projemizi çalıştıralım ve ilgili sayfaya request'te ( istekte ) bulunalım. Formumuz yüklendikten sonra ilgili alanlara Validation Attribute'lerine aykırı değerler girip Gönder butonuna basalım.
Ekran çıktısında görüleceği üzere Jquery, validation işlemlerini yapıp gerekli alanlara uyarılarını yaptı. Fakat bu uyarıları İngilizce olarak yaptı. Bunu Türkçe halini istiyorsanız jquery.validate.js plug-in dosyasını buradan indirip projenize eklemeniz gerekir. Bu şekilde client'a gösterilecek uyarı mesajlarını plug-in'inin içinden ayarlama yapabilirsiniz.
Plug-in'in içerisindeki bu kodda istediğiniz değişiklikleri yapıp client'a istediğiniz uyarıları gösterebilirsiniz.
Bu yazımızın sonuna geldik, bu yazıda Regular Expression ve Jquey ile Client-Side olarak nasıl Validation işlemi yapılacağına dair inceleme yaptık. İlgili projenin github adresine buradan ulaşabilirsiniz. İlgilenenlerin faydalanması ümidiyle.
Blog Listesi