php - 如何在 jQuery 和 PHP 中验证表单-6ren

php - 如何在 jQuery 和 PHP 中验证表单

转载作者：行者123 更新时间：2023-12-01 04:21:29

我有一个注册表单，我想使用 jQuery 进行验证，如果所有详细信息都正确，则将其传递给 PHP 进行登录。

我正在尝试使用 Yendesigns 表单 - http://yensdesign.com/2009/01/how-validate-forms-both-sides-using-php-jquery/

我的表单代码是:

<?php

require_once("includes/initialise.php");

if (isset($_POST['resetpassword']) && $_POST['resetpassword'] == 'resetnow') {
    $required = array('first_name','last_name','username','email','password','password2');
    $missing = array();
    $validation = array(
        'first_name'    => 'Please provide your first name',
        'last_name'     => 'Please provide your last name',
        'username'      => 'Please provide your username',
        'email'         => 'Please provide your valid email address',
        'password'      => 'Please provide your password',
        'password2'     => 'Please confirm your password',
        'userdup'       => 'Username already registered',
        'emaildup'      => 'Email address already registered',
        'mismatch'      => 'Passwords do not match'
    );

//Sanitise and clean function
$first_name = escape($_POST['first_name']);
$last_name = escape($_POST['last_name']);
$username = escape($_POST['username']);
$email = escape($_POST['email']);
$password = escape($_POST['password']);
$password2 = escape($_POST['password2']);

    foreach($_POST as $key => $value) {
        $value = trim($value);
        if(empty($value) && in_array($key,$required)) {
            array_push($missing,$key);
        } else {
            ${$key} = escape($value);
        }
    }

    if($_POST['email'] !="" && getDuplicate(1,'email','clients','email',$email)) {
        array_push($missing,'emaildup');
    }

    if($_POST['username'] !="" && getDuplicate(1,'username','clients','username',$username)) {
        array_push($missing,'userdup');
    }

    // Check User Passwords
    if( strcmp($_POST['password'], $_POST['password2']) != 0 ) {
        array_push($missing,'mismatch');
    }

    //validate email address
    if(!empty($_POST['email']) && !isEmail($_POST['email'])) {
        array_push($missing,'email');       
    }

    if(!empty($missing)) {
        $before = " <span class=\"errorred\">";
        $after = "</span>";
        foreach($missing as $item)
            ${"valid_".$item} = $before.$validation[$item].$after;
    } else {    
// stores MD5 of password
$passmd5 = md5($_POST['password']);

// stores clients IP addresss   
$user_ip = $_SERVER['REMOTE_ADDR'];
// Automatically collects the hostname or domain  like example.com) 
$host  = $_SERVER['HTTP_HOST'];
$host_upper = strtoupper($host);
$path   = rtrim(dirname($_SERVER['PHP_SELF']), '/\\');

$date = date('Y-m-d');
$time = date('H:i:s');

// Generates activation code simple 4 digit number
$hash = mt_rand().date('YmdHis').mt_rand();

//Insert Data
$sql = "INSERT INTO clients(first_name, last_name, username, email, password, date, time, `hash`)
        VALUES ('{$first_name}','{$last_name}','{$username}','{$email}','$passmd5','$date', '$time','$hash')";

$result = mysql_query($sql, $conndb) or die(mysql_error());

if($result)  {

        $to = $_POST['email'];
        $subject = 'Activate your account';
        $from = 'dummy@emailaddress.co.uk';

        $headers = "MIME-Version: 1.0\r\n";
        $headers .= "Content-type:text/html;charset=UTF-8\r\n";
        $headers .= "From: My Website Name <".$from.">\r\n";
        $headers .= "Reply-to: My Website Name <".$from.">\r\n";

        $message = '<div style="font-family:Arial, Verdana, Sans-serif; color:#333; font-size:12px">
        <p>Thank you for registering on our website</p>
        <p>Please click on the following link to activate your account: 

        <a href="http://'.$host.''.$path.'/activate.php?id='.$hash.'">http://'.$host.''.$path.'/activate.php?id='.$hash.'</a></p>

        <p>Here are your login details...</p>
        <p>User Name: '.$username.'</p>
        <p>Email: '.$email.' </p>
        <p>Passwd: '.$password.' </p>

        </p></div>';

        if (mail($to, $subject, $message, $headers)) {

            $confirmation = '<p>Thank you.<br />You have successfully registered.</p>';

        } else {

            $confirmation = '<p>Error.<br />Your activation link could not be sent.<br />Please contact administrator.</p>';
            }
        }
    }
}

