ASP.NET Web Pages (Razor) sitelerindeki kullanıcı girişini doğrulama

Tom FitzMacken tarafından

Bu makalede, kullanıcıların bir ASP.NET Web Pages (Razor) sitesinde HTML formlarında geçerli bilgiler girdiğinizden emin olmak için —, kullanıcılardan aldığınız bilgilerin nasıl doğrulanacağı anlatılmaktadır.

Öğrenecekleriniz:

  • Kullanıcı girişinin tanımladığınız doğrulama ölçütleriyle eşleşip eşleşmediğini denetleme.
  • Tüm doğrulama testlerinin başarılı olup olmadığını belirleme.
  • Doğrulama hatalarını görüntüleme (ve bunları biçimlendirme).
  • Doğrudan kullanıcılardan gelmeyen verileri doğrulama.

Makalesinde sunulan ASP.NET programlama kavramları şunlardır:

  • Validation Yardımcısı.
  • 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 Pages 2 ile de kullanılabilir.

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

Kullanıcı girişi doğrulamasına genel bakış

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

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

Ayrıca, değerler üzerinde belirli kısıtlamalara de sahip olabilirsiniz. Kullanıcılar, örneğin, doğru bir tamsayı girse bile, değerin belirli bir aralık dahilinde olduğundan emin olmanız gerekebilir.

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

Note

Önemli Güvenlik için Kullanıcı girişinin doğrulanması da önemlidir. Kullanıcıların formlara girebilen değerleri kısıtladığınızda, birisinin sitenizin güvenliğini tehlikeye atabilecek bir değer girebilme olasılığını azaltırsınız.

Kullanıcı girişini doğrulama

ASP.NET Web Pages 2 ' de, Kullanıcı girişini sınamak için Validator yardımcısını kullanabilirsiniz. Temel yaklaşım şunlardır:

  1. Hangi giriş öğelerinin (alanları) doğrulamak istediğinizi saptayın.

    Genellikle bir formdaki <input> öğelerdeki değerleri doğrularsınız. Ancak, <select> listesi gibi kısıtlanmış bir öğeden gelen tüm giriş, hatta girişi doğrulamak iyi bir uygulamadır. Bu, kullanıcıların bir sayfadaki denetimleri atlayıp form gönderemeyeceği konusunda emin olmanıza yardımcı olur.

  2. Sayfa kodunda, Validation Yardımcısı yöntemlerini kullanarak her giriş öğesi için ayrı doğrulama denetimleri ekleyin.

    Gerekli alanları denetlemek için Validation.RequireField(field, [error message]) (tek bir alan için) veya Validation.RequireFields(field1, field2, ...)) (alanların listesi için) kullanın. Diğer doğrulama türleri için Validation.Add(field, ValidationType)kullanın. ValidationTypeiçin aşağıdaki 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])

  3. Sayfa gönderildiğinde doğrulamanın Validation.IsValiddenetleyerek başarılı olup olmadığını denetleyin:

    if(IsPost && Validation.IsValid()){
        // Process form submit
    }
    

    Herhangi bir doğrulama hatası varsa, normal sayfa işlemeyi atlayabilirsiniz. Örneğin, sayfanın amacı bir veritabanını güncelleştirmediğinde, tüm doğrulama hataları düzeltilene kadar bunu yapmayın.

  4. Doğrulama hataları varsa, Html.ValidationSummary veya Html.ValidationMessageveya her ikisini de kullanarak sayfa biçimlendirmesinde 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 bilinçli olarak hata oluşturun. Örneğin, bir kurs adı girmeyi unuttuğunuzda, bir, girdiğinizde ve geçersiz bir tarih girerseniz, sayfa şöyle görünür:

İşlenmiş sayfada doğrulama hataları

Istemci tarafı doğrulama ekleme

Varsayılan olarak, Kullanıcı girişi, kullanıcılar sayfayı gönderdikten sonra onaylanır — diğer bir deyişle, doğrulama sunucu kodunda gerçekleştirilir. Bu yaklaşımın bir dezavantajı, kullanıcıların sayfayı gönderdikten sonra bir hata yaptığını bilmez. Bir form uzun veya karmaşık ise, yalnızca sayfa gönderildikten sonra hataları bildirmek Kullanıcı için kullanışlı olabilir.

İstemci betiği içinde doğrulama gerçekleştirmek için destek ekleyebilirsiniz. Bu durumda, kullanıcı tarayıcıda çalıştığı için doğrulama gerçekleştirilir. Örneğin, bir değerin tamsayı olması gerektiğini varsayalım. Kullanıcı tamsayı olmayan bir değer girerse, Kullanıcı giriş alanından ayrıldığında hata bildirilir. Kullanıcılar, bunlar için uygun olan anında geri bildirim alırlar. İstemci tabanlı doğrulama, kullanıcının birden çok hatayı düzeltmek için formu kaç kez göndermesi gerektiğini de azaltabilir.

Note

