使用AJAX、Jquery和PHP进行表单验证

如何使用AJAX和Jquery发布用HTML编写的表单，以便使用PHP进行验证

下面是我得到的一个例子，我愿意内联显示错误和cookie值，以便在不刷新的情况下进行编辑，我能用Jquery/AJAX完成吗

我看过一些例子，我认为我应该创建另一个php页面并在那里发布数据，但是如何正确地使用多个表单字段呢

<?php
//check form submission
if(isset($_POST['send'])){

  //validation for Name
  if(strlen($_POST['fullname']) > 4){ 
    //set cookie if passed
    setcookie('fullname', $_POST['fullname']);
  }else {
    $error[] = 'Your name is required!';
  }
  //validation for ID
  if ((isset($_POST['id']) && is_numeric($_POST['id']))) {
    setcookie('id', $_POST['id']);
  }else {
     $error[] = 'ID number is required!';
  }    

//check for errors
  if(isset($error)){
    foreach($error as $error){
     echo '<p style="background: red;">'.$error.'</p>';
    }
  }
?>

<form method="post">
  <input name="fullname" type="text" value="<?php if(isset($_COOKIE["fullname"])){ 
  echo $_COOKIE["fullname"];} ?>" placeholder="full Name">
  <input name="id" type="text" value="<?php if(isset($_COOKIE["id"])){ 
  echo $_COOKIE["id"];} ?>" placeholder="ID">
  <input name="send" type="submit" value="send">
</form>

您是否考虑过使用jQuery
.validate（）
插件？

前端和后端验证有点不同。在前端，您需要确保您获得了正确的数据类型、必填字段等，并且表单已经准备好提交。在服务器端，您希望确保您拥有干净的数据，并且数据将正确写入数据库，但通常不必处理错误消息，除非发生灾难性事件，数据库不可用或其他情况。
您可以使用以下html、javascript和php代码：

在这里您可以看到完整的信息：


HTML:


请联系我们
名字*
电子邮件*
电话
&mdash；
关于
一般问题
广告
伙伴关系机会
信息*

jQuery Ajax

<!-- include Google hosted jQuery Library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Start jQuery code -->
<script type="text/javascript">
$(document).ready(function() {
    $("#submit_btn").click(function() { 

        var proceed = true;
        //simple validation at client's end
        //loop through each field and we simply change border color to red for invalid fields       
        $("#contact_form input[required=true], #contact_form textarea[required=true]").each(function(){
            $(this).css('border-color',''); 
            if(!$.trim($(this).val())){ //if this field is empty 
                $(this).css('border-color','red'); //change border color to red   
                proceed = false; //set do not proceed flag
            }
            //check invalid email
            var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
            if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))){
                $(this).css('border-color','red'); //change border color to red   
                proceed = false; //set do not proceed flag              
            }   
        });

        if(proceed) //everything looks good! proceed...
        {
            //get input field values data to be sent to server
            post_data = {
                'user_name'     : $('input[name=name]').val(), 
                'user_email'    : $('input[name=email]').val(), 
                'country_code'  : $('input[name=phone1]').val(), 
                'phone_number'  : $('input[name=phone2]').val(), 
                'subject'       : $('select[name=subject]').val(), 
                'msg'           : $('textarea[name=message]').val()
            };

            //Ajax post data to server
            $.post('contact_me.php', post_data, function(response){  
                if(response.type == 'error'){ //load json data from server and output message     
                    output = '<div class="error">'+response.text+'</div>';
                }else{
                    output = '<div class="success">'+response.text+'</div>';
                    //reset values in all input fields
                    $("#contact_form  input[required=true], #contact_form textarea[required=true]").val(''); 
                    $("#contact_form #contact_body").slideUp(); //hide form after success
                }
                $("#contact_form #contact_results").hide().html(output).slideDown();
            }, 'json');
        }
    });

    //reset previously set border colors and hide all message on .keyup()
    $("#contact_form  input[required=true], #contact_form textarea[required=true]").keyup(function() { 
        $(this).css('border-color',''); 
        $("#contact_results").slideUp();
    });
});
</script>


