javascript 构建一个简单的PHP，jQuery和AJAX Powered联系表，来自：http：//ajtroxell.com/build-a-simple-php-jquery-and-a

Posted 2021-05-03

<form id="contact" name="contact" method="post">  
  <fieldset>  
    <label for="name" id="name">Name<span class="required">*</span></label>
    <input type="text" name="name" id="name" size="30" value="" required/>

    <label for="email" id="email">Email<span class="required">*</span></label>
    <input type="text" name="email" id="email" size="30" value="" required/>

    <label for="phone" id="phone">Phone</label>
    <input type="text" name="phone" id="phone" size="30" value="" />

    <label for="Message" id="message">Message<span class="required">*</span></label>
    <textarea name="message" id="message" required></textarea>

    <label for="Captcha" id="captcha">Name the small house pet that says "<i>meow</i>"<span class="required">*</span></label>
    <input type="text" name="captcha" value="" required/>

    <input id="submit" type="submit" name="submit" value="Send" />  
  </fieldset>  
</form>

<div id="success">
  <span>
    <p>Your message was sent succssfully! I will be in touch as soon as I can.</p>
  </span>
</div>

<div id="error">
  <span>
    <p>Something went wrong, try refreshing and submitting the form again.</p>
  </span>
</div>

jQuery.validator.addMethod('answercheck', function (value, element) {
        return this.optional(element) || /^\bcat\b$/.test(value);
    }, "type the correct answer -_-");

<?php

    $to = "[e-mail]"; 
    $from = $_REQUEST['email']; 
    $name = $_REQUEST['name']; 
    $headers = "From: $from"; 
    $subject = "You have a message sent from your site"; 

    $fields = array(); 
    $fields{"name"} = "name"; 
    $fields{"email"} = "email"; 
    $fields{"phone"} = "phone"; 
    $fields{"message"} = "message";

    $body = "Here is what was sent:\n\n"; foreach($fields as $a => $b){   $body .= sprintf("%20s: %s\n",$b,$_REQUEST[$a]); }

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

?>

form {
    margin:0
}
form label {
    margin-bottom:.2em;
    font-size:1.3rem;
    line-height:1.3rem;
    font-size:13px;
    line-height:13px;
    color:#e6e6e1;
    text-shadow:0px -1px #202020
}
form label.error {
    margin-bottom:1em;
    font-size:1.2rem;
    line-height:1.2rem;
    font-size:12px;
    line-height:12px;
    color:#c0392b
}
form input[type="text"], form textarea {
    margin-bottom:1.25em;
    font-family:"Inconsolata", sans-serif;
    font-size:1.4rem;
    line-height:1.4rem;
    font-size:14px;
    line-height:14px;
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    background:#e6e6e6;
    border:1px solid #191919;
    -moz-border-radius:0.2em;
    -webkit-border-radius:0.2em;
    border-radius:0.2em
}
form input[type="text"]:focus, form textarea:focus {
    border-color:#191919;
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none
}
form input[type="text"][disabled], form textarea[disabled] {
    background:#fff
}
form input[type="text"].error, form textarea.error {
    background:#e6e6e6;
    border-color:#c0392b
}
fieldset {
    border:0px;
    margin:0;
    padding:0
}
.required {
    color:#e9266d
}
#success, #error {
    display:none
}
#success span, #erro span {
    display:block;
    position:absolute;
    top:0;
    width:100%
}
#success span p, #error span p {
    margin-top:6em
}
#success span p {
  color:#9bd32d;
}
#error span p {
  color:#c0392b;
}

jQuery.validator.addMethod('answercheck', function (value, element) {
        return this.optional(element) || /^\bcat\b$/.test(value);
    }, "type the correct answer -_-");

// validate contact form
$(function() {
    $('#contact').validate({
        rules: {
            name: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            message: {
                required: true
            },
            answer: {
                required: true,
                answercheck: true
            }
        },
        messages: {
            name: {
                required: "come on, you have a name don't you?",
                minlength: "your name must consist of at least 2 characters"
            },
            email: {
                required: "no email, no message"
            },
            message: {
                required: "um...yea, you have to write something to send this form.",
                minlength: "thats all? really?"
            },
            answer: {
                required: "sorry, wrong answer!"
            }
        },
        submitHandler: function(form) {
            $(form).ajaxSubmit({
                type:"POST",
                data: $(form).serialize(),
                url:"process.php",
                success: function() {
                    $('#contact :input').attr('disabled', 'disabled');
                    $('#contact').fadeTo( "slow", 0.15, function() {
                        $(this).find(':input').attr('disabled', 'disabled');
                        $(this).find('label').css('cursor','default');
                        $('#success').fadeIn();
                    });
                },
                error: function() {
                    $('#contact').fadeTo( "slow", 0.15, function() {
                        $('#error').fadeIn();
                    });
                }
            });
        }
    });
});