Javascript 向表单添加验证码_Javascript_Php_Html_Forms_Captcha

Javascript 向表单添加验证码

javascript php html forms

Javascript 向表单添加验证码,javascript,php,html,forms,captcha,Javascript,Php,Html,Forms,Captcha,我正在尝试对我的电子邮件表单实现一个简单的基于数学的验证码。我知道，数学不是万能的，但它能满足我的需要我在教程中尝试了许多不同的尝试，但我似乎无法得到它，所以我想我应该发布我的代码，看看会有什么结果现行表格： HTML页面的顶部- <?php /* validation function for when they press the submit button */ function validateFields($fields, $form_vars) { $errors

我正在尝试对我的电子邮件表单实现一个简单的基于数学的验证码。我知道，数学不是万能的，但它能满足我的需要

我在教程中尝试了许多不同的尝试，但我似乎无法得到它，所以我想我应该发布我的代码，看看会有什么结果

现行表格：

HTML页面的顶部-

<?php

/* validation function for when they press the submit button */
function validateFields($fields, $form_vars) {
    $errors = array();
    foreach($fields as $field_name => $error_msg) {
    $value_entered = trim(@$form_vars[$field_name]);
    if(empty($value_entered)) {
        $errors[$field_name] = $error_msg;
    }
}
return $errors;
}

function safe($str) { return htmlentities(strip_tags($str)); }

?>

最后，是在表单部分调用的动作PHP文件的代码：

<?php

    $date1=date("F d,Y");

    $nameField=$_POST['name'];
    $companyField=$_POST['company'];
    $countryField=$_POST['country'];
    $stateField=$_POST['state'];
    $emailField=$_POST['email'];
    $phoneField=$_POST['phone'];
    $urlField=$_POST['url'];



    $messageField=nl2br($_POST['comments']);


    $body="
    <table width='450' border='1px' bordercolor='#B6B6B6' align='center'  cellspacing='0' cellpadding='0' style='border:1px solid #B6B6B6; border-collapse:collapse; background-color:#FFF; margin-top:16px; margin-bottom:10px;'>
         <tr>
         <td colspan='2' style='text-align:center; background-color:#67a23b; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#fff; font-weight:bold; padding:6px;''>Contact Form - SmartStart&nbsp;&nbsp;&nbsp;[&nbsp;$date1&nbsp;]</td>
         </tr>
         <tr>
             <td width='150' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#6D6D6D; font-weight:bold; background-color:#f7f7f7; padding:6px;'>Name:</td>
             <td width='300' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000; font-weight:normal; padding:6px;'>$nameField</td>
         </tr>
         <tr>
             <td width='150' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#6D6D6D; font-weight:bold; background-color:#f7f7f7; padding:6px;'></td>
             <td width='300' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000; font-weight:normal; padding:6px;'>$companyField</td>
         </tr>
         <tr>
             <td width='150' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#6D6D6D; font-weight:bold; background-color:#f7f7f7; padding:6px;'>Email:</td>
             <td width='300' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000; font-weight:normal; padding:6px;'>$emailField</td>
         </tr>
          <tr>
             <td width='150' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#6D6D6D; font-weight:bold; background-color:#f7f7f7; padding:6px;'></td>
             <td width='300' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000; font-weight:normal; padding:6px;'>$countryField</td>
         </tr>

         <tr>
             <td width='150' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#6D6D6D; font-weight:bold; background-color:#f7f7f7; padding:6px;'>Phone:</td>
             <td width='300' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000; font-weight:normal; padding:6px;'>$phoneField</td>
         </tr>
          <tr>
             <td width='150' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#6D6D6D; font-weight:bold; background-color:#f7f7f7; padding:6px;'></td>
             <td width='300' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000; font-weight:normal; padding:6px;'>$stateField</td>
         </tr>


          <tr>
             <td width='150' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#6D6D6D; font-weight:bold; background-color:#f7f7f7; padding:6px;'>Company:</td>
             <td width='300' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000; font-weight:normal; padding:6px;'>$messageField</td>
         </tr>


         <tr>
             <td width='150' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#6D6D6D; font-weight:bold; background-color:#f7f7f7; padding:6px;'></td>
             <td width='300' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000; font-weight:normal; padding:6px;'>$urlField</td>
         </tr>


         </table>";

   //$from=$firstNameField;
   $sub="Contact Form - From the Smart Page".$titleField;

   $name=$firstNameField."< ".$emailField." >";
   $to="info@mycompany.com";

    if (mail($to,$sub,$body,"From:".$name."\nContent-Type: text/html; charset=iso-8859-1"))
    {
    print "<meta http-equiv=\"refresh\" content=\"3;URL=/smart.php\">";
    }
    else{
    print "<meta http-equiv=\"refresh\" content=\"0;URL=error.php\">";
    }

?>




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>

body {
    background-color: #636362;
    text-align: center;

}

#wrapper {
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
}

