Публикуйте и отправляйте сообщения о проблемах, используя JavaScript, формы и php - PullRequest
Новая
       20

Публикуйте и отправляйте сообщения о проблемах, используя JavaScript, формы и php

2 голосов
/ 08 февраля 2010

Я пытаюсь создать javascript для валидации электронной почты и заставить его работать с формами и PHP. Конечно, некоторые проблемы ...

  1. Как вы можете видеть в моей форме, я определил "post" как метод. Но я могу получить данные только так, как если бы это был метод get. Он работал до того, как я начал добавлять скрипт проверки электронной почты и принимать код к нему.

  2. Если адрес электронной почты неправильный, я возвращаю false. Разве это не означает, что запрос к test.php (определенный в действии) не должен быть выполнен? Как и сейчас, страница доступна, даже если я возвращаю false.

  3. В зависимости от ответов на поставленные выше вопросы, нужно ли мне отправлять форму из Javascript, если электронное письмо подтверждено нормально?

JavaScript: 

function isValidEmail() {
    regExp = /^[a-zA-Z]+([_\.-]?[a-zA-Z0-9]+)*@[a-zA-Z0-9]+([\.-]?[a-zA-Z0-9]+)*(\.[a-zA-Z]{2,4})+$/;
 if(document.subscribe.email1.value.search(regExp) == -1){
          alert(document.subscribe.email1.value + " Incorrect email address");
    return false; 
    } 

//document.subscribeForm.submit();

return true; 
}

PHP: 

<?php

echo $_POST['email1'];

$mysqli = mysqli_connect("localhost", "root", "", "test", "3306");

$result = mysqli_query($mysqli, "SELECT email, id, subscriber, subscribed_date FROM `user` u;");

while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
foreach($row as $key => $value){

   echo "$key = $value<BR/>";
}
}

mysqli_free_result($result);
mysqli_close($mysqli);

?>

HTML: 

<div id="subscribe">
  <form action="test.php" name="subscribe" method=post">
    <p id="formlabel">E-mail</p> <input type="text" name="email1">
    <br>
    <p id="formlabel">Repeat e-mail</p> <input type="text" name="email2"> <br/>
    <input type="submit" value="Subscribe" onclick="isValidEmail()">
  </form>

Ответы [ 2 ]

3 голосов
/ 08 февраля 2010 
<input type="submit" value="Subscribe" onclick="isValidEmail()">

Выполняется isValidEmail(), а затем выбрасывает результат. onclick само возвращает undefined, и отправка не предотвращается.

Вы можете сказать onclick="return isValidEmail()". Тем не менее:

  1. Поместите элементы проверки / отправки в form onsubmit, а не input click, чтобы гарантировать, что он всегда вызывается для всех типов отправки формы.

  2. Лучше избегать встроенных обработчиков событий.

  3. Вы пропустили " в атрибуте method вашей формы, что, по-видимому, и привело к возврату по умолчанию get.

так: 

<form id="subscribe" method="post" action="test.php">
    ...
</form>

<script type="text/javascript>
    document.getElementById('subscribe').onsubmit= function() {
        if (!this.elements.email1.value.match(/^[^@]+@[^@]+$/) {
            alert('Please enter an e-mail address');
            return false;
        }
        if (this.elements.email1.value!=this.elements.email2.value) {
            alert('E-mail addresses do not match');
            return false;
        }
        return true;
    } 
</script>

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

Проверка правильности адресов электронной почты с помощью регулярных выражений нелепо трудна . Лучше включить только тривиальную проверку для явно искаженных строк, как указано выше. Если вам нужно действительно проверить адрес электронной почты, вам придется попытаться отправить ему письмо или, по крайней мере, попытаться найти часть адреса домена для MXer.

См. этот вопрос для обсуждения.

2 голосов
/ 08 февраля 2010

Вы должны присоединить функцию к событию onsubmit формы: 

<form action="test.php" name="subscribe" method="post" onsubmit="isValidEmail()">

, где вы можете остановить событие, возвращающее false.Кроме того, вы сделали опечатку в method = post ", поэтому она не передается в виде данных POST.

...