ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
Теги HTML HTML учебник Теги CSS CSS учебник JavaScript учебник PHP учебник SQL учебник Bootstrap 4 Еще
×

JavaScript учебник

JS HOME JS Introduction JS Where To JS Output JS Statements JS Syntax JS Comments JS Variables JS Operators JS Arithmetic JS Assignment JS Data Types JS Functions JS Objects JS Scope JS Events JS Strings JS String Methods JS Numbers JS Number Methods JS Arrays JS Array Methods JS Array Sort JS Array Iteration JS Dates JS Date Formats JS Date Get Methods JS Date Set Methods JS Math JS Random JS Booleans JS Comparisons JS Conditions JS Switch JS Loop For JS Loop While JS Break JS Type Conversion JS Bitwise JS RegExp JS Errors JS Debugging JS Hoisting JS Strict Mode JS this Keyword JS Style Guide JS Best Practices JS Mistakes JS Performance JS Reserved Words JS Versions JS Version ES5 JS Version ES6 JS JSON

JS Forms

JS Forms Forms API

JS Objects

Object Definitions Object Properties Object Methods Object Constructors Object Prototypes

JS Functions

Function Definitions Function Parameters Function Invocation Function Call Function Apply Function Closures

JS HTML DOM

DOM Intro DOM Methods DOM Document DOM Elements DOM HTML DOM CSS DOM Animations DOM Events DOM Event Listener DOM Navigation DOM Nodes DOM Collections DOM Node Lists

JS Browser BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS AJAX

AJAX Intro AJAX XMLHttp AJAX Request AJAX Response AJAX XML File AJAX PHP AJAX ASP AJAX Database AJAX Applications

JS JSON

JSON Intro JSON Syntax JSON vs XML JSON Data Types JSON Objects JSON Arrays JSON Parse JSON Stringify JSON PHP JSON HTML JSON JSONP

JS References

JavaScript Objects HTML DOM Objects


JavaScript Формы

❮ Назад Дальше ❯

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

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

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

Пример JavaScript

function validateForm() {
    var 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) пусто, обязательный атрибут предотвращает отправке этой формы:

Пример 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 проверки зависимостей

Атрибут Описание
disabled Указывает, что входной элемент должен быть отключен
max Задает максимальное значение входного элемента
min Задает минимальное значение входного элемента
pattern Задает шаблон значения для входного элемента
required Указывает, что для поля ввода требуется элемент
type  Указывает тип входного элемента

Для полного списка перейдите к атрибутам ввода HTML.

Проверка зависимостей CSS псевдо селекторы

Селектор Описание
:disabled Выбор входных элементов с указанным атрибутом "Disabled"
:invalid Выбор входных элементов с неверными значениями
:optional Выбор входных элементов без указанного атрибута "required"
:required Выбор входных элементов с указанным атрибутом "required"
:valid Выбор входных элементов с допустимыми значениями

Для полного списка, перейдите к CSS псевдо-классов.


❮ Назад Дальше ❯