#thank-you-page {
    width: 500px;
    margin-right: 250px;
    margin-left: 250px;
    margin-top: 250px;
    float: left;
    background-color: #FFF;
    border: 1px solid #CCC;
}

#thank-you-page h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 26px;
    font-weight: normal;
    color: #000;
    text-align: center;
}

#thank-you-page p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: normal;
    color: #000;
    text-align: center;
}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Thank-you for Contacting My Company</title>
</head>
<body>
<div id="wrapper">
<div id="thank-you-page">
<h1>Thank-you for contacting<br />
<strong>My Company</strong></h1>
<p>Your message has been sent successfully. We will contact you shortly.</p>
</div>
</div>
</body>
</html>

我相信这很简单，但我尝试的每件事都会让我犯错误。我如何简单地添加另一个文本框，询问随机的加减问题，并以验证电子邮件等的相同方式验证响应

提前感谢。

您是否尝试在用户单击提交后添加验证码？否-我只希望有一个简单、随机生成的2+2=验证码，以防止机器人发送垃圾邮件。我想它应该放在submit按钮之前？你有使用jQuery的经验吗？我喜欢这种类型的jQuery。我将用一个简单的验证码检查拼凑一把小提琴。另一个要考虑的是CAPTCHA应该验证服务器端。任何人都可以关闭javascript并通过您的验证。在php中，我还将添加数据验证。测试您的post变量以检查它们是否为空或恶意代码。

<!-- INDIVIDUAL CONTACT LINK -->
<div class="contact_links">
<form name="contact" method="post" action="/sendmail/send-mail-start.php" enctype="multipart/form-data" onsubmit="return checkForm(this);">


                            <label>Name: (required) </label><input class="input1" id="name" name="name" type="text" value="" />


                            <label>Email: (required) </label><input class="input1" id="email" name="email" type="text" value="" /><br />


                            <label>Phone: (required) </label><input class="input1" id="phone" name="phone" type="text" value="" />
                            <label>Company: (required)  </label><textarea class="input2" name="comments" id="comments" cols="" rows="1"></textarea><br />
                            <input type="image" src="images/individualProducts/submit.png" alt="" value="" class="submit" />


                            </form>  

<!-- INDIVIDUAL CONTACT LINK ENDS --></div>

// JavaScript Document

function checkForm(formName)

{

    //NAME VALIDATION

    if(formName.name.value== "")

    {

        alert ('Please Enter Your Full Name!');

        formName.name.focus();

        return false;

    }



//EMAIL VALIDATION

if(formName.email.value=="")

{

    alert ('Please Enter Your Email!');

    formName.email.focus();

    return false;

}

//EMAIL FORMAT VALIDATON

if (!formName.email.value.match(/^[\w\.-]+@(?:[A-Za-z0-9-]+\.)*[A-Za-z0-9-]{1,}\.[a-z]{2,9}$/))

{

    alert ('Please Enter a Valid Email!');

    formName.email.select();

    return false;

}









return true;



}









// JavaScript Document

function checkForm(comment)

{

    //NAME VALIDATION

    if(comment.name.value=="")

{

    alert ('Please Enter Your Full Name!');

    comment.name.focus();

    return false;

}



//EMAIL VALIDATION

if(comment.email.value=="")

{

    alert ('Please Enter Your Email!');

    comment.email.focus();

    return false;

}

//EMAIL FORMAT VALIDATON

if (!comment.email.value.match(/^[\w\.-]+@(?:[A-Za-z0-9-]+\.)*[A-Za-z0-9-]{1,}\.[a-z]{2,9}$/))

{

    alert ('Please Enter a Valid Email!');

    formName.email.select();

    return false;

}











return true;



}