require_once("includes/header.php");
?>

        <div class="block">
            <div class="block_head">
                    <div class="bheadl"></div>
                    <div class="bheadr"></div>

                    <h5>Register</h5>

                    <ul>
                        <li><a href="login.php">Login</a></li>
                    </ul>

        </div>      <!-- .block_head ends -->

        <div class="block_content">

      <?php echo isset($confirmation) ? $confirmation : NULL; ?>

    <form name="register" id="customForm" action="" method="post">

        <div>
            <label for="first_name">First Name: * <?php echo isset($valid_first_name) ? $valid_first_name : NULL; ?></label>
            <input id="first_name" name="first_name" type="text" class="fld" value="" />
            <span id="first_nameInfo"></span>
        </div>
        <div>
            <label for="last_name">Last Name: * <?php echo isset($valid_last_name) ? $valid_last_name : NULL; ?></label>
            <input id="last_name" name="last_name" type="text" class="fld" value="" />
            <span id="last_nameInfo"></span>
        </div>
        <div>
            <label for="username">Username: * <?php echo isset($valid_username) ? $valid_username : NULL; ?> <?php if(isset($valid_userdup)) { echo $valid_userdup; } ?></label>
            <input id="username" name="username" type="text" class="fld" value="" />
            <span id="usernameInfo"></span><span id="status"></span>
        </div>
        <div>
            <label for="email">E-mail: * <?php if(isset($valid_email)) { echo $valid_email; } ?> <?php if(isset($valid_emaildup)) { echo $valid_emaildup; } ?></label>
            <input id="email" name="email" type="text" class="fld" value="" />
            <span id="emailInfo"></span>
        </div>
        <div>
            <label for="pass1">Password: * <?php if(isset($valid_password)) { echo $valid_password; } ?></label>
            <input id="pass1" name="pass1" type="password" class="fld" value="" />
            <span id="pass1Info"></span>
        </div>
        <div>
            <label for="pass2">Confirm Password: * <?php if(isset($valid_password2)) { echo $valid_password2; } ?> <?php if(isset($valid_mismatch)) { echo $valid_mismatch; } ?></label>
            <input id="pass2" name="pass2" type="password" class="fld" value="" />
            <span id="pass2Info"></span>
        </div>
        <div>
            <input id="send" name="send" type="submit" value="Send" />
        </div>

        </table>
        <input type="hidden" name="resetpassword" value="resetnow" />
    </form>
</div>  

                <!-- .block_content ends -->

                <div class="bendl"></div>
                <div class="bendr"></div>


                    </div>

<?php
require_once("includes/footer.php");
?>

jquery 是:

/***************************/
//@Author: Adrian "yEnS" Mato Gondelle & Ivan Guardado Castro
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!                  
/***************************/

$(document).ready(function(){
    //global vars
    var form = $("#customForm");
    var first_name = $("#first_name");
    var first_nameInfo = $("#first_nameInfo");
    var last_name = $("#last_name");
    var last_nameInfo = $("#last_nameInfo");
    var email = $("#email");
    var emailInfo = $("#emailInfo");
    var pass1 = $("#pass1");
    var pass1Info = $("#pass1Info");
    var pass2 = $("#pass2");
    var pass2Info = $("#pass2Info");
    var message = $("#message");

    //On blur
    first_name.blur(validateName);
    last_name.blur(validateLastName);
    email.blur(validateEmail);
    pass1.blur(validatePass1);
    pass2.blur(validatePass2);
    //On key press
    first_name.keyup(validateName);
    last_name.keyup(validateLastName);
    pass1.keyup(validatePass1);
    pass2.keyup(validatePass2);
    message.keyup(validateMessage);
    //On Submitting
    form.submit(function(){
        if(validateName() & validateLastName() & validateEmail() & validatePass1() & validatePass2() & validateMessage())
            return true
        else
            return false;
    });

    //validation functions
    function validateEmail(){
        //testing regular expression
        var a = $("#email").val();
        var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
        //if it's valid email
        if(filter.test(a)){
            email.removeClass("error");
            emailInfo.text("");
            emailInfo.removeClass("error");
            return true;
        }
        //if it's NOT valid
        else{
            email.addClass("error");
            emailInfo.text("Please provide a valid email address");
            emailInfo.addClass("error");
            return false;
        }
    }
    function validateName(){
        //if it's NOT valid
        if(first_name.val().length < 4){
            first_name.addClass("error");
            first_nameInfo.text("Please provide your first name (more than 3 letters)");
            first_nameInfo.addClass("error");
            return false;
        }
        //if it's valid
        else{
            first_name.removeClass("error");
            first_nameInfo.text("");
            first_nameInfo.removeClass("error");
            return true;
        }
    }

    function validateLastName(){
        //if it's NOT valid
        if(last_name.val().length < 4){
            last_name.addClass("error");
            last_nameInfo.text("Please provide your first name (more than 3 letters)");
            last_nameInfo.addClass("error");
            return false;
        }
        //if it's valid
        else{
            last_name.removeClass("error");
            last_nameInfo.text("");
            last_nameInfo.removeClass("error");
            return true;
        }
    }
    function validatePass1(){
        var a = $("#password1");
        var b = $("#password2");

        //it's NOT valid
        if(pass1.val().length <5){
            pass1.addClass("error");
            pass1Info.text("Please provide your password (at least 5 characters)");
            pass1Info.addClass("error");
            return false;
        }
        //it's valid
        else{           
            pass1.removeClass("error");
            pass1Info.text("");
            pass1Info.removeClass("error");
            validatePass2();
            return true;
        }
    }
    function validatePass2(){
        var a = $("#password1");
        var b = $("#password2");
        //are NOT valid
        if( pass1.val() != pass2.val() ){
            pass2.addClass("error");
            pass2Info.text("Passwords doesn't match!");
            pass2Info.addClass("error");
            return false;
        }
        //are valid
        else{
            pass2.removeClass("error");
            pass2Info.text("");
            pass2Info.removeClass("error");
            return true;
        }
    }
    function validateMessage(){
        //it's NOT valid
        if(message.val().length < 10){
            message.addClass("error");
            return false;
        }
        //it's valid
        else{           
            message.removeClass("error");
            return true;
        }
    }
});