Simple HTML Form

Руководство по валидации форм в JavaScript

Веб-формы стали неотъемлемой частью веб-приложений. Они часто используется для сбора такой информации о пользователе, как имя, адрес электронной почты, местоположение, возраст и т. д. Но вполне возможно, что какой-то пользователь может ввести данные не в том формате, в котором вы ожидаете.

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

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

В этом разделе мы более подробно рассмотрим, как выполнять валидацию форм на JavaScript и обрабатывать любые ошибки ввода.

Проверка на стороне клиента не является заменой или альтернативой проверке на стороне сервера. Вы должны всегда проверять данные формы на стороне сервера, даже если они уже проверены на стороне клиента, потому что пользователь может отключить JavaScript в своем браузере.

Проверка формы с помощью JavaScript

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

Что ж, давайте посмотрим как это работает.

Создание HTML-формы

Давайте сначала создадим простую HTML-форму, которую мы будем проверять на стороне клиента, используя JavaScript, когда пользователь нажимает кнопку отправки (submit). Для этого создадим HTML-файл с именем application-form.html и поместим в него следующий код, а затем сохраним его где-нибудь в вашей системе.

      
Форма заявки
 
Имя 
Email 
Номер телефона 
Страна Select Australia India United States United Kingdom  
 
Пол 
Мужской Женский 
 
 
Хобби (не обязательно) 
Спорт Кино Музыка 
 
  

Создание скрипта валидации формы

Теперь мы собираемся создать файл JavaScript, который содержит наш полный скрипт проверки.

Что ж, давайте создадим файл JavaScript с именем validator.js и поместим в него следующий код, а затем сохраним его в том же месте, где вы сохранили предыдущий HTML-файл. Просмотрите каждую строку следующего примера кода, чтобы понять, как работает проверка JavaScript:

// Определяем функции для отображения сообщения об ошибке function printError(elemId, hintMsg) < document.getElementById(elemId).innerHTML = hintMsg; >// Определяем функции для проверки формы function validateForm() < // Получение значений элементов формы var name = document.contactForm.name.value; var email = document.contactForm.email.value; var mobile = document.contactForm.mobile.value; var country = document.contactForm.country.value; var gender = document.contactForm.gender.value; var hobbies = []; var checkboxes = document.getElementsByName("hobbies[]"); for(var i=0; i < checkboxes.length; i++) < if(checkboxes[i].checked) < // Заполняем массив хобби выбранными значениями hobbies.push(checkboxes[i].value); >> // Определяем переменные ошибок со значением по умолчанию var nameErr = emailErr = mobileErr = countryErr = genderErr = true; // Проверяем имя if(name == "") < printError("nameErr", "Пожалуйста, введите ваше имя"); >else < var regex = /^[a-zA-Z\s]+$/; if(regex.test(name) === false) < printError("nameErr", "Пожалуйста, введите правильное имя"); >else < printError("nameErr", ""); nameErr = false; >> // Проверяем адрес электронной почты if(email == "") < printError("emailErr", "Пожалуйста, введите адрес вашей электронной почты"); >else < // Регулярное выражение для базовой проверки электронной почты var regex = /^\S+@\S+\.\S+$/; if(regex.test(email) === false) < printError("emailErr", "Пожалуйста, введите действительный адрес электронной почты"); >else < printError("emailErr", ""); emailErr = false; >> // Проверяем номер мобильного телефона if(mobile == "") < printError("mobileErr", "Пожалуйста, введите номер вашего мобильного телефона"); >else < var regex = /^3\d$/; if(regex.test(mobile) === false) < printError("mobileErr", "Пожалуйста, введите действительный 10-значный номер мобильного телефона"); >else < printError("mobileErr", ""); mobileErr = false; >> // Проверяем страну if(country == "Select") < printError("countryErr", "Пожалуйста, выберите вашу страну"); >else < printError("countryErr", ""); countryErr = false; >// Проверяем пол if(gender == "") < printError("genderErr", "Пожалуйста, выберите ваш пол"); >else < printError("genderErr", ""); genderErr = false; >// Запрещаем отправку формы в случае ошибок if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) < return false; >else < // Создаем строки из входных данных для предварительного просмотра var dataPreview = "Вы ввели следующие данные: \n" + "Имя: " + name + "\n" + "Email: " + email + "\n" + "Номер: " + mobile + "\n" + "Страна: " + country + "\n" + "Пол: " + gender + "\n"; if(hobbies.length) < dataPreview += "Hobbies: " + hobbies.join(", "); >// Отображаем входные данные в диалоговом окне перед отправкой формы alert(dataPreview); > >;

Доступ к значению отдельного поля формы можно получить с помощью синтаксиса document.formName.fieldName.value или document.getElementsByName(name).value . Но, чтобы получить значения из поля формы, которое поддерживает множественный выбор, например, группу чекбоксов, вам нужно использовать оператор цикла, как показано в примере выше (строки с 14 по 21).

Чтобы проверить, является ли формат входных данных правильным или нет, мы должны использовать регулярные выражения. Это один из наиболее эффективных методов проверки пользовательских данных.

Вышеприведенный скрипт также отображает данные, введенные пользователем в диалоговом окне для предварительного просмотра перед отправкой формы на веб-сервер.

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

