ASP.NET Web Sayfaları (Razor) Sitelerinde Kullanıcı Girişini Doğrulama

yazan: Tom FitzMacken

Bu makalede, kullanıcıların ASP.NET Web Sayfaları (Razor) sitesindeki HTML formlarına geçerli bilgiler girmelerini sağlamak için kullanıcılardan aldığınız bilgilerin nasıl doğrulandığı açıklanır.

Öğrenecekleriniz:

Kullanıcının girişinin tanımladığınız doğrulama ölçütlerine uygun olup olmadığını denetleme.

Tüm doğrulama testlerinin geçirilip geçirilmediğini belirleme.

Doğrulama hatalarını görüntüleme (ve bunları biçimlendirme).

Doğrudan kullanıcılardan gelmeyen verileri doğrulama.

Makalede tanıtılan ASP.NET programlama kavramları şunlardır:

Yardımcı Validation .

Html.ValidationSummary ve Html.ValidationMessage yöntemleri.

Öğreticide kullanılan yazılım sürümleri

ASP.NET Web Sayfaları (Razor) 3

Bu öğretici ASP.NET Web Sayfaları 2 ile de çalışır.

Bu makale aşağıdaki bölümleri içerir:

Kullanıcı Giriş Doğrulamasına Genel Bakış
Kullanıcı Girişini Doğrulama
Client-Side Doğrulama Ekleme
Biçimlendirme Doğrulama Hataları
Doğrudan Kullanıcılardan Gelmeyen Verileri Doğrulama

Kullanıcı Giriş Doğrulamasına Genel Bakış

Kullanıcılardan bir sayfaya (örneğin, forma) bilgi girmelerini isterseniz, girdikleri değerlerin geçerli olduğundan emin olmak önemlidir. Örneğin, kritik bilgileri eksik olan bir formu işlemek istemezsiniz.

Kullanıcılar HTML formuna değer girdiğinde, girdikleri değerler dizelerdir. Çoğu durumda, ihtiyacınız olan değerler tamsayılar veya tarihler gibi diğer veri türleridir. Bu nedenle, kullanıcıların girdiği değerlerin doğru bir şekilde uygun veri türlerine dönüştürülediğinden de emin olmanız gerekir.

Değerler üzerinde belirli kısıtlamalarınız da olabilir. Örneğin, kullanıcılar doğru bir tamsayı girse bile, değerin belirli bir aralık içinde olduğundan emin olmanız gerekebilir.

CSS stil sınıflarını kullanan Doğrulama hatalarını gösteren ekran görüntüsü.

Not

Önemli Kullanıcı girişini doğrulamak güvenlik açısından da önemlidir. Kullanıcıların formlara girebileceği değerleri kısıtladığınızda, birinin sitenizin güvenliğini tehlikeye atabilecek bir değer girme olasılığını azaltırsınız.

Kullanıcı Girişini Doğrulama

ASP.NET Web Sayfaları 2'de, kullanıcı girişini test etmek için yardımcıyı Validator kullanabilirsiniz. Temel yaklaşım aşağıdakileri yapmaktır:

Hangi giriş öğelerini (alanları) doğrulamak istediğinizi belirleyin.

Genellikle bir formdaki öğelerdeki <input> değerleri doğrularsınız. Ancak, liste gibi kısıtlanmış bir öğeden gelen girişleri bile tüm girişleri doğrulamak iyi bir <select> uygulamadır. Bu, kullanıcıların sayfadaki denetimleri atlamadığından ve form göndermediğinden emin olmak için yardımcı olur.
Sayfa kodunda, yardımcının yöntemlerini Validation kullanarak her giriş öğesi için tek tek doğrulama denetimleri ekleyin.

Gerekli alanları denetlemek için (tek bir alan için) veya Validation.RequireFields(field1, field2, ...)) (alan listesi için) kullanın Validation.RequireField(field, [error message]) . Diğer doğrulama türleri için kullanın Validation.Add(field, ValidationType). için ValidationTypeşu seçenekleri kullanabilirsiniz:

