如何在成功登录后删除错误消息

Question

我有一个登录页面，我可以通过api获取用户名和密码。成功登录后，还会显示一条错误消息，显示如何删除。这是我的fiddle。帮助我成功后如何删除错误消息。如果密码错误，则应显示错误消息。

HTML

<form id="login">
                  <p class="text-danger d-none">Please enter a correct login and password.</p>
                  <div class="form-group pb-10">
                      <div class="input-group">
                         <div class="input-group-addon p-2">
                            <i class="fa fa-user icon"></i>
                         </div>
                        <input type="text" class="form-control" id="name" name="name" placeholder="Username" required>
                     </div>
                  </div>
                   <div class="form-group">
                      <div class="input-group">
                         <div class="input-group-addon p-2">
                            <i class="fa fa-lock icon"></i>
                         </div>
                       <input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
                     </div>
                  </div>

                  <div>

                  <button type="submit" class="btn float-right login-btn">Login</button>
                </div>
               </form>

脚本：

 $(document).ready(function(){
    localStorage.removeItem('role');
    $(".login-error").hide();
    $("#login").on("submit", function (e) {
     e.preventDefault();
    var form_data = $('#login').serialize();
    var username=$("#name").val();
    var pwd=$("#password").val();
       $.ajax({
          url: "https://api.myjson.com/bins/nl8a0",
          type: "GET",
          dataType: "json",
          success: function (data) {
                console.log(typeof(data));
             var arr = data;
                arr.forEach(function(obj) {
                   console.log('name: ' + obj.name);
                   console.log('password: ' + obj.role);
                   var pass=obj.password; 
                   // var decryptedBytes = CryptoJS.AES.decrypt(obj.password, "password");
                   var bytes  = CryptoJS.AES.decrypt(pass.toString(), 'password');
                   var plaintext = bytes.toString(CryptoJS.enc.Utf8);
                   var role=obj.role;
                      if(role=="User"){
                         if(username==obj.name && pwd==plaintext){
                         alert("New role");
                         }
                         else{
                            $("#login p").removeClass("d-none");
                         }
                      }
                      else{
                   if(username==obj.name && pwd==plaintext){
                   alert("Login succes");
                   }
                   else{
                      $("#login p").removeClass("d-none");
                   }
                }
                })
          },
             error: function(data) {
             console.log(data);
       }
       });

 });
});

Answer 1

您在登录成功后错过了添加删除的类d-none。

 $("#login p").addClass("d-none");

Answer 2

您可以按ID分配消息容器，并使用该id根据结果分配消息。 请尝试以下代码：

工作小提琴： https://jsfiddle.net/ao2sd6e0/

更新： 正如你所看到的，我在id "message"标签<p>中添加了一个<p class="text-danger d-none" id="message"></p>，使其成为消息的容器。使用该id，我们可以在登录成功或不成功时插入消息。

HTML

<div class="container mt-5">

  <div class="d-flex justify-content-center mt-150 height-3 ">
    <div class="p-2 text-white w25 shadow-left rounded-left bg-white">
      <div class="d-flex justify-content-center">
        <img class="img-height img-fluid mt-100" src="../img/logo.png" alt="">
      </div>
      <!-- <h1 class="text-center mt-90">SeedStalk</h1> -->
    </div>
    <div class="border-left nbrd w30 text-center p60 shadow-right rounded-right bg-white">
      <form id="login">
        <p class="text-danger" id="message"></p>
        <div class="form-group pb-10">
          <div class="input-group">
            <div class="input-group-addon p-2">
              <i class="fa fa-user icon"></i>
            </div>
            <input type="text" class="form-control" id="name" name="name" placeholder="Username" required>
          </div>
        </div>
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-addon p-2">
              <i class="fa fa-lock icon"></i>
            </div>
            <input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
          </div>
        </div>

        <div>

          <button type="submit" class="btn float-right login-btn">Login</button>
        </div>
      </form>
    </div>
  </div>


  <h6>
    Username : admin<br>
    Password : admin
  </h6>

</div>   

在Javascript中，我们可以使用<p>方法和getElementById() HTML属性将消息设置为在.innerHTML标签中显示。

document.getElementById（'message'）。innerHTML =“成功”

document.getElementById('message').innerHTML = "Please enter a correct login and password"

脚本

$(document).ready(function(){
        localStorage.removeItem('role');
        $(".login-error").hide();
        $("#login").on("submit", function (e) {
         e.preventDefault();
        var form_data = $('#login').serialize();
        var username=$("#name").val();
        var pwd=$("#password").val();
           $.ajax({
              url: "https://api.myjson.com/bins/qt7fk",
              type: "GET",
              dataType: "json",

              success: function (data) {
                    console.log(typeof(data));
                 // alert(JSON.stringify(data));
                 var arr = data;
                    arr.forEach(function(obj) {
                       console.log('name: ' + obj.name);
                       console.log('password: ' + obj.role);
                       var pass=obj.password;
                       var bytes  = CryptoJS.AES.decrypt(pass.toString(), 'password');
                       var plaintext = bytes.toString(CryptoJS.enc.Utf8);
                       // alert(plaintext);
                       var role=obj.role;
                          if(role=="User"){
                             if(username==obj.name && pwd==plaintext){
                             alert("New role"); document.getElementById('message').innerHTML = ""

                             }
                             else{
                                document.getElementById('message').innerHTML = "" 
                             }
                          }
                          else{
                       if(username==obj.name && pwd==plaintext){
                       alert("Login succes");
                       document.getElementById('message').innerHTML = " " 
                       }
                       else{
                          document.getElementById('message').innerHTML = "Please enter a correct login and password"
                       }
                    }
                    })
              },
                 error: function(data) {
                 console.log(data);
           }
           });

     });
    });