Maksim Shirshin
description
Transcript of Maksim Shirshin
![Page 1: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/1.jpg)
Я.Субботник, Киев, 28 мая 2011
Руководитель группы разработки интерфейсов Рекламных Технологий
Макс Ширшин
SVARX: фреймворк для семантической валидации форм
![Page 2: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/2.jpg)
О клиентской валидации
2
![Page 3: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/3.jpg)
3
![Page 4: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/4.jpg)
Серверная валидация
• защита от случайных и намеренных ошибок
• не пропустить ошибку
• нет цели пояснить суть ошибки
• риск потери данных или контекста
• плюс перезагрузка — минус конверсия :-(
4
![Page 5: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/5.jpg)
Клиентская валидация
• защита от случайных ошибок
• не перегружать страницу
• пояснить суть ошибки
• указать способ устранения
• повышаем конверсию :-)
5
![Page 6: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/6.jpg)
часто делается «на коленках» Клиентская валидация
<form onsubmit=“if (!this.elements.email.value) return
false; if (this.elements.firstname.value == „‟ ||
this.elements.secondname.value == „‟) {alert(„Укажите имя
и фамилию‟); return false}”>
<script>
$(function(){$(„form‟).eq(1).submit(function() {
var eml = $(this).find(„input[name=email]‟).val();
eml = $.trim(eml);
var emlRe = /[\w\d]+[2,20]\@[\w\d]+[2,20]\.\w+[2,10]/;
if (!emlRe.test(eml)) return false;
});});
</script>
6
![Page 7: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/7.jpg)
Нужно найти более универсальное решение
7
![Page 8: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/8.jpg)
Решений для client-side валидации не так много
HTML 5 Forms
• не кроссбраузерно
• только элементарные валидации
• правила — в вёрстке или в js
• сообщения об ошибках неясно где
• #fail :-(
8
![Page 9: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/9.jpg)
Решений для client-side валидации не так много
JavaScript libraries
• не предлагают отдельного формата описания правил
• не отделяют валидацию от отображения ошибок
• не умеют важного: препроцессинг, группы правил, условные правила, инверсия проверок, одноимённые элементы...
• jQuery Validation — хорошая альтернатива
9
![Page 10: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/10.jpg)
По́том и кровью выстраданные принципы: • проверка может включать более одного поля
• валидация может зависеть от внешних условий
• тексты ошибок отделяем от самих правил
• правила неудобно хранить в вёрстке
• для валидации нужен препроцессинг
• нужен атомарный code reuse
10
![Page 11: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/11.jpg)
Что такое SVARX?
11
![Page 12: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/12.jpg)
SVARX — это… Semantical VAlidation Rulesets in XML
Идеология работы с правилами валидации.
Мы описываем отдельно:
• Смысловые (семантические) правила
• Реализацию проверок
• Тексты ошибок (если нужно)
• Способ реакции на эти ошибки
12
![Page 13: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/13.jpg)
SVARX — это… Semantical VAlidation Rulesets in XML
Мухи — отдельно Котлеты — отдельно
13
![Page 14: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/14.jpg)
SVARX
• human-readable XML-формат
• связки and-or-not, условия if-then-else
• любые правила (built-in + user-defined)
• семантически описанный препроцессинг
14
![Page 15: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/15.jpg)
И ещё...
...есть плагин для jQuery, который умеет:
• читать (парсить) SVARX-файлы
• валидировать веб-формы в соответствии со SVARX-правилами
• интегрировать любые способы показа ошибок
• добавлять user-defined правила
* плагины второго уровня на основе API
*
*
15
![Page 16: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/16.jpg)
Как устроен SVARX-формат
16
![Page 17: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/17.jpg)
Общая структура <svarx>
<preprocess>
<!–- правила препроцессинга -->
</preprocess>
<validate>
<!–- правила валидации -->
</validate>
</svarx>
17
![Page 18: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/18.jpg)
Каркас типичного правила <svarx>
<preprocess>
<!–- правила препроцессинга -->
</preprocess>
<validate>
<rule
for=“имя поля формы”
type=“тип валидации”
onerror=“идентификатор ошибки”
... доп. атрибуты, специфичные для правила
/>
</validate>
</svarx>
18
![Page 19: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/19.jpg)
Простой пример <preprocess>
<rule for=“age” type=“parseint” /> </preprocess>
<validate>
<rule
for=“age” type=“required”
onerror=“age_not_specified” />
<rule
for=“age” type=“range”
min=“14”
max=“99”
onerror=“age_incorrect” /> </validate>
19
![Page 20: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/20.jpg)
Кумулятивное правило <block logic=“and” onerror=“epic_fail”>
<rule for=“user_email” type=“email” />
<rule for=“age” type=“required” />
<rule for=“age” type=“range”
min=“14”
max=“99” />
</block>
20
![Page 21: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/21.jpg)
Многоэлементное правило <rule type=“eq” comparison=“string”
onerror=“fail”>
<!–- сравниваем 2 значения -->
<el name=“password1” />
<el name=“password2” />
<!–- опционально можем переопределять
элемент, который будет target‟ом
svarx-ошибки -->
<errtarget name=“password1” />
</rule>
21
![Page 22: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/22.jpg)
Условные проверки <block logic=“if”>
<!–- IF-условие -->
<rule for=“agreed” type=“checked” />
<!–- THEN-условие -->
<block onerror=“need_email”>
<rule for=“email” type=“required” />
<rule for=“email” type=“email” />
</block>
<!–- ELSE-условие (опционально) -->
<block onerror=“tel_number_required”>
<rule for=“tel” type=“required” />
</block>
</block>
22
![Page 23: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/23.jpg)
Ещё вкусности <!–- отрицание NOT -->
<rule for=“address” type=“regexp”
match=“[A-Z]”
inverted=“yes”
onerror=“cant_have_CAPS” />
<!–- выборка из одноимѐнных элементов -->
<rule for=“address” type=“email”
item=“0”
onerror=“fail” />
23
![Page 24: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/24.jpg)
• пустые элементы дают TRUE на любой проверке...
• ...кроме правила required
• несуществующие элементы дают TRUE на любой проверке
• условные проверки от несуществующих элементов пропускаются целиком (IF-THEN-ELSE)
• ...кроме случая, когда мы явно укажем обратное failifnull=“yes”
Важные договорённости
24
![Page 25: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/25.jpg)
SVARX и JavaScript
25
![Page 26: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/26.jpg)
Архитектура SVARX на клиенте
SVARX XML
jQuery plugin
Visualization plugin
Форма
Ajax
Данные об ошибках
26
![Page 27: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/27.jpg)
Подключение на проект <script type=“text/javascript”
src=“jquery.svarx.js”></script>
<script type=“text/javascript”
src=“svarx.methods.messages.js”></script>
<script type=“text/javascript”>
$(function() {
$(„form‟).svarx({
svarxURL: „/validation/svarx.xml‟,
bindTo: „submit‟,
immutable: true
});
});
</script>
27
![Page 28: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/28.jpg)
Что такое «плагин визуализации»?
$.fn.svarx.methods.messages = {
before: function(e) {},
after: function(e, result, eType) {
if (!result && eType == „submit‟) {
e.preventDefault();
}
},
error: function(e, id) {
alert(„Error „
+ id
+ „ at element „
+ e.target.name);
}
};
28
![Page 29: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/29.jpg)
Что мы с этого имеем?
29
![Page 30: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/30.jpg)
• set it and forget it
• перестаём писать JS-валидацию на коленках
• порою — вообще перестаём писать JS-валидацию
• все знания о валидации в одном файле
• правим отображение ошибок независимо от правил
Профит
30
![Page 31: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/31.jpg)
Документация + последние версии:
https://github.com/ingdir/svarx
Использование в боевых условиях :
http://sprav.yandex.ru/
http://passport.yandex.ru/
Где попробовать
31
![Page 32: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/32.jpg)
• нет асинхронных проверок
• нет условий, не зависящих от состояния формы
• XML — not the way to go?
• скорость
• нет «компиляции» SVARX XML в JS-код
• мало syntax sugar внутри самого формата
To Do
32
![Page 33: Maksim Shirshin](https://reader033.fdocuments.us/reader033/viewer/2022051109/5486dc8bb47959140d8b531c/html5/thumbnails/33.jpg)
Вопросы?
33