$（文档）.ready（函数（）{
$（“#提交”_btn”）。单击（函数（）{
var=true；
//客户端的简单验证
//循环遍历每个字段，我们只需将无效字段的边框颜色更改为红色
$（“#联系人#表单输入[required=true]，#联系人#表单文本区域[required=true]）。每个（函数（）{
$（this.css（'border-color'，''）；
if（！$.trim（$（this.val（））{//如果此字段为空
$（this.css（'border-color'，'red'）；//将边框颜色更改为红色
继续=false；//设置不继续标志
}
//检查无效电子邮件
var email\u reg=/^（[\w-\.]+@（[\w-]+\.）+[\w-]{2,4}）？$/；
if（$（this.attr（“type”）==“email”&&！email注册测试（$.trim（$（this.val（）））{
$（this.css（'border-color'，'red'）；//将边框颜色更改为红色
继续=false；//设置不继续标志
}   
});
如果（继续）//一切看起来都很好！继续。。。
{
//获取要发送到服务器的输入字段值数据
post_数据={
'user_name'：$（'input[name=name]'）。val（），
'user_email'：$（'input[name=email]'）。val（），
'国家/地区代码'：$（'input[name=phone1]'）。val（），
'phone_number'：$（'input[name=phone2]'）。val（），
'subject'：$（'select[name=subject]'）。val（），
'msg'：$（'textarea[name=message]'）。val（）
};
//Ajax将数据发布到服务器
$.post（'contact_me.php'，post_数据，函数（响应）{
if（response.type=='error'）{//从服务器加载json数据并输出消息
输出=''+响应。文本+''；
}否则{
输出=''+响应。文本+''；
//重置所有输入字段中的值
$（“#联系人#表单输入[required=true]，#联系人#表单文本区域[required=true]”）.val（“”）；
$（“#contact_form#contact_body”）.slideUp（）；//成功后隐藏表单
}
$（“#联系形式#联系结果”）.hide（）.html（输出）.slideDown（）；
}“json”）；
}
});
//重置以前设置的边框颜色并隐藏.keyup（）上的所有消息
$（“#contact#u form input[required=true]，#contact#u form textarea[required=true]”）.keyup（function（）{
$（this.css（'border-color'，''）；
$（“#联系结果”）.slideUp（）；
});
});

PHP

“错误”，
'text'=>'抱歉请求必须是Ajax POST'
));
模具（产量）//输出json数据的退出脚本
} 
//使用PHP filter_var（）清理输入数据。
$user\u name=filter\u var（$\u POST[“user\u name”]，filter\u SANITIZE\u STRING）；
$user\u email=filter\u var（$\u POST[“user\u email”]，filter\u SANITIZE\u email）；
$country\u code=filter\u var（$\u POST[“country\u code”]，filter\u SANITIZE\u NUMBER\u INT）；
$phone\u number=filter\u var（$\u POST[“phone\u number”]，filter\u SANITIZE\u number\u INT）；
$subject=filter\u var（$\u POST[“subject”]，filter\u SANITIZE\u字符串）；
$message=filter\u var（$\u POST[“msg”]，filter\u SANITIZE\u字符串）；
//附加php验证
如果（strlen（$user_name）“error”，“text”=>“name太短或为空！”）；
模具（产量）；
}
如果（！filter\u var（$user\u email，filter\u VALIDATE\u email））{//email validation
$output=json_encode（数组（'type'=>'error'，'text'=>'请输入有效的电子邮件！'））；
模具（产量）；
}
如果（！filter\u var（$country\u code，filter\u VALIDATE\u INT））{//检查country code字段中的有效数字
$output=json_encode（数组（'type'=>'error'，'text'=>'仅在国家代码中输入数字'）；
模具（产量）；
}
如果（！filter\u var（$phone\u number，filter\u SANITIZE\u number\u FLOAT））{//检查电话号码字段中的有效号码
$output=json_encode（数组（'type'=>'error'，'text'=>'只在电话号码中输入数字'）；
模具（产量）；
}
如果（strlen（$subject）'error'，'text'=>'需要主题'）；
模具（产量）；
}
如果（strlen（$message）'error'，text'=>'太短，请输入一些内容'）；
模具（产量）；
}
//电子邮件正文
$message\u body=$message.\r\n\r\n-“$user\u name.”\r\n邮件：“..$user\u email.”\r\n电话号码：（“$country\u代码
<!-- include Google hosted jQuery Library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Start jQuery code -->
<script type="text/javascript">
$(document).ready(function() {
    $("#submit_btn").click(function() { 

        var proceed = true;
        //simple validation at client's end
        //loop through each field and we simply change border color to red for invalid fields       
        $("#contact_form input[required=true], #contact_form textarea[required=true]").each(function(){
            $(this).css('border-color',''); 
            if(!$.trim($(this).val())){ //if this field is empty 
                $(this).css('border-color','red'); //change border color to red   
                proceed = false; //set do not proceed flag
            }
            //check invalid email
            var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
            if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))){
                $(this).css('border-color','red'); //change border color to red   
                proceed = false; //set do not proceed flag              
            }   
        });

        if(proceed) //everything looks good! proceed...
        {
            //get input field values data to be sent to server
            post_data = {
                'user_name'     : $('input[name=name]').val(), 
                'user_email'    : $('input[name=email]').val(), 
                'country_code'  : $('input[name=phone1]').val(), 
                'phone_number'  : $('input[name=phone2]').val(), 
                'subject'       : $('select[name=subject]').val(), 
                'msg'           : $('textarea[name=message]').val()
            };

            //Ajax post data to server
            $.post('contact_me.php', post_data, function(response){  
                if(response.type == 'error'){ //load json data from server and output message     
                    output = '<div class="error">'+response.text+'</div>';
                }else{
                    output = '<div class="success">'+response.text+'</div>';
                    //reset values in all input fields
                    $("#contact_form  input[required=true], #contact_form textarea[required=true]").val(''); 
                    $("#contact_form #contact_body").slideUp(); //hide form after success
                }
                $("#contact_form #contact_results").hide().html(output).slideDown();
            }, 'json');
        }
    });

    //reset previously set border colors and hide all message on .keyup()
    $("#contact_form  input[required=true], #contact_form textarea[required=true]").keyup(function() { 
        $(this).css('border-color',''); 
        $("#contact_results").slideUp();
    });
});
</script>