Добавление стилей для формы

Наконец, создайте файл с именем style.css и поместите в него следующий код, затем сохраните его также в том же месте, где вы сохранили два предыдущих файла. Это правила для визуального оформления нашей формы.

body < font-size: 16px; background: #f9f9f9; font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; >h2 < text-align: center; text-decoration: underline; >form < width: 300px; background: #fff; padding: 15px 40px 40px; border: 1px solid #ccc; margin: 50px auto 0; border-radius: 5px; >label < display: block; margin-bottom: 5px >label i < color: #999; font-size: 80%; >input, select < border: 1px solid #ccc; padding: 10px; display: block; width: 100%; box-sizing: border-box; border-radius: 2px; >.row < padding-bottom: 10px; >.form-inline < border: 1px solid #ccc; padding: 8px 10px 4px; border-radius: 2px; >.form-inline label, .form-inline input < display: inline-block; width: auto; padding-right: 15px; >.error < color: red; font-size: 90%; >input[type="submit"] < font-size: 110%; font-weight: 100; background: #006dcc; border-color: #016BC1; box-shadow: 0 3px 0 #0165b6; color: #fff; margin-top: 10px; cursor: pointer; >input[type="submit"]:hover

Теперь откройте файл application-form.html в веб-браузере и попробуйте заполнить некоторые данные и посмотреть, как скрипт реагирует на ввод недопустимых данных в поле формы.

Чтобы узнать о проверке на стороне сервера, ознакомьтесь с Руководством по валидации форм в PHP.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 3.6 / 5. Количество оценок: 7

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…

Руководство по массивам в JavaScript

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

Руководство по работе с атрибутами DOM в JavaScript

Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге. JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно. Получение значения атрибута элемента Метод getAttribute() используется для получения текущего значения атрибута элемента. Если указанный…

Разработка сайтов для бизнеса

Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.

Источник

Проверка на включение js

Подскажите можно ли как то средствами php проверить включен ли у юзера js, примерно как то так:

if(javascript == on) { // сайт с ява скриптами } else { //простой сайт }

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

Проверка radioButton на включение и выключение
Есть 3 radioButton. Сделал условную конструкцию которая проверяет включения radioButton,но если не.

Включение пункта меню после включение чекбокса
Как правильно сделать, чтобы наличие галочки screenTimeOutTile пункта настроек включало неактивный.

Что быстрее, проверка на null, или проверка на тип перечисления в запросе?
вопрос такой. если несколько таблиц. сходных по структуре в запросе. в первой таблице .

noscript> style type="text/css"> .jsonly /style> /noscript> /head> body> div class="jsonly">JavaScript включен/div> noscript> div>JavaScript отключен/div> /noscript>

Сообщение от nepster

А что эта тема делает в разделе js? Её бы в PHP.

У PHP есть функция, которая считывает файл browscap.ini ( естественно на стороне клиента ) и возвращает список возможностей браузера. Имя ей get_browser ();
В качестве дополнительных параметров этой функции можно передать user_agent и флаг true , если вернуть нужно массив ( по умолчанию вроде объект ). Подробнее на официальном сайте PHP по адресу: get_browser

Добавлено через 26 секунд

P.S. давайте тему в раздел PHP

The cookies value simply means that the browser itself is capable of accepting cookies and does not mean the user has enabled the browser to accept cookies or not.

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

Vovan-VE, мда. с английским у меня проблемы. Теперь буду юзать какой-нибудь переводчик, что бы не повторять подобного.

Добавлено через 1 минуту

Сообщение от Vovan-VE

Таким образом, получается, что использование этой функции лишено смысла. Сейчас сложно найти браузер, который не поддерживает куки, js и т.п.

Hagrael, такие браузеры вряд ли кто-то использует. Даже у лентяя стоит как минимум шестой ослик. Хотя. Если брать во внимание наши учебные заведения, то там возможно и на четвертом остановились.

romchiksoad, я тож так считаю.

Добавлено через 52 секунды
Vovan-VE, в этом я не силён. В мобильниках ведь отдельный нэт или. нет?

Hagrael, Интернет — он и в Африке интернет.

Vovan-VE, Hagrael, ребят, я не знаю как у Вас, но в моем Nokia6288, есть даже функция включения/отключения сценариев JavaScript.
P.S. Давайте прекратим офтопить

Дело в том что у меня на сайте все запросы к серверу через ajax и js. И если пользователь умышленно или не умышленно отключит ява скрипт он получит не сайт а куски кода. Или даже если заходить на сайт с телефона (без поддержки js).

В общем задача кинуть пользователя (у которого отключен js) на грубо говоря мобильную версию сайта. Это возможно?

Возникает такая мысль. В теории, должно работать корректно. На практике не знаю.

noscript> meta http-equiv="Refresh" content="0; http://m.site.ru/" /> /noscript>

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

Добавлено через 32 секунды
Даже раньше меня это нашли

Добавлено через 8 минут
Vovan-VE, но по моему, работает только в . , т.к. его задача вывести текст, который помещен в него, в случае, если в браузере отключена поддержка ( или просто не поддерживает ) js и другого клиентского языка программирования. Но думаю, что ничего страшного все равно не произойдет. Максимум не валидный код.

Добавлено через 30 секунд
Попробовать нужно

Источник