Question

基本上，我正在尝试以同一页面上显示“不正确的用户名或密码”的方式登录表单，如果正确则继续。我试过调查与此相关的其他线程，但我无法理解他们的代码通常意味着什么。这是我的代码。

        <div id="login">   
      <h1>Welcome Back!</h1>

      <form method="POST" action="http://localhost:3000/api/login" id="loginform">

        <div class="field-wrap">
        <label>
          Username<span class="req">*</span>
        </label>
        <input type="userID" id="userID" name= "userID" required autocomplete="off"/>
      </div>

      <div class="field-wrap">
        <label>
          Password<span class="req">*</span>
        </label>
        <input type="Password" id="Password" name="Password" required autocomplete="off"/>
      </div>

      <button class="button button-block"><input type="submit" id="submit" value="Log In"</button>

      </form>

至于我的jquery代码，

$(document).ready(function(){
    // Set form variable
    var form = $('#loginform');           

    form.submit(function(event){              
      var userid = $('#userID').val(); 
      var password = $('#Password').val(); 

      if ( $.trim(userid) != '' && $.trim(password) != '') {
        // Process AJAX request
        $.post('http://localhost:3000/api/login',
               {username: userid, Password: password }, function(data){
                console.log(data);

        });
      }              
      // Prevent default form action
      event.preventDefault();
    });
});

如果输入的数据错误并且保留在同一页面上，我希望能够输出“不正确的用户名或密码”，如果正确但是由于action="http://localhost:3000/api/login"将会重定向到另一页，即使它是但是我还需要这个action="..."来调用我的api来执行id和密码的检查。如果您认为它可能对我的问题有帮助，那么任何帮助都会受到赞赏并且会链接该主题。谢谢！

我查看了一些但不明白的链接：

Submit form and stay on same page?

jQuery : submit and remain in same page how to stay on the same page after clicking submit button

Answer 1

如果验证失败，您只需从提交功能返回 false 即可。请在这里查看小提琴。Click here for fiddle。请查看我为调用提交点击操作而编写的HTML。

function submitMe() {
  console.log("Called submit");
  return false;
}

Answer 2

只需在调用JS函数的提交输入中添加onclick即可验证值。如果其中一个值无效，则该函数只需返回false并取消该过程。

另外，你有一个拼写错误：

<button class="button button-block"><input type="submit" id="submit" value="Log In"</button>

应该是

<button class="button button-block"><input type="submit" id="submit" value="Log In" /></button>

如果输入无效，如何保持同一页面，如果输入正确则如何继续？

2 个答案: