Проверка входных данных пользователя на сайтах веб-страницы ASP.NET (Razor)

Статья
07/13/2023

; автор — Том ФитцМакен (Tom FitzMacken)

В этой статье описывается, как проверить сведения, полученные от пользователей, то есть убедиться, что пользователи вводят допустимые сведения в HTML-формах на сайте веб-страницы ASP.NET (Razor).

Из этого руководства вы узнаете, как выполнять такие задачи:

Как проверка, что входные данные пользователя соответствуют заданным критериям проверки.

Как определить, пройдены ли все проверочные тесты.

Отображение ошибок проверки (и их форматирование).

Как проверить данные, которые не поступают непосредственно от пользователей.

Ниже приведены ASP.NET концепции программирования, представленные в этой статье:

Помощник Validation .

Методы Html.ValidationSummary и Html.ValidationMessage.

Версии программного обеспечения, используемые в этом руководстве

веб-страницы ASP.NET (Razor) 3

Это руководство также работает с веб-страницы ASP.NET 2.

В этом разделе содержатся следующие подразделы:

Общие сведения о проверке входных данных пользователя
Проверка вводимых пользователем данных
Добавление клиентской проверки
Ошибки проверки форматирования
Проверка данных, которые не поступают непосредственно от пользователей

Общие сведения о проверке входных данных пользователя

Если вы просите пользователей ввести информацию на странице, например в форму, важно убедиться, что вводимые ими значения являются допустимыми. Например, вы не хотите обрабатывать форму, в которой отсутствуют важные сведения.

Когда пользователи вводят значения в HTML-форму, значения, которые они вводят, являются строками. Во многих случаях нужны некоторые другие типы данных, например целые числа или даты. Поэтому необходимо также убедиться, что значения, которые пользователи вводят, могут быть правильно преобразованы в соответствующие типы данных.

Кроме того, могут быть установлены определенные ограничения на значения. Даже если пользователи правильно вводят целое число, может потребоваться убедиться, что значение находится в определенном диапазоне.

Снимок экрана: ошибки проверки, использующие классы стилей CSS.

Примечание

Важно Проверка данных, введенных пользователем, также важна для безопасности. При ограничении значений, которые пользователи могут вводить в формах, уменьшается вероятность того, что кто-то может ввести значение, которое может поставить под угрозу безопасность вашего сайта.

Проверка введенного пользователем

В веб-страницы ASP.NET 2 можно использовать вспомогатель Validator для проверки ввода данных пользователем. Основной подход заключается в следующем:

Определите, какие входные элементы (поля) требуется проверить.

Обычно значения проверяются в <input> элементах формы. Однако рекомендуется проверять все входные данные, даже входные данные, поступающие из ограниченного элемента, например <select> списка. Это помогает убедиться, что пользователи не обходят элементы управления на странице и не отправят форму.
В коде страницы добавьте отдельные проверочные проверки для каждого входного элемента с помощью методов вспомогательного Validation элемента.

Чтобы проверка для обязательных полей, используйте Validation.RequireField(field, [error message]) (для отдельного поля) или Validation.RequireFields(field1, field2, ...)) (для списка полей). Для других типов проверки используйте .Validation.Add(field, ValidationType) Для ValidationTypeможно использовать следующие параметры:

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])
При отправке страницы проверка, пройдена ли проверка, проверив Validation.IsValid:
```
if(IsPost && Validation.IsValid()){
    // Process form submit
}
```
При возникновении ошибок проверки можно пропустить обычную обработку страницы. Например, если целью страницы является обновление базы данных, это не делается до тех пор, пока не будут исправлены все ошибки проверки.
При наличии ошибок проверки отображаются сообщения об ошибках в разметке страницы с помощью Html.ValidationSummary или Html.ValidationMessage, или и того, и другого.

В следующем примере показана страница, демонстрирующая эти шаги.

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

Чтобы узнать, как работает проверка, запустите эту страницу и намеренно добавьте ошибки. Например, вот как выглядит страница, если вы забыли ввести название курса, если введете и ввели недопустимую дату:

Ошибки проверки на отрисоченной странице

Добавление клиентской проверки

По умолчанию введенные пользователем данные проверяются после отправки страницы, то есть проверка выполняется в серверном коде. Недостатком этого подхода является то, что пользователи не знают, что они совершили ошибку, пока не отправят страницу. Если форма длинная или сложная, сообщение об ошибках только после отправки страницы может быть неудобно для пользователя.

Вы можете добавить поддержку для выполнения проверки в клиентском скрипте. В этом случае проверка выполняется по мере работы пользователей в браузере. Например, предположим, что вы указываете, что значение должно быть целым числом. Если пользователь вводит не целочисленное значение, сообщение об ошибке возникает сразу после того, как пользователь покидает поле записи. Пользователи получают немедленную обратную связь, что удобно для них. Проверка на основе клиента также позволяет сократить количество раз, когда пользователь должен отправлять форму для исправления нескольких ошибок.

Примечание

Даже если вы используете проверку на стороне клиента, проверка всегда также выполняется в серверном коде. Проверка в серверном коде является мерой безопасности в случае, если пользователи обходят проверку на основе клиента.

