УРОКИ JAVASCRIPT HTML DOM DHTML AJAX ПРИМЕРЫ JAVASCRIPT

JavaScript Урок 31 Проверка Введенных Данных с Формы


« Назад Далее »

JavaScript Проверка Введенных Данных Формы

JavaScript может использоваться для проверки данных в HTML формах, передаваемых на сервер.

Данные формы, которые как правило проверяются с помощью JavaScript, могут быть следующего типа:

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

Обязательные Поля

Функция ниже проверяет, не оставлено ли поле пустым. Если поле не заполнено, выскакивает сигнальное окно с сообщением, функция возвращает false, и данные с формы не будут отправлены:

function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
  {
  alert("Имя должно быть обязательно введено");
  return false;
  }
}

Функция выше могла бы вызываться при нажатии кнопки "Отправить" на форме:

Пример

<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">


</form>

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает


Проверка Адреса Электронной Почты

Функция ниже проверяет, соответствует ли общему синтаксису адреса электронной почты введенный текст.

Это означает, что введенные данные должны содержать знак @ и по крайней мере одну точку (.). Также знак @ не должен быть первым символом в адресе электронной почты, и по крайней мере одна точка должна присутствовать после знака @, и минимум 2 символа до конца строки:

function validateForm()
{
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  alert("Не правильный адрес e-mail");
  return false;
  }
}

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

Пример

<form name="myForm" action="demo_form.php" onsubmit="return validateForm();" method="post">


</form>

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает




« Назад Далее »
© 2011-2019 Уроки JavaScript