Принципы разработки пользовательского интерфейса интернет-приложения

Проверка вводимых данных

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

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

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

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

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

Всего в ASP.NET 2.0 существует шесть элементов управления, предназначенных для осуществления проверки вводимых данных.

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

С помощью верификаторов возможно проверить данные, вводимые в такие элементы управления, как TextBox, ListBox, DropDownList, RadioButtonList, HtmlInputText, HtmlTextArea, HtmlSelect.

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

1. Если свойство - CausesValidation=false, элементы управления проверкой вводимых данных просто игнорируются, а страница отправляется на сервер. При этом все обработчики событий будут исполнены.
2. Если свойство - CausesValidation=true, осуществляется автоматическая проверка каждого элемента управления, расположенного на странице. Если при проверке элемента управления возникает ошибка, ASP.NET возвращает страницу с сообщениями об ошибке в зависимости от настроек верификаторов. При этом обработчик события нажатия на кнопке, инициировавшей отправку страницы на сервер, может выполниться, но может и не выполниться. Для проверки этого необходимо осуществить проверку достоверности страницы.

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

Все валидаторы образованы от класса BaseValidator и имеют следующие основные общие для всех свойства:

Самым простым валидатором является RequiredFieldValidator. Он предназначен для проверки того, введены ли данные в связанное с ним поле или нет. Это значит, что если в соответствующем текстовом поле ввода не будет символов, отличных от пробелов, возникнет ошибка ввода.

В качестве демонстрации работы данного валидатора создадим следующую страницу ( рис. 5.36):

Рис. 5.36. Пример страницы, содержащей RequiredFieldValidator

Исходный код этой страницы выглядит таким образом:

<body>
  <form id="form1" runat="server">
  <div>
    <asp:Label ID="Label1" runat="server" Text="Имя"></asp:Label>
    <asp:TextBox ID="tb_Name" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1"
     runat="server" ErrorMessage="Необходимо ввести имя пользователя"
     ControlToValidate="tb_Name">*</asp:RequiredFieldValidator><br />
    <br />
    <asp:Button ID="btn_OK" runat="server" Text="OK" Width="89px" />
  </div>
  </form>
</body>

Результат выполнения данной страницы изображен на рис. 5.37.

Рис. 5.37. Отображение страницы, содержащей валидатор, в окне браузера

Если при нажатии на кнопку OK поле ввода имени пользователя будет пустым, рядом с полем ввода появится символ красной звездочки. Нетрудно заметить, что при этом обратная отсылка данных на сервер не производится. Можно изменить текст, который будет выводиться при возникновении ошибки. Для этого достаточно изменить строку свойства Text валидатора.

Элемент управления RangeValidator используется для проверки попадания введенного значения в диапазон значений валидатора. Основными свойствами данного валидатора являются MinimumValue, MaximumValue и Туре. Первые два определяют диапазон допустимых значений, type - тип данных, вводимых в элемент управления.

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

<asp:Label ID="Label2" runat="server" Text="Возраст (от 18
     до 70)"></asp:Label> 
    <asp:TextBox ID="tb_Age" runat="server"></asp:TextBox>
    <asp:RangeValidator ID="RangeValidator1" runat="server"
     ControlToValidate="tb_Age"
      ErrorMessage="Возраст должен быть между 18 и 70 годами"
       MaximumValue="70" MinimumValue="18"
      Type="Integer">*
</asp:RangeValidator>

Валидатор CompareValidator сравнивает значение в одном элементе управления с фиксированным значением либо со значением в другом элементе управления. Основными свойствами данного валидатора являются ValueToCompare и ControlToCompare: первое из них задает элемент управления, значение которого должно контролироваться, второе - элемент управления, со значением которого будет сравниваться значение элемента управления, указанного в ValueToCompare. Кроме того, свойство Operator определяет тип операции сравнения.

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

<asp:Label ID="Label3" runat="server" Text="Пароль"></asp:Label>
<asp:TextBox ID="tb_Password1" runat="server" TextMode="Password">
 </asp:TextBox>
<asp:Label ID="Label4" runat="server" Text="Пароль
 (повторно)"></asp:Label>
<asp:TextBox ID="tb_Password2" runat="server" TextMode="Password">
 </asp:TextBox>
<asp:CompareValidator ID="CompareValidator1" runat="server"
 ControlToCompare="tb_Password1" ControlToValidate="tb_Password2"
 ErrorMessage="Введенные пароли не совпадают">*
 </asp:CompareValidator>

Стоит отметить, что у валидаторов существует возможность использования графических объектов вместо текста, выводимых на экран в случае возникновения ошибки. Так, в данном примере возможно использование изображения вместо символа "*". Для этого необходимо ввести в свойство Text валидатора тег <img>, с указанием графического файла, который необходимо отображать в случае возникновения ошибки, как показано в примере ниже.

<asp:CompareValidator ID="CompareValidator1" runat="server"
 ControlToCompare="tb_Password1" ControlToValidate="tb_Password2"
 ErrorMessage="Введенные пароли не совпадают">
 <img src="Images/Warning.png" /></asp:CompareValidator>

Результат показан на рис. 5.38.

Рис. 5.38. Использование графических объектов совместно с валидаторами

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

Escape-последовательности символов, применяемые в регулярных выражениях, приведены далее.

Классы символов, определяющие множество символов, представлены ниже.

Квантификаторы, задающие шаблоны совпадений, перечислены ниже.

За более подробной информацией о регулярных выражениях можно обратиться к справочной системе MSDN, произведя поиск по ключевым словам "Regular Expression".

Ниже приведена таблица, содержащая примеры шаблонов наиболее популярных регулярных выражений. На сайте http://RegexLib.com можно найти гораздо больше примеров регулярных выражений.

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

<asp:Label ID="Label5" runat="server" Text="e-mail"></asp:Label>
<asp:TextBox ID="tb_Email" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1"
 runat="server" ControlToValidate="tb_Email" ErrorMessage="e-mail
 неверного формата" ValidationExpression="\S+@\S+\.\S+">*
 </asp:RegularExpressionValidator>

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

CustomValidator можно связать с элементом управления, предназначенным для ввода текста, как и в случае с другими валидаторами. Если проверка вводимых данных завершается неудачей, свойство Page.IsValid устанавливается в значение false (то же самое происходит и при проверке с помощью другого валидатора ).