Не только разметка — объект ValidityState и другие

Для более тонкой валидации введенных значений на стороне клиента предназначен новый объект ValidityState. Он доступен (при поддержке этой возможности браузером) для любого элемента ввода. Получить доступ к нему можно следующим образом:

MylnputCheck = document. myForm. mylnput. validity

Где myForm и mylnput — имена искомой формы требуемого поля.

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

Самый простой метод проверки состоит в вызове буклева метода ValidityState. valid. Он достаточно универсален и даст, например, значение false, если поле имеет атрибут require и не заполнено, или численное значение поля выбивается из диапазона, указанного в атрибутах min и max. Для более детальной проверки существует ряд методов, которые имеет смысл рассмотреть все. Итак:

— validityState. valueMissing — проверяет наличие содержания в поле, обязательном к заполнению (имеющем атрибут requ-rie). Возвращает true для пустого поля;

— validityState. P ypeDismatch — проверка совпадения типа введенного значения с ожидаемым. Вернее, несовпадения. Он предназначен для проверки таких специфических данных, как mail, number, url;

— ValidityState. patternMismatch — проверяет соответствие введенного текста заданному в атрибуте pattern-шаблону);

— ValidityState. rangeOverflow — проверка вводимых данных на соответствие максимальному заданному значению (атрибут max);

— ValidityState. PtepMismatch;

— ValidityState. rpngeUnderflow — проверка вводимых данных на соответствие минимальному заданному значению (атрибут min);

— ValidityState. stepMismatch — проверка вводимых данных на «попадание между шагами» (атрибут step);

— ValidityState. tooLong — проверка вводимых данных на превышение максимально заданной длины (задаваемой атрибутом maxlength).

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

Наконец, ValidiState имеет проверку ошибок, задаваемых пользователем, — ValidityState. v ustomError. Чтобы использовать этот механизм, следует сначала в своем сценарии вызвать соответствующую ошибку методом setCustomValidity:

Document. myForm. myInput. validity. setCustomValidity("пользователь с таким логином уже существует");

Что же касается того, с чего мы начали, ValidityState. v alid, то нетрудно понять, что этот метод вернет true тогда и только тогда, когда все вышеперечисленные возвращают false. Естественно, если на поле не установлено никаких ограничений, явных или неявных, это условие всегда будет выполняться.

Да, ограничение на поле можно установить и неявно, добавив соответствующий атрибут из JavaScript-сценария, и тут встает задача определения, подвержено ли конкретное поле поверки на валидность? Задача уже решена разработчиками стандарта добавлением соответствующего метода:

Console. log(document. myForm. mylnput. willValidaty):

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

Элемент keygen — современное шифрование в пользовательской форме.

Это то, про что американцы говорят «at last but not least». Новый элемент формы, <keygen>, действительно обеспечивает современное шифрование данных формы, генерируя пару ключей — открытый и закрытый. Открытый ключ направляется на сервер, закрытый же сохраняется в хранилище браузера. Тем самым можно, например, реализовать авторизацию на сервере через генерацию клиентского сертификата или валидацию данных формы. Пример использования элемента keygen:

<form>

Имя пользователя:

<input type="text" name="usr_name" />

Шифрование:

<keygen name="security" Veytype = "rsa" vhallene />

<input type="submit" value="Отправить" /> </form>

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

Как выглядит работа keytype в браузерах Google Chorome и Opera, можно видеть на рис. 25.

Атрибут challenge определяет, должно ли значение изменяться при отправке формы.

Рис. 25. Работа элемента keygen в Google Chrome и Opera