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

Очень часто возникает необходимость добавления формы на сайт, ведь форма - это самый популярный способ общения пользователя с сайтом, и очень важно, чтобы данные, ведённые пользователем были корректными. И чтобы форма была отправлена с верными данными необходимо её перед этим проверить. И вот проверкой формы в JavaScript мы и займёмся в этой статье.

Давайте для начала создадим форму, которую потом будем проверять:

<form name = 'form1' action = 'handler.php' method = 'post'>
Ваше имя:
<input type = 'text' name = 'firstname' />
<br />
Ваш пароль:
<input type = 'password' name = 'pass' />
<br />
Ваш пол:
<input type = 'radio' name = 'sex' value = 'male' />
<input type = 'radio' name = 'sex' value = 'female' />
<br />
Выберите число:
<select name = 'number'>
<option value = '1'>1</option>
<option value = '2'>2</option>
<option value = '3'>3</option>
</select>
<br />
Ваше сообщение:
<textarea name = 'message'></textarea>
<br />
Согласитесь с нашими правилами:
<input type = 'checkbox' name = 'rules' />
<br />
<input type = 'hidden' value = 'hidefield' />
Загрузите файл:
<input type = 'file' name = 'fileupload' />
<br />
<input type = 'submit' value = 'Отправить' name = 'sub' />
<br />
<input type = 'button' value = 'Просто кнопка' name = 'but' />
</form>

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

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

document.имя_формы.имя_поля.value;

То есть сначала обращаемся к объекту Document, затем к его свойству Form (через имя формы), потом к имени поля данной формы, и, наконец, к значению поля. Давайте выведем все поля, которые подчиняются этому общему виду:

var form = document.form1;
document.write(form.firstname.value + "<br />");
document.write(form.pass.value + "<br />");
document.write(form.number.value + "<br />");
document.write(form.message.value + "<br />");
document.write(form.rules.value + "<br />");
document.write(form.hidefield.value + "<br />");
document.write(form.fileupload.value + "<br />");
document.write(form.sub.value + "<br />");
document.write(form.but.value + "<br />");

Это все поля, которые имеют свойство value, и к которым можно получить доступ таким образом.

Теперь поговорим об одном особенном элементе формы - radio. Получим доступ к значению radio:

var sex = (document.form1.sex[0].checked)?
document.form1.sex[0].value: document.form1.sex[1].value;

Обратите внимание, что у нас есть два элемента radio, которые находятся в массиве sex. Индексы у них 0 и 1. В данном скрипте мы проверяем, если у нас первый элемент включён (checked), то присваиваем значение первого элемента, иначе присваиваем значение второго элемента. Кстати, если кто не понял, то это такая конструкция оператора условия IF. Разумеется, можно было бы написать и так:

var sex;
if (document.form1.sex[0].checked) sex = document.form1.sex[0].value;
else sex = document.form1.sex[1].value;

Теперь, когда мы получили доступ ко всем полям, давайте с Вами, наконец, сделаем проверку формы. Но сначала давайте добавим в тег < form > атрибут " onSubmit " со значением " return check(); ". Данный атрибут будет делать следующее: перед отправкой формы вызывать функцию, которая должна будет вернуть либо true, либо false. Если она вернёт true, то форма отправится на сервер, а если false, то форма не будет отправлена.

Теперь создадим функцию check(), которая должна, во-первых, проверять полностью форму, сообщать пользователю об ошибках, а также возвращать true (если форма полностью правильная), либо false (если форма содержит ошибки).

function check(form) {
var firstname = form.firstname.value;
var pass = form.pass.value;
var message = form.message.value;
var rules = form.rules.value;
var file = form.fileupload.value;
var bad = "";
if (firstname.length < 3)
bad += "Имя слишком короткое" + "\n";
if (firstname.length > 32)
bad += "Имя слишком длинное" + "\n";
if (pass.length < 3)
bad += "Пароль слишком короткий" + "\n";
if (pass.length > 32)
bad += "Пароль слишком длинный" + "\n";
if (message.length < 3)
bad += "Сообщение слишком короткое" + "\n";
if (rules!= "on")
bad += "Вы не согласились с правилами" + "\n";
if (file.length == 0)
bad += "Вы не выбрали файл для загрузки" + "\n";
if (bad!= "") {
bad = "Неверно заполнена форма:" + "\n" + bad;
alert(bad);
return false;
}
return true;
}

В данном скрипте мы сначала получаем все данные, нуждающиеся в проверке, и записываем их в переменные. Затем создаём переменную bad, в которую записываем все некорректные данные. Затем идёт целый набор IF, которые проверяют поля в форме и записывают все ошибки в переменную bad. Затем, если переменная bad не пустая (то есть были ошибки), то выводим окно (alert()) с ошибками. И возвращаем false, чтобы форма не была отправлена. Если переменная bad пустая, то дальше просто возвращаем true, чтобы форма была отправлена уже на обработку в " handler.php ".

Как видите, проверка формы в JavaScript достаточно простое занятие. И главное здесь предусмотреть все возможные ошибки и обработать их соответствующим образом.

Дата добавления: 2015-10-31