使用 javascript、forms 和 php 发布和提交问题

Question

我正在尝试创建一个 validate-email javascript 并让它与表单和 PHP 一起使用。当然，有些问题...

1. 正如您在我的表单中看到的，我确实将“post”定义为方法。但我只能像获取方法一样检索数据。在我开始添加电子邮件验证脚本并采用代码之前，它正在工作。

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> 

Answer 1

<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>

我用一个简单的正则表达式替换了这个正则表达式，因为您当前使用的表达式是虚假的，并且会拒绝 许多 个有效的电子邮件地址。拒绝客户，因为他们的电子邮件地址不符合您对电子邮件地址糟糕的概念。

使用正则表达式 is absurdly difficult 正确“验证”电子邮件地址。最好只对上述明显格式错误的字符串进行简单的检查。如果您需要真正检查电子邮件地址，则必须实际尝试向其发送邮件，或者至少尝试查找 MXer 地址的域名部分。

请参阅this question 进行讨论。

Answer 2

您应该将该函数附加到表单的 onsubmit 事件：

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

您可以在其中停止返回 false 的事件。 另外，您在 method=post" 中打错了字，这就是它没有作为 POST 数据提交的原因。