Валидация данных на клиенте
, ASP.NET MVC
 |
Наши проекты:
Журнал · Discuz!ML · Wiki · DRKB · Помощь проекту |
|
| ПРАВИЛА | FAQ | Помощь | Поиск | Участники | Календарь | Избранное | RSS |
| [3.137.181.52] |
|
|
Модераторы: maxim84_
Валидация данных на клиенте
, ASP.NET MVC
|
Сообщ.
#1
,
|
|
  |
После начала изучения ASP.NET MVC, был неприятно удивлен «совместимостью» текущий реализации AJAX с новой технологией от MS. Конечно можно прочитать AJAX.NET Roadmap (http://www.asp.net/ajax/documentation/live/) и надеяться, что ситуация скоро измениться, но к сожалению проблемы не только на фронте с AJAX. Есть еще одна очевидная проблема это валидация вводимых клиентом данных. В Web Forms было все удобно, были – валидаторы, они генерировали JavaScript для отправки клиенту, а также позволяли выполнять проверку вводимых данных на сервере. В данном обзоре я попытаюсь рассказать как решить проблему с валидацией данных на клиенте, существующими бесплатными JavaScript библиотеками. После не продолжительных поисков, такой библиотеки, наткнулся в интернете на http://www.livevalidation.com/ скрипты же можно загрузить отсюда http://www.livevalidation.com/download
Библиотека предлагает следующие валидаторы: • Presence • Format • Numerically • Length • Inclusion • Exclusion • Acceptance • Confirmation • Composite validations (combining validations) • Validating entire forms На сайте можно легко найти примеры использования например тут: http://www.livevalidation.com/examples Суть простая: Подключаем JavaScript к нашей мастер странице, после чего в видах, добавляем соответствующие скрипты для валидации. Рассмотрим простой пример, имеем Вид позволяющий редактировать наименование и цену товара:   <form method="post" action="<%= Url.Action("Update", new { id=ViewData.Model.ProductID }) %>"> Product name: <br /> <%= Html.TextBox("ProductName", ViewData.Model.ProductName) %> <br /> <br /> Price: <br /> <%= Html.TextBox("UnitPrice", String.Format("{0:f2}", ViewData.Model.UnitPrice))%> <br /> <br /> <%= Html.SubmitButton("onSubmit", "Save") %> </form> По сути два обычных текстбокса (ProductName, UnitPrice) и кнопка для отправки данных на сервер для обработки. Мы бы хотели заставить пользователя вводить оба поля при этом второе должно позволять вводить исключительно цифры. Для этого мы дописываем на страницу скрипт: <script type="text/javascript"> var unitPrice = new LiveValidation('UnitPrice', {onlyOnSubmit: true } ); unitPrice.add( Validate.Numericality ); unitPrice.add( Validate.Presence ); var productName = new LiveValidation('ProductName', {onlyOnSubmit: true } ); productName.add( Validate.Presence ); </script> Данный скрипт по именам контролов создает объекты LiveValidation, к которым добавляет проверки. Второй парамметр конструктора {onlyOnSubmit: true } говорит валидатору о том, что проверки стоит выполнять только при попытке отправить форму на сервер (без параметра валидация будет происходить по потери фокуса контролом).    И в заключение несколько слов о внешнем виде сообщений и внешнем виде контролов подлежащих клиентской валидации. Они задаются через таблицы стилей, что бы добиться эффекта отображаемого на скриншотах выше, достаточно в файл со стилями добавить следующий код: /* Validators ----------------------------------------------------------*/ .LV_validation_message{ font-weight:bold; margin:0 0 0 5px; } .LV_valid { color:#00CC00; } .LV_invalid { color:#CC0000; } .LV_valid_field, input.LV_valid_field:hover, input.LV_valid_field:active, textarea.LV_valid_field:hover, textarea.LV_valid_field:active { border: 1px solid #00CC00; } .LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active { border: 1px solid #CC0000; } Успехов. |
0 пользователей читают эту тему (0 гостей и 0 скрытых пользователей)
0 пользователей:
[ Script execution time: 0,0159 ] [ 15 queries used ] [ Generated: 28.04.24, 15:08 GMT ]