Валидация Пароля и Email
Здравствуйте. Не получается написать работающую проверку пароля и 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>
|
Я упростил код, чтобы решение стало очевидно:
<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 . Здесь хочу отметить, что в случае ошибки функция возвращает ложь, а строчка в onclick кнопки возвращает значение функции всегда, т. е. при ошибке в onclick возвращается false. Я также не был уверен в правильности регулярного выражения, приведенного выше, потому взял простейшее для проверки email. Про них можно прочитать на сайте. Первая и главная ошибка, которая бросилась в глаза - неправильная верстка формы, т. е. 2 тега form. Кнопка submit должна находится в той же форме, которую отправляет. Подробнее тут. Пример тут. |
Спасибо разобрался все работает. Не подскажите как передать поля с именем и фамилией на другую страницу.
Пример: когда я нажимаю кнопку подтвердить то выполняется переход на другую страницу и выводит фамилию и имя которое я ввёл. |
В начале формы пишешь:
<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) {}) - проходим по массиву и каждый элемент еще раз разбиваем по '=' и возвращаем второй элемент. |
Спасибо большое за помощь, очень помогли.
|
| Часовой пояс GMT +3, время: 09:05. |