İstemci tarafı doğrulaması kullanıyor olsanız bile, doğrulama her zaman sunucu kodunda da gerçekleştirilir. Sunucu kodunda doğrulamanın gerçekleştirilmesi, kullanıcıların istemci tabanlı doğrulamayı atlaması durumunda bir güvenlik ölçümüdür.

  1. Aşağıdaki JavaScript kitaplıklarını sayfaya 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>
    

    Kütüphanelerin ikisi bir Content Delivery Network (CDN) ile yüklenebilir, bu nedenle bilgisayarınızda veya sunucunuzda olması gerekmez. Ancak, jQuery. Validate. unobtrusive. js' nin yerel kopyasına sahip olmanız gerekir. Kitaplığı içeren bir WebMatrix şablonuyla ( Başlatıcı site gibi) çalışmıyorsanız, Başlatıcı siteyitemel alan bir Web sayfaları sitesi oluşturun. Sonra . js dosyasını geçerli sitenize kopyalayın.

  2. Biçimlendirme ' de, doğruladığınızı her öğe için Validation.For(field)bir çağrı ekleyin. Bu yöntem, istemci tarafı doğrulama tarafından kullanılan öznitelikleri yayar. (Gerçek JavaScript kodunu yayma yerine, yöntem data-val-...gibi öznitelikleri yayar. Bu öznitelikler, işi yapmak için jQuery kullanan istemci doğrulamasını destekler.)

Aşağıdaki sayfada, daha önce gösterilen örneğe 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>

İstemci üzerinde tüm doğrulama denetimleri çalıştırılmadı. Özellikle, veri türü doğrulama (tamsayı, tarih vb.) istemcide çalıştırılmayın. 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ışmayacaktır. Ancak, test sunucu kodunda gerçekleştirilir.

Doğrulama hatalarını biçimlendirme

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

  • field-validation-error. Bir hata görüntülenirken Html.ValidationMessage yönteminin çıkışını tanımlar.
  • field-validation-valid. Hata olmadığında Html.ValidationMessage yönteminin çıkışını tanımlar.
  • input-validation-error. Bir hata olduğunda <input> öğelerinin nasıl işleneceğini tanımlar. (Örneğin, bir <girişi> öğ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 Pages 2).
  • input-validation-valid. Hata olmadığında <input> öğelerinin görünümünü tanımlar.
  • validation-summary-errors. Html.ValidationSummary yönteminin çıkışını tanımlar ve bu, hataların bir listesini görüntüler.
  • validation-summary-valid. Hata olmadığında Html.ValidationSummary yönteminin çıkışını tanımlar.

Aşağıdaki <style> bloğu hata koşulları kurallarını gösterir.

<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 kısımlarında bulunan örnek sayfalara dahil ederseniz, hata görünümü aşağıdaki çizimde gösterildiği gibi görünür:

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

Note

ASP.NET Web Pages 2 ' de istemci doğrulaması kullanmıyorsanız, <input> öğeleri için CSS sınıfları (input-validation-error ve input-validation-valid hiçbir etkiye sahip olmaz.

Statik ve dinamik hata görüntüleme

CSS kuralları validation-summary-errors ve validation-summary-validgibi çiftler halinde gelir. Bu çiftler her iki koşul için kurallar tanımlamanızı sağlar: bir hata durumu ve "normal" (hata olmayan) koşulu. Hata olmadan biçimlendirmenin her zaman bir hata olmasa bile, her zaman işlenip işlenmeyeceğini anlamak önemlidir. Örneğin, bir sayfada biçimlendirme içinde bir Html.ValidationSummary yöntemi varsa, sayfa kaynağı ilk kez istendiği zaman bile aşağıdaki biçimlendirmeyi içerecektir:

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

Diğer bir deyişle, Html.ValidationSummary yöntemi her zaman bir <div> öğesi ve bir liste oluşturur, bu da hata listesi boş olsa bile. Benzer şekilde, Html.ValidationMessage yöntemi her zaman bir alan hatası için bir yer tutucu olarak bir <span> öğesi oluşturur, aksi halde bir hata yoktur.

Bazı durumlarda, bir hata iletisi görüntülenirken sayfanın yeniden akıtılmasına neden olabilir ve sayfadaki öğelerin etrafında hareket olmasına neden olabilir. -valid biten CSS kuralları, bu sorunu önlemeye yardımcı olabilecek bir düzen tanımlamanızı sağlar. Örneğin, field-validation-error tanımlayabilir ve field-validation-valid her ikisi de aynı sabit boyuta sahip olabilir. 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 bir HTML formundan doğrudan gelmeyen bilgileri doğrulamanız gerekebilir. Tipik bir örnek, aşağıdaki örnekte olduğu gibi bir sorgu dizesinde bir değerin geçirildiği bir sayfasıdır:

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

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

Note

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

Aşağıdaki örnek, bir sorgu dizesinde iletilen bir değeri nasıl doğrulayacağınızı gösterir. Kod, değerin boş ve tamsayı olduğunu sınar.

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 olmadığında testin gerçekleştirildiğinden (if(!IsPost)) dikkat edin. Bu test sayfa istendiğinde ilk kez geçer, ancak istek bir form gönderimi olduğunda bunu yapmayabilir.

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

Ek Kaynaklar

ASP.NET Web Pages sitelerinde HTML formlarıyla çalışma