Валидация html форм с помощью javascript

      Комментарии к записи Валидация html форм с помощью javascript отключены

Главная Форумы Программирование Веб программирование Валидация html форм с помощью javascript

В этой теме 0 ответов, 1 участник, последнее обновление  Васильев Владимир Сергеевич 2 мес. назад.

  • Автор
    Сообщения
  • #3648

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

    Допустим у нас есть сайт с регистрацией пользователей. Вот регистрационная форма (читать про обработчик формы):

    <html>
    <head>
    <title>Регистрация</title>
    </head>
    <body>
    <form OnSubmit='return Validate(this);' method='POST' action='register.php'>
    <table bgcolor='silver' border='0px'>
    <tr><th align='center'>Регистрация</th></tr>
    <tr>
    <td>Имя пользователя</td><td><input type='text' name='username' id='username'/></td>
    </tr>
    <tr>
    <td>Пароль</td><td><input type='password' name='pass' id='pass'/></td>
    </tr>
    <tr>
    <td>Подтвердите пароль</td><td><input type='password' name='passagain' id='passagain'/></td>
    </tr>
    <tr>
    <td>E-mail</td><td><input type='text' name='mail' id='mail'/></td>
    </tr>
    <tr>
    <td>Дата рождения</td><td><input type='date' name='date' id='date'/></td>
    </tr>
    <tr><td><input type='submit' value='регистрация'/></td></tr>
    </form>
    </body>
    </html>

    Теперь необходимо создать проверку данных, введенных пользователем. Если данные введены правильно, то форма будет отправлена, если нет, то отправка будет отменена.

    Проверка введенных данных будет осуществляться с помощью JavaScript.

    Для проверки данных создадим скрипт и функцию Validate(obj)

    function Validate(obj) {
      var username=obj.username.value;
      var pass=obj.pass.value;
      var passagain=obj.passagain.value;
      var mail=obj.mail.value;
      var date=obj.date.value.split('-');
      var errors="";
      if (username=="" || pass=="" || passagain=="" || mail=="")
      {
        alert("Все поля должны быть заполнены!!");
        return false;
      }
      if (pass!=passagain)
      {
        errors+="Пароли не совпадают!!\n";
      }
      if (pass.length<6)
      {
        errors+="Слишком короткий пароль!!\n";
      }
      var reg = /^\w+@\w+\.\w{2,4}$/i;
      if (!reg.test(mail))
      {
        errors+="Неправильный e-mail адрес!!\n";
      }
      if (date[0]<1930)
      {
        errors+="Указана неверная дата рождения!!\n";
      }
    
      if(errors=="")
        return true;
      else
      {
        alert(errors);
        return false;
      }
    }

    А теперь все по порядку. Сначала мы получаем данные формы и сохраняем их в переменные (поле date имеет формат гггг-мм-дд, поэтому используем функцию split(), которая разделяет строку на три значения).

    Далее мы проводим первую проверку на заполнение полей. Если хотя бы одно поле не заполнено, то функция возвращает значение false и сообщает пользователю о неправильном вводе.

    Следующий шаг проверки — проверка пароля, он не должен быть короче 6 символов и должен совпадать с повторно введенным. В случае неудачной проверки в переменную errors записывается текст ошибки.

    Затем объявляется регулярное выражение reg, с которым сравнивается электронный адрес, при неудаче опять же записывается сообщение об ошибке.

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

    Теперь если в переменной errors есть хотя бы какой-то текст ошибки, то функция возвращает false и выводит ошибки. Присваиваем обработчику события отправки формы нашу функцию, в качестве аргумента указываем обрабатываемую форму.

Для ответа в этой теме необходимо авторизоваться.