Validator.DateTime ([error message])
Validator.Decimal([error message])
Validator.EqualsTo(otherField [, error message])
Validator.Float([error message])
Validator.Integer([error message])
Validator.Range(min, max [, error message])
Validator.RegEx(pattern [, error message])
Validator.Required([error message])
Validator.StringLength(length)
Validator.Url([error message])
Sayfa gönderildiğinde, öğesini denetleyerek doğrulamanın geçirilip geçirilmediğini denetleyin Validation.IsValid:
```
if(IsPost && Validation.IsValid()){
    // Process form submit
}
```
Doğrulama hataları varsa, normal sayfa işlemeyi atlarsınız. Örneğin, sayfanın amacı veritabanını güncelleştirmekse, tüm doğrulama hataları düzeltene kadar bunu yapmazsınız.
Doğrulama hataları varsa, veya veya ya da Html.ValidationMessageher ikisini kullanarak Html.ValidationSummary sayfanın işaretlemesinde hata iletilerini görüntüleyin.

Aşağıdaki örnekte, bu adımları gösteren bir sayfa gösterilmektedir.

@{
    var message="";
    // Specify validation requirements for different fields.
    Validation.RequireField("coursename", "Class name is required");
    Validation.RequireField("credits", "Credits is required");
    Validation.Add("coursename", Validator.StringLength(5));
    Validation.Add("credits", Validator.Integer("Credits must be an integer"));
    Validation.Add("credits", Validator.Range(1, 5, "Credits must be between 1 and 5"));
    Validation.Add("startDate", Validator.DateTime("Start date must be a date"));

    if (IsPost)  {
        // Before processing anything, make sure that all user input is valid.
        if (Validation.IsValid()) {
            var coursename = Request["coursename"];
            var credits = Request["credits"].AsInt();
            var startDate = Request["startDate"].AsDateTime();
            message += @"For Class, you entered " + coursename;
            message += @"<br/>For Credits, you entered " + credits.ToString();
            message += @"<br/>For Start Date, you entered " + startDate.ToString("dd-MMM-yyyy");

            // Further processing here
        }
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Validation Example</title>
  <style>
      body {margin: 1in; font-family: 'Segoe UI'; font-size: 11pt; }
   </style>
</head>
<body>
  <h1>Validation Example</h1>
  <p>This example page asks the user to enter information about some classes at school.</p>
  <form method="post">
    @Html.ValidationSummary()
    <div>
      <label for="coursename">Course name: </label>
      <input type="text"
         name="coursename"
         value="@Request["coursename"]"
      />
      @Html.ValidationMessage("coursename")
    </div>

    <div>
      <label for="credits">Credits: </label>
      <input type="text"
         name="credits"
         value="@Request["credits"]"
      />
      @Html.ValidationMessage("credits")
    </div>

    <div>
      <label for="startDate">Start date: </label>
      <input type="text"
         name="startDate"
         value="@Request["startDate"]"
      />
      @Html.ValidationMessage("startDate")
    </div>

   <div>
      <input type="submit" value="Submit" class="submit" />
    </div>

    <div>
      @if(IsPost){
        <p>@Html.Raw(message)</p>
      }
    </div>
  </form>
</body>
</html>

Doğrulamanın nasıl çalıştığını görmek için bu sayfayı çalıştırın ve kasıtlı olarak hatalar yapın. Örneğin, bir kurs adı girmeyi unutursanız, bir ders adı girerseniz ve geçersiz bir tarih girerseniz sayfa şöyle görünür:

İşlenen sayfadaki doğrulama hataları

Client-Side Doğrulama Ekleme

Varsayılan olarak, kullanıcılar sayfayı gönderdikten sonra kullanıcı girişi doğrulanır; diğer bir deyişle doğrulama sunucu kodunda gerçekleştirilir. Bu yaklaşımın dezavantajlarından biri, kullanıcıların sayfayı gönderene kadar hata yaptıklarını bilmemeleridir. Form uzun veya karmaşıksa, yalnızca sayfa gönderildikten sonra hataları raporlamak kullanıcı için uygun olmayabilir.

İstemci betiğinde doğrulama gerçekleştirmek için destek ekleyebilirsiniz. Bu durumda, kullanıcılar tarayıcıda çalışırken doğrulama gerçekleştirilir. Örneğin, bir değerin tamsayı olması gerektiğini belirttiğinizi varsayalım. Bir kullanıcı tamsayı olmayan bir değer girerse, kullanıcı giriş alanından çıkar çıkmaz hata bildirilir. Kullanıcılar, kendileri için uygun olan anında geri bildirim alır. İstemci tabanlı doğrulama, kullanıcının birden çok hatayı düzeltmek için formu gönderme sayısını da azaltabilir.

Not

İstemci tarafı doğrulamayı kullansanız bile doğrulama her zaman sunucu kodunda gerçekleştirilir. Sunucu kodunda doğrulama gerçekleştirmek, kullanıcıların istemci tabanlı doğrulamayı atlaması durumunda bir güvenlik önlemidir.

Sayfaya aşağıdaki JavaScript kitaplıklarını kaydedin:
```
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js">
</script>
<script
src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.js">
</script>
<script src="~/Scripts/jquery.validate.unobtrusive.js">
</script>
```
Kitaplıklardan ikisi bir içerik teslim ağından (CDN) yüklenebilir, bu nedenle bunları bilgisayarınızda veya sunucunuzda olması gerekmez. Ancak, jquery.validate.unobtrusive.jsyerel bir kopyasına sahip olmanız gerekir. Kitaplığı içeren bir WebMatrix şablonuyla ( Başlangıç Sitesi gibi) çalışmıyorsanız, Başlangıç Sitesi'ni temel alan bir Web Sayfaları sitesi oluşturun. Ardından .js dosyasını geçerli sitenize kopyalayın.
İşaretlem içinde, doğrulamakta olduğunuz her öğe için öğesine Validation.For(field)bir çağrı ekleyin. Bu yöntem, istemci tarafı doğrulaması tarafından kullanılan öznitelikleri yayar. (Yöntemi, gerçek JavaScript kodunu yaymak yerine gibi data-val-...öznitelikler yayar. Bu öznitelikler, işi yapmak için jQuery kullanan engelleyici olmayan istemci doğrulamasını destekler.)

Aşağıdaki sayfada, daha önce gösterilen örne istemci doğrulama özelliklerinin nasıl ekleneceği gösterilmektedir.

@{
    // Note that client validation as implemented here will work only with
    // ASP.NET Web Pages 2.

    var message="";
    // Specify validation requirements for different fields.
    Validation.RequireField("coursename", "Class name is required");
    Validation.RequireField("credits", "Credits is required");
    Validation.Add("coursename", Validator.StringLength(5));
    Validation.Add("credits", Validator.Integer("Credits must be an integer"));
    Validation.Add("credits", Validator.Range(1, 5, "Credits must be between 1 and 5"));
    Validation.Add("startDate", Validator.DateTime("Start date must be a date"));

    if (IsPost)  {
        // Before processing anything, make sure that all user input is valid.
        if (Validation.IsValid()) {
            var coursename = Request["coursename"];
            var credits = Request["credits"].AsInt();
            var startDate = Request["startDate"].AsDateTime();
            message += @"For Class, you entered " + coursename;
            message += @"<br/>For Credits, you entered " + credits.ToString();
            message += @"<br/>For Start Date, you entered " + startDate.ToString("dd-MMM-yyyy");

            // Further processing here
        }
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Validation Example with Client Validation</title>
  <style>
      body {margin: 1in; font-family: 'Segoe UI'; font-size: 11pt; }
   </style>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js"></script>
    <script
        src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.js">
    </script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
</head>
<body>
  <h1>Validation Example with Client Validation</h1>
  <p>This example page asks the user to enter information about some classes at school.</p>
  <form method="post">
    @Html.ValidationSummary()
    <div>
      <label for="coursename">Course name: </label>
      <input type="text"
         name="coursename"
         value="@Request["coursename"]"
         @Validation.For("coursename")
      />
      @Html.ValidationMessage("coursename")
    </div>

    <div>
      <label for="credits">Credits: </label>
      <input type="text"
         name="credits"
         value="@Request["credits"]"
         @Validation.For("credits")
      />
      @Html.ValidationMessage("credits")
    </div>

    <div>
      <label for="startDate">Start date: </label>
      <input type="text"
         name="startDate"
         value="@Request["startDate"]"
         @Validation.For("startDate")
      />
      @Html.ValidationMessage("startDate")
    </div>

   <div>
      <input type="submit" value="Submit" class="submit" />
    </div>

    <div>
      @if(IsPost){
        <p>@Html.Raw(message)</p>
      }
    </div>
  </form>
</body>
</html>

Tüm doğrulama denetimleri istemcide çalışmaz. Özellikle, veri türü doğrulama (tamsayı, tarih vb.) istemcide çalışmaz. Aşağıdaki denetimler hem istemci hem de sunucu üzerinde çalışır:

Required
Range(minValue, maxValue)
StringLength(maxLength[, minLength])
Regex(pattern)
EqualsTo(otherField)

Bu örnekte, geçerli bir tarih testi istemci kodunda çalışmaz. Ancak, test sunucu kodunda gerçekleştirilir.

Biçimlendirme Doğrulama Hataları

Aşağıdaki ayrılmış adlara sahip CSS sınıflarını tanımlayarak doğrulama hatalarının nasıl görüntüleneceğini denetleyebilirsiniz:

field-validation-error. Hata görüntülerken yönteminin çıkışını Html.ValidationMessage tanımlar.
field-validation-valid. Hata olmadığında yönteminin çıkışını Html.ValidationMessage tanımlar.
input-validation-error. Hata olduğunda öğelerin nasıl <input> işlendiğini tanımlar. (Örneğin, bir giriş> öğesinin <arka plan rengini değeri geçersizse farklı bir renge ayarlamak için bu sınıfı kullanabilirsiniz.) Bu CSS sınıfı yalnızca istemci doğrulaması sırasında kullanılır (ASP.NET Web Sayfaları 2'de).
input-validation-valid. Hata olmadığında öğelerin görünümünü <input> tanımlar.
validation-summary-errors. Hataların listesini görüntülemekte Html.ValidationSummary olduğu yöntemin çıkışını tanımlar.
validation-summary-valid. Hata olmadığında yönteminin çıkışını Html.ValidationSummary tanımlar.

Aşağıdaki <style> blokta hata koşullarına yönelik kurallar gösterilmektedir.

<style>
.validation-summary-errors {
  border:2px solid red;
  color:red;
  font-weight:bold;
  margin:6px;
  width:30%;
}

.field-validation-error{
  color:red;
   font-weight:bold;
   background-color:yellow;
}

.input-validation-error{
  color:red;
  font-weight:bold;
  background-color:pink;
}
</style>

Bu stil bloğunu makalenin önceki bölümlerinde yer alan örnek sayfalara eklerseniz, hata görüntüsü aşağıdaki çizime benzer olacaktır:

CSS stil sınıflarını kullanan doğrulama hataları

Not

ASP.NET Web Sayfaları 2'de istemci doğrulama kullanmıyorsanız, öğeler için <input> CSS sınıfları ()input-validation-error ve input-validation-valid hiçbir etkisi yoktur.

Statik ve Dinamik Hata Görüntüsü

CSS kuralları ve validation-summary-validgibi çiftler halinde validation-summary-errors gelir. Bu çiftler her iki koşul için de kurallar tanımlamanıza olanak sağlar: hata koşulu ve "normal" (hata olmayan) koşul. Hata görüntüleme için işaretlemenin hata olmasa bile her zaman işlendiğini anlamak önemlidir. Örneğin, bir sayfanın işaretlemesinde bir Html.ValidationSummary yöntemi varsa, sayfa ilk kez istendiğinde bile sayfa kaynağı aşağıdaki işaretlemeyi içerir:

<div class="validation-summary-valid" data-valmsg-summary="true"><ul></ul></div>

Başka bir deyişle, Html.ValidationSummary hata listesi boş olsa bile yöntemi her zaman bir <div> öğeyi ve listeyi işler. Benzer şekilde yöntemi, Html.ValidationMessage hata olmasa bile her zaman bir <span> öğeyi tek bir alan hatası için yer tutucu olarak işler.

Bazı durumlarda, bir hata iletisi görüntülenmesi sayfanın yeniden akıtılmasına neden olabilir ve sayfadaki öğelerin gezinmesine neden olabilir. ile biten -valid CSS kuralları, bu sorunu önlemeye yardımcı olabilecek bir düzen tanımlamanıza olanak sağlar. Örneğin, her ikisinin de aynı sabit boyuta sahip olmasını ve field-validation-valid tanımlayabilirsinizfield-validation-error. Bu şekilde, alanın görüntüleme alanı statiktir ve bir hata iletisi görüntülenirse sayfa akışını değiştirmez.

Doğrudan Kullanıcılardan Gelmeyen Verileri Doğrulama

Bazen doğrudan bir HTML formundan gelmeyen bilgileri doğrulamanız gerekir. Tipik bir örnek, aşağıdaki örnekte olduğu gibi sorgu dizesinde bir değerin geçirildiği bir sayfadır:

http://server/myapp/EditClassInformation?classid=1022

Bu durumda, sayfaya geçirilen değerin (burada, değeri classidiçin 1022) geçerli olduğundan emin olmak istersiniz. Bu doğrulamayı Validation gerçekleştirmek için doğrudan yardımcıyı kullanamazsınız. Ancak doğrulama hata iletilerini görüntüleme özelliği gibi doğrulama sisteminin diğer özelliklerini kullanabilirsiniz.

Not

Önemli Form alanı değerleri, sorgu dizesi değerleri ve tanımlama bilgisi değerleri de dahil olmak üzere her zaman herhangi bir kaynaktan elde ettiğiniz değerleri doğrulayın. kişilerin bu değerleri değiştirmesi kolaydır (kötü amaçlı olabilir). Bu nedenle, uygulamanızı korumak için bu değerleri denetlemeniz gerekir.

Aşağıdaki örnekte, sorgu dizesinde geçirilen bir değeri nasıl doğrulayabilirsiniz gösterilmektedir. Kod, değerin boş olmadığını ve bir tamsayı olduğunu test eder.

if(!IsPost){
    if(!Request.QueryString["classid"].IsEmpty() && Request.QueryString["classid"].IsInt()) {
        // Process the value
    }
    else{
        Validation.AddFormError("No class was selected.");
    }
}

İstek bir form gönderimi ()if(!IsPost) olmadığında testin gerçekleştirildiğini unutmayın. Bu test, sayfa ilk kez istendiğinde geçer, ancak istek bir form gönderimi olduğunda geçmeyecektir.

Bu hatayı görüntülemek için çağırarak Validation.AddFormError("message")hatayı doğrulama hataları listesine ekleyebilirsiniz. Sayfa yöntemine Html.ValidationSummary bir çağrı içeriyorsa, kullanıcı girişi doğrulama hatası gibi hata orada görüntülenir.

Ek Kaynaklar

ASP.NET Web Sayfaları Sitelerinde HTML Formlarıyla Çalışma

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2023-07-13