Question

我正在尝试验证电子邮件字段，如果有效，请提交我的表单。但是当我将其提交给服务器时，表单会给我一个错误。如果我使用提交按钮提交它，它可以正常工作。

<script>

function ValidateEmail(inputText)  
{  
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;  
if(inputText.value.match(mailformat))  
{  
document.form1.submit();
}  
else  
{  
alert("You have entered an invalid email address!");  
document.form1.email.focus();  
return false;  
}  
}  

</script>

<form action="mailer.php" id="form1"   name="form1" method="POST">



  <input type="text"  size="19" name="name"/>
<input type="text"  size="19" name="phone"/>
<input type="text"  size="19" name="email"/>


    <a  onclick="ValidateEmail(document.form1.email)" href="#">Submit</a>




</p>
</form>


<?php
if(isset($_POST['submit'])) {

$to = "marshal@smedia.ca"; 
$to2 = $_POST['email'];
$subject = "Lead Gen";
$subject2 = "Coupon2";
$first_field = $_POST['name'];
$email_field = $_POST['email'];
$phone_field = $_POST['phone'];
$headers .= "Content-type: text/html\r\n"; 
$headers .= 'From: Nurray GM <welcome@mycompany.com>' . "\r\n";


$body = "

From: $first_field \n   

E-Mail: $email_field\n 

Phone Number: $phone_field\n ";


$body2 = "


<html>
 <body bgcolor='#DCEEFC'>
    <p>Hello  $first_field,</p> 

    <p>Thank you for applying for pre approval. balbalblah.</p> 

  <img src='www.smedia.ca/clients/leadgen/murray/coupon.jpg' width='500px' height='200px' />


  </body>
</html> 

";


mail($to, $subject, $body, $headers);

mail($to2, $subject2, $body2, $headers );

header("Location: http://www.smedia.ca/clients/leadgen/murray/redirect.html");  
} else {
echo "Sorry - something seems to be wrong. Your message was not sent";
}


?>

Answer 1

你不应该这样做。您应该将validate函数附加到表单的onsubmit事件，并在出现问题时拒绝提交（通过返回false或阻止默认行为）。

<form action="mailer.php" id="form1" onsubmit="return mysubmitcheck()"
      name="form1" method="POST">

function mysubmitcheck() { if (...) return true; else return false; }

这就是用纯javascript完成的方式，它仍然有效。您应该使用常规提交按钮代替a链接。

现在人们用jquery做同样的事情（比如解释here），但是如果你没有在其他任何地方使用jquery，那么这里就不会增加特殊价值。

也可以附加到onsubmit之类的事件，这样就不会污染HTML，比如

window.onload = function() {
  // find the form
  form.onsubmit = mysubmitcheck;
}

Answer 2

如果INSIST在链接上使用内联脚本，则更改

<a  onclick="ValidateEmail(document.form1.email)" href="#">Submit</a>

到

<a onclick="ValidateEmail(document.form1.email); return false" href="#">Submit</a>

避免重新加载页面

我将如何做到这一点

var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;  
window.onload=function() {
  document.getElementById("form1").onsubmit=function() {
    if(!this.email.value.match(mailformat)) {  
     alert("You have entered an invalid email address!");  
     this.email.focus();  
     return false;  
    }
    return true;  
  } 
}

并使用<input type="submit" />代替链接。如果您希望它看起来像一个链接，我们可以像按一个

来设置按钮的样式

Javascript联系表格提交帖子

2 个答案: