Форум

203 · #1 (**permalink**) 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 · #2 (**permalink**) 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 . Здесь хочу отметить, что в случае ошибки функция возвращает ложь, а строчка в onclick кнопки возвращает значение функции всегда, т. е. при ошибке в onclick возвращается false.

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

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

Пример тут.

203 · #3 (**permalink**) 26.05.2013, 00:37

Спасибо разобрался все работает. Не подскажите как передать поля с именем и фамилией на другую страницу.
Пример: когда я нажимаю кнопку подтвердить то выполняется переход на другую страницу и выводит фамилию и имя которое я ввёл.

elnoro · #4 (**permalink**) 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 · #5 (**permalink**) 26.05.2013, 15:44

Спасибо большое за помощь, очень помогли.

Форум

Справочник

Discord чат

Курсы javascript