Question

我用js验证创建了一个Login表单。但是当我单击提交按钮时，它没有任何验证错误。我找不到错误是什么。这是我的代码html表单和js文件。

我希望输出为输入电子邮件和密码，但未显示任何验证。

这是我的HTML表单。

$("#loginForm").on("submit", function() {
  var email = $("login_email");
  var pass = $("login_pass");
  var status = false;


  if (email.val() == "") {
    email.addClass("border-danger");
    $("#e_error").html("<span class='text-danger'>Enter valid email..</span>");
    status = false;
  } else {
    email.removeClass("border-danger");
    $("#e_error").html("");
    status = true;
  }
  if (pass.val() == "") {
    pass.addClass("border-danger");
    $("#p_error").html("<span class='text-danger'>Enter password..</span>");
    status = false;
  } else {
    pass.removeClass("border-danger");
    $("#p_error").html("");
    status = true;
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="loginForm" onsubmit="return false" autocomplete="off">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" name="login_email" id="login_email" placeholder="Enter email">
    <small id="e_error" class="form-text text-muted">ddd</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" name="login_pass" id="login_pass" placeholder="Password">
    <small id="p_error" class="form-text text-muted"></small>
  </div>
  <button type="submit" class="btn btn-primary">Login</button>
  <span><a href="register.php">Register</a></span>
</form>

所以，你可以请帮我解决这个问题。谢谢！

Answer 1

您错过了选择器上的#：

    var email = $("login_email");
    var pass = $("login_pass");

应该是：

    var email = $("#login_email");
    var pass = $("#login_pass");

Answer 2

每当通过元素ID访问元素时，选择器都应带有＃前缀。这是您的更正代码，请检查。

    $("#loginForm").on("submit", function() {
      var email = $("#login_email");
      var pass = $("#login_pass");
      var status = false;


      if (email.val() == "") {
        email.addClass("border-danger");
        $("#e_error").html("<span class='text-danger'>Enter valid email..</span>");
        status = false;
      } else {
        email.removeClass("border-danger");
        $("#e_error").html("");
        status = true;
      }
      if (pass.val() == "") {
        pass.addClass("border-danger");
        $("#p_error").html("<span class='text-danger'>Enter password..</span>");
        status = false;
      } else {
        pass.removeClass("border-danger");
        $("#p_error").html("");
        status = true;
      }
    })

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <form id="loginForm" onsubmit="return false" autocomplete="off">
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" name="login_email" id="login_email" placeholder="Enter email">
        <small id="e_error" class="form-text text-muted">ddd</small>
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" name="login_pass" id="login_pass" placeholder="Password">
        <small id="p_error" class="form-text text-muted"></small>
      </div>
      <button type="submit" class="btn btn-primary">Login</button>
      <span><a href="register.php">Register</a></span>
    </form>

Answer 3

jQuery选择器使您可以选择和操作HTML元素。

jQuery选择器用于根据其名称，id，属性等“查找”（或选择）HTML元素。

这里您使用ID来调用元素因此，如上述答案所述，您需要使用

您错过了选择器上的＃号：

var email = $("login_email");
var pass = $("login_pass");

选择元素。

对于其他选择器，如果将来要使用，可以访问 https://www.w3schools.com/jquery/jquery_ref_selectors.asp

Answer 4

有很多错误，

首先，无需使用：onsubmit =“ return false”形式，由事件处理程序返回，喜欢

$("#loginForm").on("submit", function() {
    var status=true;

    return status;
});

秒：使用

var email = $("#login_email");
var pass = $("#login_pass");

对于检查空白验证，请检查：

if($.trim(email.val()) != ""){

}

最后，您使用的是“为什么不正确”

第一个条件为假，则状态为false，表示不应提交表单，但根据您的条件，如果下一个条件为true，则将提交，因为密码不为null，则状态将再次检查为true，然后表单将提交，事件电子邮件为空，因此请在输入字段（如数据状态或通过.error调用或其他方式）上使用状态

使用jQuery验证的最佳方法 https://jqueryvalidation.org/

仅将错误条件的状态更改为不正确，

$("#loginForm").on("submit", function() {
    var status=true;

    if($.trim(email.val()) != ""){

    }else{
        status=false;
    }
    return status;
});

表单验证未识别空白输入

4 个答案: