使用jquery表单插件进行验证

Question

这是我第一次尝试使用jQuery和php制作表单。我以Mid Mo Design的设计师为例，但即使使用该教程，仍然无法实现我想要的效果。这是我一直在使用的代码。以及jQuery 1.4.1和jQuery Form Plugin 2.43。任何帮助将不胜感激。

CSS

#scrollContact { 
border-top: double 1px #0D0D0D; 
padding: 100px 50px 50px 50px; 
background: #020303; 
position: relative; 
overflow: hidden; 
width: 924px; 
text-align: justify; 
} 
.contactInfo { 
float:left; 
width: 214px; 
margin-right: 10px; 
margin-top: 5px; 
} 

#contactForm { 
float: left; 
width: 700px; 
} 

#contactForm span { 
float: left; 
margin:5px; 
width: 455px; 
} 

input, textarea { 
-moz-border-radius:5px 5px 5px 5px; 
border:1px solid #001932; 
color:#BBBBBB; 
font:1.1em Verdana,Geneva,sans-serif; 
background: #0A0A0A; 
} 

input:hover, textarea:hover { 
border:1px solid #0278f2; 
background: #242424; 
} 
#contactForm span input { 
line-height:1.8em; 
width:430px; 
padding:11px 10px; 
margin: 0px 0px 10px 0px; 
} 

#contactForm input { 
line-height:1.8em; 
width:200px; 
padding:11px 10px; 
margin: 5px; 
} 

#contactForm textarea { 
height:190px; 
line-height:1.8em; 
width:430px; 
padding:10px; 
} 


.message { 
background:#eee; 
color:#000; 
display:none; 
padding:10px; 
height: 70px; 
position: absolute; 
bottom:0px; 
} 

的Html

<div id="scrollContact" name="scrollContact"> 
    <div class="title"> 
    <h2 class="titleContact">Contact</h2> 
    <ul class="pagenav"> 
    <li class="pagenavTitle">Navigate To:</li> 
    <li class="pagenavWork"><a title="work" href="#scrollWork">Work</a></li> 
    <li class="pagenavServices"><a title="services" href="#scrollServices">services</a></li> 
    <li class="pagenavAbout"><a title="about" href="#scrollAbout">about</a></li> 
    <li class="pagenavContact"><a title="contact" href="#scrollContact">contact</a></li> 
    </ul> 
    </div> 
    <div class="contactInfo"> 
    <strong>Get A Free Quote</strong><br /> 
    Thank you for your interest in contacting me. Please use the form to the right to contact me via email. I will respond to your inquiry as soon as possible. Please note all fields are required. <br /> 
    <strong>What Next?</strong> <br /> 
    Thank you for your interest in contacting me. Please use the form to the right to contact me via email. I will respond to your inquiry as soon as possible. Please note all fields are required. 
    </div> 


    <form action="bin/sendmail.php" method="post" id="contactForm"> 
    <span> 
    <input type="text" name="contactTitle" value="" id="contactTitle" title="Subject" /> 
    <textarea rows="5" name="contactMessage">Your Message</textarea> 
    </span> 
    <input type="text" name="contactName" value="" id="contactName" title="Your Name"/> 
    <input type="text" name="contactEmail" value="" id="contactEmail" title="Your Email" /> 
    <input class="contactButton" type="submit" name="submit" title="Submit Form" /> 
    </form> 


    <div class="message"><div id="alert"></div></div> 
    </div> 

腓

 <?php 
$sendto = 'my@email.com'; 
$subject = 'Contact from contact form'; 
$errormessage = 'Oops! There seems to have been a problem. May we suggest...'; 
$thanks = "Thanks for the email! We'll get back to you as soon as possible!"; 
$honeypot = "You filled in the honeypot! If you're human, try again!"; 
$emptyname = 'Entering your name?'; 
$emptyemail = 'Entering your email address?'; 
$emptytitle = 'Entering The Subject?'; 
$emptymessage = 'Entering a message?'; 
$alertname = 'Entering your name using only the standard alphabet?'; 
$alertemail = 'Entering your email in this format: <i>name@example.com</i>?'; 
$alerttitle = 'Entering the subject using only the standard alphabet?'; 
$alertmessage = "Making sure you aren't using any parenthesis or other escaping characters in the message? Most URLS are fine though!"; 
$alert = ''; 
$pass = 0; 


function clean_var($variable) { 
    $variable = strip_tags(stripslashes(trim(rtrim($variable)))); 
    return $variable; 
} 


if (empty($_REQUEST['last'])) { 


    if (empty($_REQUEST['contactName'])) { 
    $pass = 1; 
    $alert .= "<li>" . $emptyname . "</li>"; 
    } elseif (ereg("[][{}()*+?.\\^$|]", $_REQUEST['contactName'])) { 
    $pass = 1; 
    $alert .= "<li>" . $alertname . "</li>"; 
    } 
    if (empty($_REQUEST['contactEmail'])) { 
    $pass = 1; 
    $alert .= "<li>" . $emptyemail . "</li>"; 
    } elseif (!eregi("^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,3})$", $_REQUEST['contactEmail'])) { 
    $pass = 1; 
    $alert .= "<li>" . $alertemail . "</li>"; 
    } 
    if (empty($_REQUEST['contactTitle'])) { 
    $pass = 1; 
    $alert .= "<li>" . $emptytitle . "</li>"; 
    } elseif (ereg("[][{}()*+?.\\^$|]", $_REQUEST['contactTitle'])) { 
    $pass = 1; 
    $alert .= "<li>" . $alerttitle . "</li>"; 
    } 
    if (empty($_REQUEST['contactMessage'])) { 
    $pass = 1; 
    $alert .= "<li>" . $emptymessage . "</li>"; 
    } elseif (ereg("[][{}()*+?\\^$|]", $_REQUEST['contactMessage'])) { 
    $pass = 1; 
    $alert .= "<li>" . $alertmessage . "</li>"; 
    } 


    if ($pass==1) { 


    echo "<script>$(\".message\").hide(\"slow\").show(\"slow\"); </script>"; 
    echo "<b>" . $errormessage . "</b>"; 
    echo "<ul>"; 
    echo $alert; 
    echo "</ul>"; 


    } elseif (isset($_REQUEST['message'])) { 


     $message = "From: " . clean_var($_REQUEST['contactName']) . "\n"; 
    $message .= "Email: " . clean_var($_REQUEST['contactEmail']) . "\n"; 
     $message .= "Telephone: " . clean_var($_REQUEST['contactTitle']) . "\n"; 
     $message .= "Message: \n" . clean_var($_REQUEST['contactMessage']); 
     $header = 'From:'. clean_var($_REQUEST['contactEmail']); 


    mail($sendto, $subject, $message, $header); 

    echo "<script>$(\".message\").hide(\"slow\").show(\"slow\").animate({opacity: 1.0}, 4000).hide(\"slow\"); $(':input').clearForm() </script>"; 
    echo $thanks; 

    die(); 


    } 


} else { 
    echo "<script>$(\".message\").hide(\"slow\").show(\"slow\"); </script>"; 
    echo $honeypot; 
} 
?> 

Answer 1

这里是你一个very very very good article。它会帮助你很多。