Главная страница   /   23.5. Выполнение валидации на стороне клиента (ASP.NET MVC 4

ASP.NET MVC 4

ASP.NET MVC 4

Адам Фриман

23.5. Выполнение валидации на стороне клиента

Техники валидации, которые мы продемонстрировали до сих пор, являются примерами валидации на стороне сервера. Это означает, что пользователь передает данные на сервер, сервер проверяет данные и отправляет обратно результат валидации (обработав данные, если валидация успешна, или отобразив список ошибок, которые должны быть исправлены).

В веб-приложениях пользователи обычно ожидают получить немедленную обратную связь перед тем, как они отправят данные на сервер. Это известно как валидация на стороне клиента и, как правило, реализуется с помощью JavaScript. Введенные данные проверяются перед отправкой на сервер, что обеспечивает пользователю немедленную обратную связь и возможность исправить все проблемы.

MVC Framework поддерживает ненавязчивую валидацию на стороне клиента (unobtrusive client-side validation). Термин «ненавязчивый» означает, что правила валидации выражаются с помощью атрибутов, добавленных к элементам HTML, которые мы создаем. Эти атрибуты интерпретируются библиотекой JavaScript, которая включена в MVC Framework; он, в свою очередь, использует библиотеку jQuery Validation, которая и выполняет всю работу по валидации. В следующих разделах мы покажем вам, как работает встроенная поддержка валидации и продемонстрируем способы расширения функциональности и создания пользовательской валидации на стороне клиента.

Подсказка

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

Активируем и дезактивируем валидацию на стороне клиента

Валидация на стороне клиента контролируется двумя настройками в файле Web.config, как показано в листинге 23-19.

Листинг 23-19: Управляем валидацией на стороне клиента
<appSettings>
	<add key="ClientValidationEnabled" value="true"/>
	<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>

Чтобы валидация на стороне клиента работала, оба эти параметра должны содержать значение true. При создании проекта MVC Visual Studio устанавливает для них значение true.

Подсказка

Можно также настроить валидацию на стороне клиента для отдельных представлений, указав HtmlHelper.ClientValidationEnabled и HtmlHelper.UnobtrusiveJavaScriptEnabled в блоке кода Razor.

Для работы валидации на стороне клиента также необходимо, чтобы в коде HTML, отправленном в браузер, были ссылки на три библиотеки JavaScript:

  • /Scripts/jQuery-1.7.1.min.js
  • /Scripts/jQuery.validate.min.js
  • /Scripts/jQuery.validate.unobtrusive.min.js

Самый простой способ добавить эти JavaScript файлы в представление – с помощью связок скриптов (script bundles). Это новая функция в MVC 4, которую мы опишем в главе 24. Здесь мы не будем объяснять принципы ее работы, но добавим с ее помощью необходимые нам скрипты в файл /Views/Shared/_Layout.cshtml; изменения показаны в листинге 23-20. (То же изменение можно было бы сделать в представлении MakeBooking, но мы предпочитаем импортировать скрипты в макеты, чтобы не приходилось вносить изменения во все представления).

Листинг 23-20: Добавляем в макет библиотеки JavaScript, необходимые для валидации на стороне клиента
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width" />
	<title>@ViewBag.Title</title>
	@Styles.Render("~/Content/css")
	@Scripts.Render("~/bundles/modernizr")
</head>
<body>
	@RenderBody()
	@Scripts.Render("~/bundles/jquery")
	@Scripts.Render("~/bundles/jqueryval")
	@RenderSection("scripts", required: false)
</body>
</html>

Используем валидацию на стороне клиента

Теперь, когда мы активировали валидацию на стороне клиента и убедились, что в макете есть ссылки на библиотеки JavaScript, можно выполнять валидацию на стороне клиента. Для этого проще всего применить атрибуты метаданных, которые мы использовали ранее для валидации на стороне сервера, такие как Required, Range и StringLength. В листинге 23-21 показан класс модели Appointment с этими атрибутами (мы удалили реализацию интерфейса IValidatableObject, который совершенно не влияет на валидацию на стороне клиента).

Листинг 23-21: Атрибуты валидации, примененные к объеку модели Appointment
using System;
using System.ComponentModel.DataAnnotations;

namespace ModelValidation.Models
{
	public class Appointment
	{
		[Required]
		[StringLength(10, MinimumLength = 3)]
		public string ClientName { get; set; }

		[DataType(DataType.Date)]
		public DateTime Date { get; set; }

		public bool TermsAccepted { get; set; }
	}
}

Это все, что необходимо для базовой настройки валидации на стороне клиента. Мы применили несколько встроенных атрибутов валидации, чтобы продемонстрировать функции валидации на стороне клиента; если отправленный клиенту код HTML ссылается на библиотеки JavaScript, то все заработает.

Чтобы увидеть эффект от валидации на стороне клиента, запустите приложение, перейдите по ссылке /Home/MakeBooking и введите букву X в поле имени. Нажмите клавишу tab или кликните по другому элементу ввода, и вы сразу увидите сообщение валидации, созданное JavaScript, как показано на рисунке 23-11.

Рисунок 23-11: Немедленная обратная связь при использовании валидации на стороне клиента

В листинге 23-21 мы применили к классу Appointment атрибут валидации StringLength, и на рисунке вы увидите сообщение об ошибке от этого атрибута. Браузер обеспечивает немедленную обратную связь, не отправляя запросов к серверу. На самом деле, выполняющий валидацию код JavaScript будет препятствовать отправке формы до тех пор, пока все явные ошибки валидации не будут исправлены.

Исправляя ошибку, пользователь также получает немедленную обратную связь. Если вы вернетесь к полю Name и продолжите ввод, ошибка валидации исчезнет, когда в имени будет три и более символа. Но если вы продолжите печатать и дойдете до одиннадцатого символа, сообщение об ошибке появится снова. Это произойдет потому, что в атрибуте StringLength для свойства ClientName мы указали минимальную длину строки из трех букв, а максимальную – из десяти.

Принципы работы валидации на стороне клиента

Одним из преимуществ использования валидации на стороне клиента в MVC Framework является то, что нам не придется писать JavaScript. Правила валидации создаются с помощью HTML-атрибутов. Когда валидация на стороне клиента отключена, вспомогательный метод Html.EditorFor создаст для свойства ClientName следующий код HTML:

<input class="text-box single-line" id="ClientName" name="ClientName" type="text" value="" />

А вот HTML, который будет создан для того же свойства при активированной валидации на стороне клиента:

<input class="text-box single-line" data-val="true"
			data-val-length="The field ClientName must be a string with a minimum length of 3 and a maximum length of 10." 
			data-val-length-max="10" data-val-length-min="3"
			data-val-required="The ClientName field is required." id="ClientName"
			name="ClientName" type="text" value="" />

Поддержка валидации на стороне клиента в MVC не генерирует никакого JavaScript или данных JSON, которые бы управляли процессом валидации; как это часто бывает в работе с MVC Framework, здесь мы полагаемся на соглашения. Первым был добавлен атрибут data-val. С помощью этого атрибута библиотека jQuery Validation определяет те поля, для которых требуется валидация.

Индивидуальные правила валидации задаются с помощью атрибута в форме data-val-<name>, где name – это правило. Так, например, для атрибута Required, который мы применили к классу модели, был в HTML создан атрибут data-val-required. Значение в атрибуте - это сообщение об ошибке, связанное с правилом. Для некоторых правил требуются дополнительные атрибуты, как, например, для правила length, для которого атрибуты data-val-length-min и data-val-length-max позволяют задавать минимальную и максимальную длину строки.

Правила валидации required и length интерпретируются библиотекой JQuery Validation, на которой построены все функции валидации на стороне клиента MVC. Одна из приятных особенностей валидации на стороне клиента MVC заключается в том, что для создания правил валидации на стороне клиента и на сервере применяются одни и те же атрибуты. Это означает, что данные из браузеров, которые не поддерживают JavaScript, подлежат той же проверке, как и данные из браузеров, поддерживающих JavaScript, и это не требует от нас каких-либо дополнительных усилий.

Валидация на стороне клиента MVC и валидация jQuery

Функции валидации на стороне клиента MVC построены на библиотеке JQuery Validation. Если хотите, можете использовать библиотеку Validation напрямую, не обращая внимания на функции MVC. Библиотека Validation очень гибкая и функционально богатая; ее полезно изучать, чтобы научиться настраивать функции MVC и наилучшим образом использовать имеющиеся варианты валидации. Адам подробно описывает библиотеку JQuery Validation в книге Pro jQuery (Apress, 2012).