JS

Forms

Agenda

Forms
Form validation
Cookies
Storages

Forms

Элементы FORM можно получить по имени или номеру, используя свойство document.forms[name/index].

document.forms.my -- форма с именем 'my'
document.forms[0] -- первая форма в документе

Forms

label

Элемент label – один из самых важных в формах.

Клик на label засчитывается как фокусировка или клик на элементе формы, к которому он относится.

 <form name="label" id="formWithLabel">
    <label for="one">one</label><br>
    <input name="one" id="one" value="1"><br><br>

    <label for="two">two</label><br>
    <input name="two" id="two" value="2"><br><br>

    <label for="agree">Согласен с правилами</label><br>
    <input id="agree" type="checkbox">
</form>

Forms

input и textarea

Для большинства типов input значение ставится/читается через свойство value.

input.value = "Новое значение";
textarea.value = "Новый текст";

Forms

select и option

Select в JavaScript можно установить двумя путями: поставив значение select.value, либо установив свойство select.selectedIndex в номер нужной опции.:

select.selectedIndex = 0; // первая опция

select.selectedIndex = -1 // очистит выбор.

Forms

focus/blur

Событие focus вызывается тогда, когда пользователь фокусируется на элементе, а blur – когда фокус исчезает, например посетитель кликает на другом месте экрана.

<input type="text" name="search" autofocus>

autofocus

При загрузке страницы, если на ней существует элемент с атрибутом autofocus – браузер автоматически фокусируется на этом элементе. Работает во всех браузерах, кроме IE9-.

tabindex

tabindex="0" делает элемент всегда последним.
tabindex="-1" означает, что клавиша Tab будет элемент игнорировать.

Forms

change

Событие change происходит по окончании изменении значения элемента формы, когда это изменение зафиксировано.

Например, пока вы набираете что-то в текстовом поле ниже – события нет. Но как только вы уведёте фокус на другой элемент, например, нажмёте кнопку – произойдет событие onchange.

object.addEventListener("change", myScript);

Forms

submit

Чтобы отправить форму на сервер, у посетителя есть два способа:

Первый – это нажать кнопку <input type="submit"> или <button type="submit"></button>.
Второй – нажать Enter, находясь на каком-нибудь поле.

Если сделать event.preventDefault() – тогда форма не отправится на сервер

Forms

Form Validation

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

Применяются - в анализировании текста, поиске совпадений с определенными шаблонами, проверки на валидность определенных данных.

RegExp

Регулярные выражения можно объявлять двумя способами:

Литеральный:

var regExp = /pattern/; // - без спецификаторов поиска (ключей)
var regExp = /pattern/gmi; // - со спецификаторами поиска

С применением конструктора:

var regExp = new RegExp("pattern", "flags"); 
// - со спецификаторами поиска

var regExp = new RegExp('\\w', 'ig');
// or
var regExp = /\w/gi;

RegExp Examples

var str = "Я люблю JavaScript!"; // будем искать в этой строке

var regexp = /лю/;
str.search(regexp); // 2

RegExp Examples

var str = "Я люблю JavaScript!";

var regExp = /javascript/; // - вариант без флага
str.search(regExp); // -1

var regExp = /javascript/i; // - с флагом
str.search(regExp); // 8

Флаг "i" - игнорирование регистра текста, то есть для шаблона будет без разницы попалась буква "А" или "а"

В случае без флага, у нас будет искать слово "javascript" и не найдет, результатом будет "-1" что свидетельствует об отсутствии совпадений.

RegExp Examples

Флаг "g" - при использовании данного флага, шаблон будет искать все совпадения, а без него только первое.

Флаг "m" - многострочный режим поиска, если текст имеет переносы строк.

RegExp Examples

Если какая то часть шаблона была обернута в круглые скобки то она станет отдельным элементом массива.

var str = "javascript - это такой язык";

var result = str.match( /JAVA(SCRIPT)/i );

result[0]; // javascript (всё совпадение полностью)
result[1]; // script (часть совпадения, соответствующая скобкам)
result.index; // 0
result.input; // javascript - это такой язык

String.match(regExp) с флагом "ig" - находит все совпадения с шаблоном.

Никаких дополнительных полей не порождается, и скобки игнорируются. Пример:

var str = "ОЙ-Ой-ой";
var result = str.match( /ой/ig );

result; // ["ОЙ", "Ой", "ой"]
result.length; // 3
result.index; // undefined
result.input; // undefined

RegExp Examples

