将Captcha添加到表单

时间:2014-07-16 18:15:51

标签: javascript php html forms captcha

我正在尝试在我的电子邮件表单中实现一个简单的基于数学的验证码。 (我知道,数学不是万无一失的,但它可以满足我的需要。)

我已经通过教程尝试了很多不同的尝试,我似乎无法得到它,所以我想我会发布我的代码,看看会有什么回来。

目前的形式:

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)); }

?>

HTML页面中的下一个相关代码是Javascript:

<!--Form Validation Starts -->
<script type="text/javascript" src="js/productFormValidation.js"></script>
<!--Form Validation Ends -->

HTML页面中的下一个相关代码片段是表单本身:

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

以下是productFormValidation.js文件的内容:

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



} 

最后,&#34; ACTION&#34;的代码在表单部分中调用的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>

我确信它很简单,但我尝试的一切都会让我失误。我怎样才能简单地添加另一个会询问随机加法或减法问题的文本框 - 并以与验证电子邮件等相同的方式验证响应。?

提前致谢。

0 个答案:

没有答案