如何将控制台错误显示为验证错误？

Question

我有一个表单，在提交时会进行一些验证检查，然后运行函数来请求令牌。如果提交不成功，则错误消息为 POST 403（禁止）。我想使用此错误消息（或任何其他推荐的方式）在 php 网页上显示错误消息。我该怎么做？

使用用户名和密码输入获取令牌并保存在会话中

    function getToken(username, password) {


        $.ajax({
            url: RESTROOT + '/jwt-auth/v1/token',
    method: 'POST',
    data: {
        'username': username,
        'password': password

    }
        })

        .done(function(response){
            sessionStorage.setItem('newToken', response.token); //sets the key and value in the console application > session storage
                    $LOGIN.fadeToggle();
            $LOGOUT.toggle();
             $POST.fadeToggle();

        })
    }

测试登录表单输入

    <?php $usernameErr = $passwordErr = "";
    $error = false;

    if (empty($_POST["firstname"])) {
        $usernameErr = "Name is required";
        $error = true;
      } else {
        $username = test_input($_POST["username"]);
        // check if field contains only letters and spaces
        if (!preg_match("/^[a-zA-Z ]*$/",$firstname)) {
      $usernameErr = "Only letters and white space allowed";
    }
      }

    if (empty($_POST["password"])) {
        $passwordErr = "Password is required";
        $error = true;
      } else {
        $password = test_input($_POST["password"]);
        // check if field contains only letters and spaces
        if (!preg_match("/^[a-zA-Z ]*$/",$firstname)) {
      $passwordErr = "Only letters and white space allowed";
    }
      }

    if($error == false){
      $_SESSION['username'] = $username;
    }

    function test_input($data) {
      $data = trim($data);
      $data = stripslashes($data);
      $data = htmlspecialchars($data);
      return $data;
    }

    ?>

登录表格

    <form name="loginform" id="loginform" style="display: none" >
    <h2>Login form</h2>
    <p><strong>You must log in with valid credentials before you are able to submit a post.</p></strong>

    <label for"uer_login">Username:<span class="error">* <?php echo $usernameErr;?></span> <!-- shows errors on the page -->
    <input type="text" id="user_login" name="username" class="input" value="<?php echo $username;?>" placeholder="username"></label>

    <label for"user_pass">Password:<span class="error">* <?php echo $passwordErr;?></span> <!-- shows errors on the page -->
      <input type="password" id="user_pass" name="pass" class="input" value="" placeholder="Title"></label>

      <button id="login_button" type="submit" class="success button"> Login</button>
      </form>

Answer 1

您需要通过添加来捕获请求中的错误：

.catch((error)=>{
    console.log({error});
})

到.done(...)之后的承诺

因此getToken 函数的主体将是：

$.ajax({
    url: RESTROOT + '/jwt-auth/v1/token',
    method: 'POST',
    data: {
        'username': username,
        'password': password

    }
})
    //i usually use then(...) instead of done(...)
    .then((response) => {
        sessionStorage.setItem('newToken', response.token); //sets the key and value in the console application > session storage
        $LOGIN.fadeToggle();
        $LOGOUT.toggle();
        $POST.fadeToggle();

    })
    .catch((error) => {
        console.log({ error });
    })

现在您可以阅读 catch 中的错误，您可以在 HTML 中添加 div 并将错误详细信息附加到其中

.catch ((error) => {
    console.log({ error });
    //be sure to read error object properties and pick one of them to append it
    //usually error from server should have an inner message                    
    document.getElementById('ServerErrorDiv').innerHtml(error.message)
})

Answer 2

.then(function(response){
        sessionStorage.setItem('newToken', response.token); //sets the key and value in the console application > session storage
                $LOGIN.fadeToggle();
        $LOGOUT.toggle();
         $POST.fadeToggle();

    })
    .catch((error)=>{
                            console.log({error});

                     //  alert(error.responseJSON.message)
                     $('#ServerErrorDiv').append(error.responseJSON.message)
                        })