<?php
if($_POST)
{
    $to_email       = "myemail@gmail.com"; //Recipient email, Replace with own email here
    $from_email     = 'noreply@your_domain.com'; //from mail, it is mandatory with some hosts and without it mail might endup in spam.

    //check if its an ajax request, exit if not
    if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {

        $output = json_encode(array( //create JSON data
            'type'=>'error', 
            'text' => 'Sorry Request must be Ajax POST'
        ));
        die($output); //exit script outputting json data
    } 

    //Sanitize input data using PHP filter_var().
    $user_name      = filter_var($_POST["user_name"], FILTER_SANITIZE_STRING);
    $user_email     = filter_var($_POST["user_email"], FILTER_SANITIZE_EMAIL);
    $country_code   = filter_var($_POST["country_code"], FILTER_SANITIZE_NUMBER_INT);
    $phone_number   = filter_var($_POST["phone_number"], FILTER_SANITIZE_NUMBER_INT);
    $subject        = filter_var($_POST["subject"], FILTER_SANITIZE_STRING);
    $message        = filter_var($_POST["msg"], FILTER_SANITIZE_STRING);

    //additional php validation
    if(strlen($user_name)<4){ // If length is less than 4 it will output JSON error.
        $output = json_encode(array('type'=>'error', 'text' => 'Name is too short or empty!'));
        die($output);
    }
    if(!filter_var($user_email, FILTER_VALIDATE_EMAIL)){ //email validation
        $output = json_encode(array('type'=>'error', 'text' => 'Please enter a valid email!'));
        die($output);
    }
    if(!filter_var($country_code, FILTER_VALIDATE_INT)){ //check for valid numbers in country code field
        $output = json_encode(array('type'=>'error', 'text' => 'Enter only digits in country code'));
        die($output);
    }
    if(!filter_var($phone_number, FILTER_SANITIZE_NUMBER_FLOAT)){ //check for valid numbers in phone number field
        $output = json_encode(array('type'=>'error', 'text' => 'Enter only digits in phone number'));
        die($output);
    }
    if(strlen($subject)<3){ //check emtpy subject
        $output = json_encode(array('type'=>'error', 'text' => 'Subject is required'));
        die($output);
    }
    if(strlen($message)<3){ //check emtpy message
        $output = json_encode(array('type'=>'error', 'text' => 'Too short message! Please enter something.'));
        die($output);
    }

    //email body
    $message_body = $message."\r\n\r\n-".$user_name."\r\nEmail : ".$user_email."\r\nPhone Number : (".$country_code.") ". $phone_number ;

    //proceed with PHP email.
    $headers = 'From: '. $from_email .'' . "\r\n" .
    'Reply-To: '.$user_email.'' . "\r\n" .
    'X-Mailer: PHP/' . phpversion();

    $send_mail = mail($to_email, $subject, $message_body, $headers);

    if(!$send_mail)
    {
        //If mail couldn't be sent output error. Check your PHP email configuration (if it ever happens)
        $output = json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.'));
        die($output);
    }else{
        $output = json_encode(array('type'=>'message', 'text' => 'Hi '.$user_name .' Thank you for your email'));
        die($output);
    }
}
?>