1

我正在创建一个注册表单，并对其进行了设置，一旦用户单击提交按钮，它将所有表单信息发送到 PHP 文件，然后验证所有内容。

我想要做的是，如果多个输入有错误，我如何从 PHP 文件发回消息并将其显示在适当的输入旁边？

这是我到目前为止所拥有的：

JavaScript：

$(document).ready(function() {
  $(document).on("submit", "form", function(event) {
    event.preventDefault();
    $.ajax({
      url: 'assets/php/verify.php',
      type: "POST",
      data: $(this).serialize(),
      success: function(data) {
        alert(data);
      }
    });
  });
});

PHP：

<?php 
  $username = $_POST["username"];
  $email = $_POST["email"];
  $password = $_POST["password"];
  $errors = array();

  $errors["username"] = "Username not available.";
  $errors["password"] = "Password invalid.";

  echo json_encode($errors);
?>

我将如何解码 $errors 数组，然后将值消息放在每个输入旁边（例如）：

<input name="username" type="text"><div class="message">Username not available.</div>
<input name="password" type="text"><div class="message">Password invalid.</div>
4

4 回答 4

2

你可以这样做：

// js
$.ajax({
    url: 'assets/php/verify.php',
    type: "POST",
    data: $(this).serialize(),
}).then(function(data) {
    if (data['errors']) {
         $.each(data['errors'], function(key, val) {
             $('#error-' + key).text(val);
         });
    }
});

// html
<span id="error-username"></span>

但是，这并没有考虑到 HTTP 错误代码，它应该与您的表单一起提供。例如，如果用户因为服务器不处理信息（即信息无效）而无法注册，您应该提供unprocessible entity带有 JSON 的 HTTP 422 状态代码。如果一切正常，您应该只提供 HTTP 200 代码。查看有关该主题的Wikipedia 文章。

要设置错误代码，请使用http_response_codephp.ini 中的函数。如果您确实更新了程序以提供此错误代码，那么您应该更新您的函数以反映它：

$.ajax({
    url: 'assets/php/verify.php',
    type: "POST",
    data: $(this).serialize(),
}).then(function(data) {
    console.log('Success!');
}).fail(function(jqXHR) {
         $.each(jqXHR.responseText['errors'], function(key, val) {
         $('#error-' + key).text(val);
     });
});
于 2013-10-19T21:16:12.293 回答
2

通过使用dataType: "json"您告诉 jQuery 您期望一个对象作为响应，jQuery 会将结果解析为您可以访问的对象data.property_key：

jQuery：

$.ajax({
    type: "POST",
    url: 'assets/php/verify.php',
    data: $(this).serialize(),
    success: function(data) {
        if(data.status=="success"){
            $("#message").html('Success, do something');
        }else{
            $("#message_user").html(data.username);
            $("#message_pass").html(data.password);
            $("#message_email").html(data.email);
        }

    },
    dataType: "json"
});

然后将您的 div 更改为跨度；p

<input name="username" type="text"><span id="message_user"></span>
<input name="password" type="text"><span id="message_pass"></span>
<input name="email" type="text"><span id="message_email"></span>

<span id="message"></span>

然后你的 PHP 部分，需要更多的验证来检查其他可能的错误。然后不要忘记 json 标头。

<?php 
if($_SERVER['REQUEST_METHOD'] == 'POST'){
    $errors = array();
    //username
    if(!empty($_POST["username"])){
        $username = $_POST["username"];
        //do locic to check username ect
        if(username already found in db){
            $errors["username"] = "Username not available.";
        }
    }else{
        $errors["username"] = "Username required.";
    }

    //email, should also check its a real email
    if(!empty($_POST["email"])){
        $email = $_POST["email"];
    }else{
        $errors["email"] = "Email required.";
    }

    //password
    if(!empty($_POST["password"])){
        $password = $_POST["password"];
    }else{
        $errors["password"] = "Password required.";
    }

    //do if $errors empty
    if(empty($errors)){
        //do somthing all was good
        $responce = array('status'=>'success');

    }else{
        //error
        $responce = $errors;
    }
    //send responce
    header('Content-Type:application/json;');
    echo json_encode($responce);

}
?>
于 2013-10-19T21:33:03.257 回答
1

照 Joshua Smock 所说的去做，别忘了给 ajax 添加属性；

$.ajax({
    url: 'assets/php/verify.php',
    type: "POST",
    dataType: "json", // look here
    data: $(this).serialize(),
}). // continue
于 2013-10-19T21:30:18.150 回答
-1

据我所知，php 无法立即将错误消息放回网页。您可能需要考虑为此使用 Ajax。

于 2013-10-19T21:10:41.490 回答