javascript - 服务器端表单验证并返回消息

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'][] 正在构建一大组消息。为每条消息提供一个唯一的 key 可能更有用，这样您就可以使用 javascript 更好地解析它，例如 $data['message']['email'] = 等...最后一件事让我陷入了困境通过ajax进行表单验证的天数是OnSuccess并不意味着您验证成功。这只是意味着消息已成功发送回来。错误意味着您遇到了 http 错误，例如 404 或 500 错误。