Раздел: Javascript Cookbook

Проверка html-формы javascript’ом.

В интернете можно найти множество различных скриптов, написанных на javascript’е для проверки html-форм. Тем не менее, мне так и не удалось найти скрипт, который бы отвечал всем моим требованиям — был не тяжелый и не сложный, не имел бы лишнего не задействованного кода, а работал исключительно по назначению. Мой скрипт очень прост, не перегружен лишним и выполняет прямую задачу — проверку html-формы на корректность ввода е-маила, текстового и числового поля.

Начинающему, а уж тем более опытному, программисту написать такой скрипт не составит труда, но можно не утруждаясь воспользоваться данным скриптом и пользоваться им постоянно. Я, собственно, так и делаю ;)
Для лучшего понимаю всего происходящего буду объяснять прямо на примере.

Имеется следующая форма.


<form method="POST" onsubmit="return sendform()" name="myform">
  Name <input id="name" name="name" type="text" />
  E-mail <input id="mail" name="mail" type="text" />
  Phone Number <input id="number" name="number" type="text" />
  <input id="sub_mit" type="submit" value="Отправить" />
</form>

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

Задача скрипта на первом же этапе заполнения формы, еще до ее отправки — хотя бы поверхностно проверить корректность вводимой информации. Под словом «поверхностно» я имею ввиду — нет ли в имени цифры или спецсимвола, не начинается ли электронный адрес с точки или скобки, не затесалась ли в номере телефона буква.
В данном скрипте сообщения об ошибке выводятся простым alert’ом. Но, при желании, можно сообщения выводить прямо в html, красиво оформив и подогнав под дизайн страницы.


<script type="text/javascript">
//функция sendform() вызывается событием onsubmit у нашей формы myform

function sendform() {
  //для начала нужно проверить нет ли пустых значений. Все ли необходимые поля заполнены.
  //Создаем массив по атрибутам name всех полей (input). Просто переписываем значения атрибутов.
  fieldNames = new Array("name", "mail", "number");
  //Создаем соответствующий массив с названиями полей. Их мы будем подставлять в оповещение о пустом поле. Важно чтобы последовательность значений атрибутов в массиве выше соответствовала последовательности названий полей.
  fieldValues = new Array("Имя", "E-mail", "Номер мобильного телефона");


  //Создаем два цикла: один по количеству элементов массива fieldNames, второй по количеству элементов формы.
  for (j=0; j<fieldNames.length; j++) {
    for (i=0; i<document.myform.length; i++) {
    //если атрибут name текущего элемента соответствует текущему элемента массива fieldNames и значение текущего элемента равно пустоте, то выводим сообщение об ошибке, подсвечиваем элемент, заканчиваем работу скрипта
if (document.myform.elements[i].name==fieldNames[j] && document.myform.elements[i].value==""){
      alert ('Пожалуйста, заполните поле ' + fieldValues[j]);
      document.myform.elements[i].focus();
      return false;
      }
    }
  }


  //находим элемент с айди "name"
  var nameId = document.getElementById("name");
  //берем у этого элемента значение (String - для наглядности)
  var nameStr = String(nameId.value);
  //создаем регулярное выражение, записываем в переменную
  var reg = /[^A-Za-z]/;
  //проверяем методом test значение элемента с айди "name" на соответствие регулярному выражению, записанному в переменную reg. Если соответствует, то получается что строка в поле name имеет что-то еще помимо больших и маленьких букв латинского алфавита и, соответственно, не корректна. return false обрывает дальнейшую работу скрипта.
  if (reg.test(nameStr)) {
    alert ('Вы ввели не корректное имя.');
    document.getElementById("name").focus();
    return false;
  }


  //далее блок кода абсолютно аналогичен предыдущему с одной лишь разницей - регулярное выражение другое.
  var email = document.getElementById("mail");
  var emailStr = String(email.value);
  //регулярное выражение я нашла где-то в интернете. Таких выражений в поисковике можно найти великое множетсво, но это на мой взгляд самое грамотное.
  var reg = /^([a-z0-9_-]+.)*[a-z0-9_-]+@([a-z0-9][a-z0-9-]*[a-z0-9].)+[a-z]{2,4}$/i;
  if (!reg.test(emailStr)) {
    alert ('Пожалуйста, введите корректный электронный адрес.');
    document.getElementById("mail").focus();
    return false;
  }


  //и точно так же мы делаем проверку поля телефон.
  var number = document.getElementById("number");
  var numberStr = String(number.value);
  //простое регулярное выражение - "все что угодно кроме цифры"
  var reg = /[^d]/;
  if (reg.test(numberStr)) {
    alert ('Не верный формат телефонного номера.');
    document.getElementById("number").focus();
    return false;
  }

  return true;
}
</script>


Важно!
На событие отправки формы onsubmit назначено выполнение функции и возврещение результата работы — «return sendform()». По мере отработки функции возвращается негативный (false) или позитивный (true) ответ. Именно такая конструкция — возвращение результата работы — нам необходима для избежания отправки формы с неверными данными. Т.е. если данные в каком-либо поле неверны, то функция возвратит false что заблокирует отправку. Если же все что ввели в форму соответствует требованиям, то вернется true и форма отправится.

Такая проверка позволит отсечь большую часть мусора уже на стороне клиента, и снимет нагрузку на сервер, которая может быть в виде лишних операций по проверке приходящих данных. Тем не менее, данный скрипт не избавит вас от недобропорядоных пользователей, посылающих вам такие имена типа «блабла», «Аавпаырв» и такие емеильники как «fsdghsfgdh@fgdsh.df». От этого, к сожалению, защититься невозможно.

А вот и сам файл с формой и скриптом в одном флаконе:

Спасибо за внимание!

Комментировать

Комментарии

10 + восемнадцать =

  1. А ещё можно почту проверять телнетом (т.е. пишешь скрипт на php чтоб делал через cmd)

  2. Автор, выпей яду:
    var nameStr = String(nameId.value);
    //создаем регулярное выражение, записываем в переменную
    var reg = /[^A-Za-z]/;

    чего это у тебя имя на анг?

  3. @Геннадий
    Спасибо за внимание. Конечно, у каждого ситуация уникальная и все равно приходится дорабатывать под себя любой код.