Учебник по JS

ГЛАВНАЯ JS Введение JS Куда Вывод JS Заявления JS JS-синтаксис JS-комментарии JS-переменные JS Пусть Константа JS JS-операторы JS-арифметика Назначение JS JS-типы данных JS-функции JS-объекты JS-события JS-строки Строковые методы JS Поиск строки JS Шаблоны строк JS JS-номера Методы номеров JS JS-массивы Методы массива JS Сортировка массива JS Итерация массива JS Константа массива JS JS-даты Форматы даты JS Методы получения даты JS Методы установки даты JS JS-математика JS Случайный JS Булевы значения Сравнение JS JS-условия JS-переключатель JS цикл для Цикл JS для входа Цикл JS для Цикл JS во время Перерыв JS JS-итерации JS-наборы JS-карты JS Typeof Преобразование типов JS JS побитовый JS регулярное выражение JS-ошибки Область JS JS-подъем Строгий режим JS JS это ключевое слово Функция стрелки JS JS-классы JS JSON JS-отладка Руководство по стилю JS Лучшие практики JS JS-ошибки JS-производительность Зарезервированные слова JS

JS-версии

JS-версии JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE/пограничный История JS

JS-объекты

Определения объектов Свойства объекта Методы объекта Отображение объекта Средства доступа к объектам Конструкторы объектов Прототипы объектов Итерации объектов Наборы объектов Карты объектов Ссылка на объект

JS-функции

Определения функций Параметры функции Вызов функции Вызов функции Функция Применить Закрытие функций

JS-классы

Введение в класс Наследование классов Статический класс

JS асинхронный

Обратные вызовы JS JS асинхронный JS-обещания JS асинхронный/ожидание

JS HTML DOM

Дом Введение DOM-методы Документ DOM DOM-элементы DOM HTML DOM-формы ДОМ CSS DOM-анимации События ДОМ Слушатель событий DOM DOM-навигация DOM-узлы Коллекции DOM Списки узлов DOM

Спецификация браузера JS

JS-окно JS-экран Местоположение JS История JS JS-навигатор Всплывающее оповещение JS JS Тайминг JS-куки

JS-веб-API

Введение в веб-API API веб-форм API истории веб-поиска API веб-хранилища API веб-работника API веб-выборки API веб-геолокации

JS АЯКС

Введение в АЯКС AJAX XMLHttp АЯКС-запрос AJAX-ответ XML-файл AJAX АЯКС PHP АЯКС АСП База данных AJAX AJAX-приложения Примеры AJAX

JS JSON

Введение в JSON Синтаксис JSON JSON против XML Типы данных JSON Анализ JSON Строковая JSON JSON-объекты JSON-массивы JSON-сервер JSON PHP JSON HTML JSON JSONP

JS против JQuery

Селекторы jQuery JQuery HTML jQuery CSS JQuery DOM

JS-графика

JS-графика JS Холст JS сюжет JS Chart.js JS Google Диаграмма JS D3.js

JS-примеры

JS-примеры JS HTML DOM JS HTML-ввод HTML-объекты JS HTML-события JS JS-браузер JS-редактор JS-упражнения JS-викторина JS-сертификат

JS-ссылки

Объекты JavaScript HTML DOM-объекты


JavaScript -формы


Проверка формы JavaScript

Проверка формы HTML может быть выполнена с помощью JavaScript.

Если поле формы (fname) пусто, эта функция выводит сообщение и возвращает false, чтобы предотвратить отправку формы:

Пример JavaScript

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}

Функция может быть вызвана при отправке формы:

Пример HTML-формы

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

JavaScript может проверять числовой ввод

JavaScript часто используется для проверки числового ввода:

Пожалуйста, введите число от 1 до 10



Автоматическая проверка формы HTML

Проверка формы HTML может выполняться браузером автоматически:

Если поле формы (fname) пусто, requiredатрибут запрещает отправку этой формы:

Пример HTML-формы

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

Автоматическая проверка формы HTML не работает в Internet Explorer 9 и более ранних версиях.


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

Проверка данных — это процесс обеспечения того, чтобы пользовательский ввод был чистым, правильным и полезным.

Типичные задачи проверки:

  • заполнил ли пользователь все обязательные поля?
  • пользователь ввел действительную дату?
  • пользователь ввел текст в числовое поле?

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

Валидация может быть определена многими различными методами и развернута различными способами.

Проверка на стороне сервера выполняется веб-сервером после отправки входных данных на сервер.

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


Проверка ограничений HTML

HTML5 представил новую концепцию проверки HTML, называемую проверкой ограничений .

Проверка ограничений HTML основана на:

  • Входные атрибуты HTML для проверки ограничений
  • Проверка ограничений Псевдоселекторы CSS
  • Свойства и методы DOM проверки ограничений

Входные HTML-атрибуты проверки ограничений

Attribute Description
disabled Specifies that the input element should be disabled
max Specifies the maximum value of an input element
min Specifies the minimum value of an input element
pattern Specifies the value pattern of an input element
required Specifies that the input field requires an element
type  Specifies the type of an input element

Полный список см . в разделе Атрибуты ввода HTML .


Псевдоселекторы CSS для проверки ограничений

Selector Description
:disabled Selects input elements with the "disabled" attribute specified
:invalid Selects input elements with invalid values
:optional Selects input elements with no "required" attribute specified
:required Selects input elements with the "required" attribute specified
:valid Selects input elements with valid values

Полный список см. в Псевдоклассы CSS .