Вход

Просмотр полной версии : Валидация Пароля и Email

203
25.05.2013, 11:58
Здравствуйте. Не получается написать работающую проверку пароля и email. Задача состоит в том, когда заполнил форму, я нажимаю кнопку submit (мне выдаёт ошибки если есть, если нет то переход на другую страницу). Помогите пожалуйста заранее спасибо.
Вот то что получилось написать.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Регистрация</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script type="text/javascript">
function checkPasswords()
{
var passl = document.getElementByid("passwordl");
var pass2 = document.getElementByid("password2");
if(passl.value!=pass2.value)
passl.setCustomValidity("Пароли не совпадают. Пожалуйста, проверьте идентичность паролей в обоих полях!");
else
passl.setCustomValidity("");
}
function checkmail(value) {

reg = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
if (!value.match(reg)) {alert("Пожалуйста, введите свой настоящий e-mail");
document.getElementById('email').value=""; return false; }
}

</script>
</head>
<body>
<div id="content">
<form action="3.html" id="jform" method="post">
<fieldset>
<legend>Регистрация</legend>
<p>
<label for="firsname" class="block">Имя:</label>
<input type="text" name="firsname" id="firsname" />
</p>
<p>
<label for="lastname" class="block">Фамилия:</label>
<input type="text" name="lastname" id="lastname" />
</p>
<p>
<label for="passwordl" class="block">Пароль:</label>
<input type="Password" id="passwordl" onchange="checkPasswords()"/>
</p>
<p>
<label for="password2" class="block">Повторение пароля:</label>
<input type="Password" name="Password2" id="password2" onchange="checkPasswords()"/>
</p>
<p>
<label for="birthday" class="block">Дата рождения<small>(дд-мм-гггг)</small>:</label>
<input type="text" name="birthday" id="birthday" />
</p>
<p>
<label for="email" class="block">Email <small>Например(Ivanov@gmail.com)</small>:</label>
<input type="text" name="email" id="email"/>
</p>
<p>
<label for="email" class="block">Ваш пол:</label>
<label for="Men" class="block">Мужчина</label>
<input type="radio" name="se" id="Men" value="Male"/>
<label for="woman" class="block">Женщина</label>
<input type="radio" name="se" id="woman" value="Female"/>
</p>
<p>
<label for="email" class="block">Хобби</label>
</p>
<select>
<optgroup Label ="General hooby">
<option value="playing">Playing</option>
<option value="music">Music </option>
</optgroup>
<optgroup Label ="Educational hobby">
<option value="stamp collection">Stamp Collection</option>
<option value="reading">Reading</option>
</optgroup>
</select>
</fieldset>
<p>
<form action="#" method=post onSubmit="return checkmail(this.email.value)">
<button type="submit" id="send">Подтвердить</button>
</form>
</p>
<p>
<button type="reset" id="send">Очистить</button>
</p>
</form>
</div>
</body>
</html>
elnoro
25.05.2013, 20:46
Я упростил код, чтобы решение стало очевидно:

<form action="">
<p>Пароль:<input type="password" name="password1" id="password1" /></p>
<p>Повторите пароль:<input type="password" name="password2" id="password2" /></p>
<p>Email: <input type="text" name="email" id="email" /></p>
<p><input type="submit" id="submit_button" onclick="return validateForm()"/></p>
</form>

function validateForm () {
// проверяем пароли
// выбираем элементы
var password1 = document.getElementById('password1');
var password2 = document.getElementById('password2');
// сравниваем написанное, если не равно, то:
if (password1.value !== password2.value) {
// сообщаем пользователю, можно сделать как угодно
alert('Проверьте пароли!');
// сообщаем браузеру, что не надо обрабатывать нажатие кнопки
// как обычно, т. е. не надо отправлять форму
return false;
}
// проверяем email
var email = document.getElementById('email');
// регулярка для проверки, не знаю, работает ли приведенный в примере
var email_regexp = /[0-9a-zа-я_A-ZА-Я]+@[0-9a-zа-я_A-ZА-Я^.]+\.[a-zа-яА-ЯA-Z]{2,4}/i;
// проверяем значение поля email, если нет, то:
if (!email_regexp.test(email.value)) {
alert('Проверьте email');
return false;
}
}

Подробнее про return false (http://javascript.ru/tutorial/events/intro#smysl-return-false-iz-obrabotchika) . Здесь хочу отметить, что в случае ошибки функция возвращает ложь, а строчка в onclick кнопки возвращает значение функции всегда, т. е. при ошибке в onclick возвращается false.

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

Первая и главная ошибка, которая бросилась в глаза - неправильная верстка формы, т. е. 2 тега form. Кнопка submit должна находится в той же форме, которую отправляет. Подробнее тут (http://htmlbook.ru/html/form).

Пример тут (http://jsfiddle.net/R4bPm/).
203
26.05.2013, 00:37
Спасибо разобрался все работает. Не подскажите как передать поля с именем и фамилией на другую страницу.
Пример: когда я нажимаю кнопку подтвердить то выполняется переход на другую страницу и выводит фамилию и имя которое я ввёл.
elnoro
26.05.2013, 10:54
В начале формы пишешь:
<form action="test.php" method="get"> вместо <form action="">
И добавляешь 2 input'а с type="text" и name="firstname" и name="lastname"
Создаешь в той же папке test.php следующего содержания:

<?php
echo "Имя " . $_GET[firstname] . " Фамилия " . $_GET[lastname];
?>

Для этого должен быть настроен php, это в гугл:) .

Кстати, можно по-другому, без php:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test</title>
</head>
<body>
<form action="test2.html" method="get">
Email:<input type="text" name="email" value="test_email"/>
Phone:<input type="text" name="phone" value="121222"/>
<input type="submit" />
</form>
</body>
</html>


Файл test2.html:

<script type="text/javascript" charset="utf-8">
var resultats = location.search.slice(1).split('&').map(function (e) { return e.split('=')[1] });
document.writeln('Email:' + resultats[0]);
document.writeln('Phone:' + resultats[1]);
</script>


В строке с resultats, по порядку:
1. location.search - берем строку вида ('?emai=te&phone=1').
2. slice(1) - убираем знак вопроса
3. split('&') - разделяем строку на массив строк по '&'
4. map(function (e) {}) - проходим по массиву и каждый элемент еще раз разбиваем по '=' и возвращаем второй элемент.
203
26.05.2013, 15:44
Спасибо большое за помощь, очень помогли.