服务器端表单验证和返回消息

Question

我是 Web 应用程序的新手，不知道如何在客户端（网页）上显示来自服务器的反馈。

我正在尝试实施服务器端验证，即将信息发送到服务器并使用 PHP 进行验证。

如果验证失败，则将响应发送回客户端，刷新包含 Web 表单的页面并显示反馈。（我已经实现了客户端验证，现在想在服务器端实现）。

我的困难是

(1)如何将信息从服务器发送回客户端？

(2)刷新表单并显示反馈。

这里有信息link，但没有提供合适的解决方案。

因为我是 Web 应用程序的初学者，所以只要有线索或直接的解决方案就更令人高兴了。

谢谢

Answer 1

如果要将数据发送到要验证的外部脚本，请使用 Ajax 发送请求。处理数据然后回显您的响应/状态，这将在 Ajax 请求中返回。从那里您可以使用 JavaScript 来处理响应并更新页面。

formpage.html

<form id="form">
    <input name="email" type="email"/>
    <input name="persons_name" type="text"/>
    <input name="password" type="password"/>
    <input type="submit" value="submit"/>
</form>

//JQuery
<script type="text/javascript">
jQuery("#form").on("submit", function(e){

    //This stops the form from submitting how it regularly would
    e.preventDefault();

    jQuery.ajax({
        url: "http://yoursite/path/to/phpfile.php",
        type: "POST",
        data: jQuery('#form').serialize(), /*grab all elements in your form and serialize them */
        onSuccess:  function(data){

           // I put this here so you can see data sent back in you console
           console.log(data);

           if(data.error == false){
              //validation was successfull
           }else if(data.error == true){
              //validation failed handle errors
           }
        },
        onError: function(){
           // the AJAX request failed as in timed out / bad url etc.
        } 
    });
});
</script>

phpfile.php

<?php
$data = array();
$data['error'] = false;

//if persons name is not set or does not have a value    
if(!isset($_POST['persons_name']) || empty($_POST['persons_name'])){ 

    $data['error'] = true;
    $data['message'][] = 'You have to have a name!';
}

//if password is set
if(isset($_POST['password']) && !empty($_POST['password'])){

   //validate password logic goes here

   if(!valid){  /*if its not valid*/
       $data['error'] = true;
       $data['message'][] = 'You password sucks!';
   }
}else{ /* password was not set */
    $data['error'] = true;
    $data['message'][] = 'What the heck you didn\'t add a password';
}

//if email is set
if(isset($_POST['email']) && !empty($_POST['email'])){

      //validate email logic goes here

    if(!valid){
        $data['error'] = true;
        $data['message'][] = 'Thats NOT an email address',
    }
}else{
    $data['error'] = true;
    $data['message'][] = 'Email address is required'
}

//optional
if(!$data['error']){
     // If there are no errors you can do something with your values here such as save them to a database etc.
}


// then echo the $data array you have built as JSON to use in jquery. 
//This will be what is returned in your AJAX request
echo json_encode($data);
?>

有更多合乎逻辑的方法来构建您的验证，我在这里使用 jQuery 因为...我喜欢 jQuery 但这至少向您展示了如何访问这些值。 valid 和 !valid 显然不是真正的运算符，需要替换为但是你想检查每个参数的验证。此外，还有更多内容需要进行验证，例如清理，但这会让您开始使用这两个文件。 $data 只是一个可以包含任何内容的数组。 $data['error'] 键和值是 ajax 调用中的 onSuccess 函数用来确定验证是否成功以及 $data['message'][ ] 正在构建一大堆消息。给每条消息一个唯一的键可能更有用，这样你就可以用 javascript 更好地解析它，例如 $data['message']['email'] = 等等...最后一件事让我度过了通过 ajax 进行表单验证的美好时光是 OnSuccess 并不意味着您验证成功。它只是意味着消息已成功发回。 On Error 表示您遇到了 HTTP 错误，例如 404 或 500 错误。

服务器端表单验证和返回消息

Server side form validtion and returning message

html

javascript

php

web-applications