Класс спецсимвола - это сокращенная форма описания определенного набора символов.

В регулярных выражениях предусмотрены классы для поиска определенных символов из определенных групп. Например цифры или все буквы.

RegExp Examples

Любой класс определяется со слеша "\" и буквы указывающей конкретный класс. Самые распространенные классы это:

\d - (от англ. Digit) включает в себя все цифровые символы, 0 1 2 3 и тд.

\s - (от англ. Space) включает в себя все пробельные символы, пробел, табуляция, перенос строки.

\w - (от англ. Word) включает в себя все буквы английского алфавита, цифры и знак подчеркивания "_".

Русские символы в этот класс не включаются.

var reg = /^\d+$/;

RegExp Examples

Бывают ситуации когда надо найти определенный символ из нескольких, не зависимо от того какой именно будет найден из определенного нами набора. Такие наборы определяются квадратными скобками "[ ]", внутри которых мы указываем перечисление символов необходимых для перебора. Тут мы можем указывать классы и спец символы или же просто набор цифр, символов или букв, что бы перебрать разные варианты.

var regExp = /[бмс]оль/i;

regExp.test('моль'); // true
regExp.test('соль'); // true
regExp.test('ноль'); // false

RegExp Examples

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

А по бокам указываются начало и конец диапазона.

var regExp = /[а-в]/;

regExp.test('а'); // true
regExp.test('б'); // true
regExp.test('в'); // true
regExp.test('г'); // false

RegExp Examples

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

var regExp = /[^бмс]оль/i;

regExp.test('моль'); // false
regExp.test('соль'); // false
regExp.test('ноль'); // true

RegExp Examples

Количественный квантификатор определяется фигурными скобками "{ }", включая в себя стартовое и конечное количество символов, но так же можно указывать на оборот только стартовое или конечное количество символов. Рассмотрим все 3 варианта применения на примерах:

var regExp = /^[0-9]{2,5}$/;

regExp.test("1"); // false
regExp.test("12"); // true
regExp.test("12345"); // true
regExp.test("123456"); // false

var regExp = /[\d]{2,}/;

regExp.test("1"); // false
regExp.test("1234567890"); // true

var regExp = /[\d]{,5}/;

regExp.test("1"); // true
regExp.test("12345"); // true
regExp.test("123456"); // false

RegExp Examples

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

var regExp = /[\d]{3}/;

regExp.test("12"); // false
regExp.test("123"); // true
regExp.test("1234"); // false

RegExp Examples

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

Такие сокращения являются следующими символами "+", "?" и "*".

"+" - это сокращение альтернатива квантификатору "{1,}", который указывает от 1 и более символов в наборе.

"?" - это сокращение альтернатива квантификатору "{0,1}", который указывает от 0 до 1 символа, очень часто используют в случаях когда символ как может быть так и нет.

"*" - это сокращение альтернатива квантификатору "{0,}", это указывает что символ может повторяться бесконечное количество раз или же на оборот отсутствовать.

RegExp Examples

Бывают случаи когда нам надо искать несколько вариантов шаблонов, как в случае с набором, только за исключением того что в наборе мы ищем конкретный символ, а нам необходимо найти целый кусок шаблона.

В таких ситуациях мы можем использовать альтернацию, логический вариант "ИЛИ".

Альтернация обозначается символом прямого слеша "|" и позволяет выбирать первый подходящий нам шаблон из перечисления шаблонов.

var reg = /html|php|css|java(script)?/gi

var str = "Сначала появился HTML, затем CSS, потом JavaScript"

str.match(reg); // ["HTML", "CSS", "JavaScript"]

RegExp Examples

Cookies

document.cookie

document.cookie = "userName=Vasya";

…Однако, всё не так просто. У cookie есть ряд важных настроек, которые очень желательно указать, так как значения по умолчанию у них неудобны.

Эти настройки указываются после пары ключ=значение, каждое – после точки с запятой:

path=/mypath

Путь, внутри которого будет доступ к cookie. Если не указать, то имеется в виду текущий путь и все пути ниже него.

Как правило, используется path=/, то есть cookie доступно со всех страниц сайта.

Cookies

domain=site.com

Домен, на котором доступно cookie. Если не указать, то текущий домен.

expires=Tue, 19 Jan 2038 03:14:07 GMT

Дата истечения куки в формате GMT.

var date = new Date(new Date().getTime() + 60 * 1000);
document.cookie = "name=value; path=/; expires=" + date.toUTCString();

Storages

JS

forms

More from Oleg Rovenskyi