Bagikan melalui

Memvalidasi Input Pengguna di Situs Halaman Web ASP.NET (Razor)

oleh Tom FitzMacken

Artikel ini membahas cara memvalidasi informasi yang Anda dapatkan dari pengguna — yaitu, untuk memastikan bahwa pengguna memasukkan informasi yang valid dalam formulir HTML di situs halaman web (Razor) ASP.NET.

Yang akan Anda pelajari:

  • Cara memeriksa apakah input pengguna cocok dengan kriteria validasi yang Anda tentukan.
  • Cara menentukan apakah semua tes validasi telah lulus.
  • Cara menampilkan kesalahan validasi (dan cara memformatnya).
  • Cara memvalidasi data yang tidak berasal langsung dari pengguna.

Ini adalah konsep pemrograman ASP.NET yang diperkenalkan dalam artikel:

  • Pembantunya Validation .
  • Metode Html.ValidationSummary dan Html.ValidationMessage.

Versi perangkat lunak yang digunakan dalam tutorial

  • Halaman Web ASP.NET (Razor) 3

Tutorial ini juga berfungsi dengan ASP.NET Web Pages 2.

Artikel ini berisi bagian berikut:

Gambaran Umum Validasi Input Pengguna

Jika Anda meminta pengguna untuk memasukkan informasi di halaman — misalnya, ke dalam formulir — penting untuk memastikan bahwa nilai yang mereka masukkan valid. Misalnya, Anda tidak ingin memproses formulir yang kehilangan informasi penting.

Saat pengguna memasukkan nilai ke dalam formulir HTML, nilai yang mereka masukkan adalah string. Dalam banyak kasus, nilai yang Anda butuhkan adalah beberapa jenis data lainnya, seperti bilangan bulat atau tanggal. Oleh karena itu, Anda juga harus memastikan bahwa nilai yang dimasukkan pengguna dapat dikonversi dengan benar ke jenis data yang sesuai.

Anda mungkin juga memiliki batasan tertentu pada nilai. Bahkan jika pengguna memasukkan bilangan bulat dengan benar, misalnya, Anda mungkin perlu memastikan bahwa nilainya berada dalam rentang tertentu.

Cuplikan layar memperlihatkan Kesalahan validasi yang menggunakan kelas gaya CSS.

Catatan

Penting Memvalidasi input pengguna juga penting untuk keamanan. Saat Anda membatasi nilai yang bisa dimasukkan pengguna dalam formulir, Anda mengurangi kemungkinan seseorang dapat memasukkan nilai yang dapat membahayakan keamanan situs Anda.

Memvalidasi Input Pengguna

Di ASP.NET Halaman Web 2, Anda dapat menggunakan pembantu Validator untuk menguji input pengguna. Pendekatan dasarnya adalah melakukan hal berikut:

  1. Tentukan elemen input (bidang) mana yang ingin Anda validasi.

    Anda biasanya memvalidasi nilai dalam <input> elemen dalam formulir. Namun, ini adalah praktik yang baik untuk memvalidasi semua input, bahkan input yang berasal dari elemen yang dibatasi seperti <select> daftar. Ini membantu memastikan bahwa pengguna tidak melewati kontrol di halaman dan mengirimkan formulir.

  2. Dalam kode halaman, tambahkan pemeriksaan validasi individual untuk setiap elemen input dengan menggunakan metode pembantu Validation .

    Untuk memeriksa bidang yang diperlukan, gunakan Validation.RequireField(field, [error message]) (untuk bidang individual) atau Validation.RequireFields(field1, field2, ...)) (untuk daftar bidang). Untuk jenis validasi lainnya, gunakan Validation.Add(field, ValidationType). Untuk ValidationType, Anda dapat menggunakan opsi ini:

    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. Ketika halaman dikirimkan, periksa apakah validasi telah lulus dengan memeriksa Validation.IsValid:

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

    Jika ada kesalahan validasi, Anda melewati pemrosesan halaman normal. Misalnya, jika tujuan halaman adalah untuk memperbarui database, Anda tidak melakukannya sampai semua kesalahan validasi telah diperbaiki.

  4. Jika ada kesalahan validasi, tampilkan pesan kesalahan di markup halaman dengan menggunakan Html.ValidationSummary atau Html.ValidationMessage, atau keduanya.