<?php

    $date1=date("F d,Y");

    $nameField=$_POST['name'];
    $companyField=$_POST['company'];
    $countryField=$_POST['country'];
    $stateField=$_POST['state'];
    $emailField=$_POST['email'];
    $phoneField=$_POST['phone'];
    $urlField=$_POST['url'];



    $messageField=nl2br($_POST['comments']);


    $body="
    <table width='450' border='1px' bordercolor='#B6B6B6' align='center'  cellspacing='0' cellpadding='0' style='border:1px solid #B6B6B6; border-collapse:collapse; background-color:#FFF; margin-top:16px; margin-bottom:10px;'>
         <tr>
         <td colspan='2' style='text-align:center; background-color:#67a23b; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#fff; font-weight:bold; padding:6px;''>Contact Form - SmartStart&nbsp;&nbsp;&nbsp;[&nbsp;$date1&nbsp;]</td>
         </tr>
         <tr>
             <td width='150' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#6D6D6D; font-weight:bold; background-color:#f7f7f7; padding:6px;'>Name:</td>
             <td width='300' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000; font-weight:normal; padding:6px;'>$nameField</td>
         </tr>
         <tr>
             <td width='150' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#6D6D6D; font-weight:bold; background-color:#f7f7f7; padding:6px;'></td>
             <td width='300' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000; font-weight:normal; padding:6px;'>$companyField</td>
         </tr>
         <tr>
             <td width='150' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#6D6D6D; font-weight:bold; background-color:#f7f7f7; padding:6px;'>Email:</td>
             <td width='300' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000; font-weight:normal; padding:6px;'>$emailField</td>
         </tr>
          <tr>
             <td width='150' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#6D6D6D; font-weight:bold; background-color:#f7f7f7; padding:6px;'></td>
             <td width='300' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000; font-weight:normal; padding:6px;'>$countryField</td>
         </tr>

         <tr>
             <td width='150' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#6D6D6D; font-weight:bold; background-color:#f7f7f7; padding:6px;'>Phone:</td>
             <td width='300' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000; font-weight:normal; padding:6px;'>$phoneField</td>
         </tr>
          <tr>
             <td width='150' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#6D6D6D; font-weight:bold; background-color:#f7f7f7; padding:6px;'></td>
             <td width='300' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000; font-weight:normal; padding:6px;'>$stateField</td>
         </tr>


          <tr>
             <td width='150' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#6D6D6D; font-weight:bold; background-color:#f7f7f7; padding:6px;'>Company:</td>
             <td width='300' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000; font-weight:normal; padding:6px;'>$messageField</td>
         </tr>


         <tr>
             <td width='150' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#6D6D6D; font-weight:bold; background-color:#f7f7f7; padding:6px;'></td>
             <td width='300' align='left' valign='top' style='font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000; font-weight:normal; padding:6px;'>$urlField</td>
         </tr>


         </table>";

   //$from=$firstNameField;
   $sub="Contact Form - From the Smart Page".$titleField;

   $name=$firstNameField."< ".$emailField." >";
   $to="info@mycompany.com";

    if (mail($to,$sub,$body,"From:".$name."\nContent-Type: text/html; charset=iso-8859-1"))
    {
    print "<meta http-equiv=\"refresh\" content=\"3;URL=/smart.php\">";
    }
    else{
    print "<meta http-equiv=\"refresh\" content=\"0;URL=error.php\">";
    }

?>




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>

body {
    background-color: #636362;
    text-align: center;

}

#wrapper {
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
}

#thank-you-page {
    width: 500px;
    margin-right: 250px;
    margin-left: 250px;
    margin-top: 250px;
    float: left;
    background-color: #FFF;
    border: 1px solid #CCC;
}

#thank-you-page h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 26px;
    font-weight: normal;
    color: #000;
    text-align: center;
}

#thank-you-page p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: normal;
    color: #000;
    text-align: center;
}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Thank-you for Contacting My Company</title>
</head>
<body>
<div id="wrapper">
<div id="thank-you-page">
<h1>Thank-you for contacting<br />
<strong>My Company</strong></h1>
<p>Your message has been sent successfully. We will contact you shortly.</p>
</div>
</div>
</body>
</html>