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

Question

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

使用用户名和密码输入获取 token 并保存在 session 中

    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(...)之后的 promise

因此 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)
})