Contoh berikut menunjukkan halaman yang mengilustrasikan langkah-langkah ini.

@{
    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>

Untuk melihat cara kerja validasi, jalankan halaman ini dan sengaja buat kesalahan. Misalnya, inilah tampilan halaman jika Anda lupa memasukkan nama kursus, jika Anda memasukkan, dan jika Anda memasukkan tanggal yang tidak valid:

Kesalahan validasi di halaman yang dirender

Menambahkan Validasi Client-Side

Secara default, input pengguna divalidasi setelah pengguna mengirimkan halaman — yaitu, validasi dilakukan dalam kode server. Kerugian dari pendekatan ini adalah bahwa pengguna tidak tahu bahwa mereka telah membuat kesalahan sampai setelah mereka mengirimkan halaman. Jika formulir panjang atau kompleks, melaporkan kesalahan hanya setelah halaman dikirimkan dapat meremajakan pengguna.

Anda dapat menambahkan dukungan untuk melakukan validasi dalam skrip klien. Dalam hal ini, validasi dilakukan saat pengguna bekerja di browser. Misalnya, Anda menentukan bahwa nilai harus berupa bilangan bulat. Jika pengguna memasukkan nilai non-bilangan bulat, kesalahan dilaporkan segera setelah pengguna meninggalkan bidang entri. Pengguna mendapatkan umpan balik langsung, yang nyaman bagi mereka. Validasi berbasis klien juga dapat mengurangi berapa kali pengguna harus mengirimkan formulir untuk memperbaiki beberapa kesalahan.

Catatan

Bahkan jika Anda menggunakan validasi sisi klien, validasi selalu juga dilakukan dalam kode server. Melakukan validasi dalam kode server adalah tindakan keamanan, jika pengguna melewati validasi berbasis klien.

  1. Daftarkan pustaka JavaScript berikut di halaman:

    <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>

    Dua pustaka dapat dimuat dari jaringan pengiriman konten (CDN), sehingga Anda tidak perlu memilikinya di komputer atau server Anda. Namun, Anda harus memiliki salinan lokaljquery.validate.unobtrusive.js. Jika Anda belum bekerja dengan templat WebMatrix (seperti Situs Pemula ) yang menyertakan pustaka, buat situs Halaman Web yang didasarkan pada Situs Pemula. Kemudian salin file .js ke situs Anda saat ini.

  2. Dalam markup, untuk setiap elemen yang sedang Anda validasi, tambahkan panggilan ke Validation.For(field). Metode ini memancarkan atribut yang digunakan oleh validasi sisi klien. (Daripada memancarkan kode JavaScript aktual, metode memancarkan atribut seperti data-val-.... Atribut ini mendukung validasi klien yang tidak mengganggu yang menggunakan jQuery untuk melakukan pekerjaan.)

Halaman berikut ini memperlihatkan cara menambahkan fitur validasi klien ke contoh yang diperlihatkan sebelumnya.

@{
    // 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>

Tidak semua pemeriksaan validasi berjalan pada klien. Secara khusus, validasi jenis data (bilangan bulat, tanggal, dan sebagainya) tidak berjalan pada klien. Pemeriksaan berikut berfungsi pada klien dan server:

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

Dalam contoh ini, pengujian untuk tanggal yang valid tidak akan berfungsi dalam kode klien. Namun, pengujian akan dilakukan dalam kode server.

Kesalahan Validasi Pemformatan

Anda dapat mengontrol bagaimana kesalahan validasi ditampilkan dengan menentukan kelas CSS yang memiliki nama khusus berikut:

  • field-validation-error. Menentukan output Html.ValidationMessage metode saat menampilkan kesalahan.
  • field-validation-valid. Menentukan output Html.ValidationMessage metode ketika tidak ada kesalahan.
  • input-validation-error. Menentukan bagaimana <input> elemen dirender saat ada kesalahan. (Misalnya, Anda dapat menggunakan kelas ini untuk mengatur warna <latar belakang elemen input> ke warna yang berbeda jika nilainya tidak valid.) Kelas CSS ini hanya digunakan selama validasi klien (di ASP.NET Halaman Web 2).
  • input-validation-valid. Menentukan tampilan <input> elemen ketika tidak ada kesalahan.
  • validation-summary-errors. Menentukan output metode yang Html.ValidationSummary menampilkan daftar kesalahan.
  • validation-summary-valid. Menentukan output Html.ValidationSummary metode ketika tidak ada kesalahan.

Blok berikut <style> menunjukkan aturan untuk kondisi kesalahan.

<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>

Jika Anda menyertakan blok gaya ini di halaman contoh dari sebelumnya di artikel, tampilan kesalahan akan terlihat seperti ilustrasi berikut:

Kesalahan validasi yang menggunakan kelas gaya CSS

Catatan

Jika Anda tidak menggunakan validasi klien di ASP.NET Halaman Web 2, kelas CSS untuk <input> elemen (input-validation-error dan input-validation-valid tidak berpengaruh.

Tampilan Kesalahan Statis dan Dinamis

Aturan CSS berpasangan, seperti validation-summary-errors dan validation-summary-valid. Pasangan ini memungkinkan Anda menentukan aturan untuk kedua kondisi: kondisi kesalahan dan kondisi "normal" (non-kesalahan). Penting untuk dipahami bahwa markup untuk tampilan kesalahan selalu dirender, meskipun tidak ada kesalahan. Misalnya, jika halaman memiliki Html.ValidationSummary metode dalam markup, sumber halaman akan berisi markup berikut bahkan ketika halaman diminta untuk pertama kalinya:

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

Dengan kata lain, Html.ValidationSummary metode ini selalu merender <div> elemen dan daftar, meskipun daftar kesalahan kosong. Demikian pula, Html.ValidationMessage metode ini selalu merender <span> elemen sebagai tempat penampung untuk kesalahan bidang individual, bahkan jika tidak ada kesalahan.

Dalam beberapa situasi, menampilkan pesan kesalahan dapat menyebabkan halaman di-reflow dan dapat menyebabkan elemen pada halaman berpindah-pindah. Aturan CSS yang berakhiran -valid memungkinkan Anda menentukan tata letak yang dapat membantu mencegah masalah ini. Misalnya, Anda dapat menentukan field-validation-error dan field-validation-valid keduanya memiliki ukuran tetap yang sama. Dengan begitu, area tampilan untuk bidang bersifat statis dan tidak akan mengubah alur halaman jika pesan kesalahan ditampilkan.

Memvalidasi Data yang Tidak Berasal Langsung dari Pengguna

Terkadang Anda harus memvalidasi informasi yang tidak berasal langsung dari formulir HTML. Contoh umumnya adalah halaman di mana nilai diteruskan dalam string kueri, seperti dalam contoh berikut:

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

Dalam hal ini, Anda ingin memastikan bahwa nilai yang diteruskan ke halaman (di sini, 1022 untuk nilai classid) valid. Anda tidak dapat langsung menggunakan pembantu Validation untuk melakukan validasi ini. Namun, Anda dapat menggunakan fitur lain dari sistem validasi, seperti kemampuan untuk menampilkan pesan kesalahan validasi.

Catatan

Penting Selalu validasi nilai yang Anda dapatkan dari sumber apa pun , termasuk nilai bidang formulir, nilai string kueri, dan nilai cookie. Sangat mudah bagi orang untuk mengubah nilai-nilai ini (mungkin untuk tujuan berbahaya). Jadi Anda harus memeriksa nilai-nilai ini untuk melindungi aplikasi Anda.

Contoh berikut menunjukkan bagaimana Anda dapat memvalidasi nilai yang diteruskan dalam string kueri. Kode menguji bahwa nilainya tidak kosong dan merupakan bilangan bulat.

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

Perhatikan bahwa pengujian dilakukan ketika permintaan bukan pengiriman formulir (if(!IsPost)). Pengujian ini akan lulus pertama kalinya halaman diminta, tetapi tidak ketika permintaan adalah pengiriman formulir.

Untuk menampilkan kesalahan ini, Anda dapat menambahkan kesalahan ke daftar kesalahan validasi dengan memanggil Validation.AddFormError("message"). Jika halaman berisi panggilan ke Html.ValidationSummary metode , kesalahan ditampilkan di sana, sama seperti kesalahan validasi input pengguna.

Sumber Daya Tambahan

Bekerja dengan Formulir HTML di Situs Halaman Web ASP.NET