Зарегистрируйте на странице следующие библиотеки JavaScript:
```
<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>
```
Две библиотеки загружаются из сети доставки содержимого (CDN), поэтому их необязательно использовать на компьютере или сервере. Однако необходимо иметь локальную копию jquery.validate.unobtrusive.js. Если вы еще не работаете с шаблоном WebMatrix (например , Начальный сайт ), который включает библиотеку, создайте сайт веб-страниц на основе начального сайта. Затем скопируйте файл.js на текущий сайт.
В разметке для каждого проверяемого элемента добавьте вызов Validation.For(field). Этот метод выдает атрибуты, используемые проверкой на стороне клиента. (Вместо того чтобы создавать фактический код JavaScript, метод выдает такие атрибуты, как data-val-.... Эти атрибуты поддерживают ненавязчивую проверку клиента, которая использует jQuery для выполнения работы.)

На следующей странице показано, как добавить функции проверки клиента в приведенный выше пример.

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

Не все проверки выполняются на клиенте. В частности, проверка типа данных (целое число, дата и т. д.) не выполняется на клиенте. Следующие проверки работают как на клиенте, так и на сервере.

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

В этом примере проверка допустимой даты не будет работать в клиентском коде. Однако тест будет выполняться в серверном коде.

Ошибки проверки форматирования

Вы можете управлять отображением ошибок проверки, определив классы CSS со следующими зарезервированными именами:

field-validation-error. Определяет выходные Html.ValidationMessage данные метода при отображении ошибки.
field-validation-valid. Определяет выходные данные метода при Html.ValidationMessage отсутствии ошибок.
input-validation-error. Определяет, как <input> отрисовываются элементы при возникновении ошибки. (Например, этот класс можно использовать для задания цвета фона входного <> элемента другого цвета, если его значение недопустимо.) Этот класс CSS используется только во время проверки клиента (в веб-страницы ASP.NET 2).
input-validation-valid. Определяет внешний <input> вид элементов при отсутствии ошибок.
validation-summary-errors. Определяет выходные Html.ValidationSummary данные метода, отображающего список ошибок.
validation-summary-valid. Определяет выходные данные метода при Html.ValidationSummary отсутствии ошибок.

В следующем <style> блоке показаны правила для условий ошибок.

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

Если включить этот блок стиля в примеры страниц из предыдущей статьи, сообщение об ошибке будет выглядеть следующим образом:

Ошибки проверки, использующие классы стилей CSS

Примечание

Если вы не используете проверку клиента в веб-страницы ASP.NET 2, классы CSS для <input> элементов (input-validation-error и input-validation-valid не оказывают никакого влияния.

Отображение статических и динамических ошибок

Правила CSS бывают парами, такими как validation-summary-errors и validation-summary-valid. Эти пары позволяют определить правила для обоих условий: условия ошибки и "нормального" (без ошибок). Важно понимать, что разметка для отображения ошибки всегда отображается, даже если ошибок нет. Например, если на странице есть Html.ValidationSummary метод в разметке, источник страницы будет содержать следующую разметку даже при первом запросе страницы:

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

Иными словами Html.ValidationSummary , метод всегда отображает <div> элемент и список, даже если список ошибок пуст. Аналогичным образом, Html.ValidationMessage метод всегда отображает элемент в <span> качестве заполнителя для отдельной ошибки поля, даже если ошибки нет.

В некоторых ситуациях отображение сообщения об ошибке может привести к переполоху страницы и к перемещению элементов на странице. Правила CSS, которые заканчиваются -valid на, позволяют определить макет, который поможет предотвратить эту проблему. Например, можно определить field-validation-error и field-validation-valid для обоих вариантов одинаковый фиксированный размер. Таким образом, область отображения поля будет статической и не изменит поток страницы при отображении сообщения об ошибке.

Проверка данных, которые не поступают непосредственно от пользователей

Иногда необходимо проверять сведения, которые не поступают непосредственно из HTML-формы. Типичным примером является страница, на которой передается значение в строке запроса, как показано в следующем примере:

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

В этом случае необходимо убедиться, что значение, передаваемое на страницу (здесь 1022 для значения classid) является допустимым. Вы не можете напрямую использовать вспомогательное Validation средство для выполнения этой проверки. Однако можно использовать другие функции системы проверки, такие как возможность отображения сообщений об ошибках проверки.

Примечание

Важно Всегда проверяйте значения, полученные из любого источника, включая значения полей формы, значения строки запроса и значения файлов cookie. Эти значения легко изменить (возможно, для злонамеренных целей). Поэтому для защиты приложения необходимо проверка эти значения.

В следующем примере показано, как проверить значение, переданное в строке запроса. Код проверяет, что значение не является пустым и является ли оно целым числом.

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

Обратите внимание, что тест выполняется, если запрос не является отправкой формы (if(!IsPost)). Этот тест будет пройден при первом запросе страницы, но не при отправке запроса формы.

Чтобы отобразить эту ошибку, можно добавить ее в список ошибок проверки, вызвав .Validation.AddFormError("message") Если страница содержит вызов Html.ValidationSummary метода , ошибка отображается там так же, как ошибка проверки ввода пользователя.

Дополнительные ресурсы

Работа с HTML-формами на сайтах веб-страницы ASP.NET

Поделиться через

Проверка входных данных пользователя на сайтах веб-страницы ASP.NET (Razor)

Версии программного обеспечения, используемые в этом руководстве

Общие сведения о проверке входных данных пользователя

Проверка введенного пользователем

Добавление клиентской проверки

Ошибки проверки форматирования

Отображение статических и динамических ошибок

Проверка данных, которые не поступают непосредственно от пользователей

Дополнительные ресурсы

Обратная связь

Обратная связь

Дополнительные ресурсы