Question

在我的项目中，我有一个简单的注册表-带“注册”按钮。单击该按钮，我要检查凭据的正确性，并且仅在所有凭据都可以的情况下才提交表单。您可以在下面看到我的代码架构：

我的注册表：

<div class="signupContainer">

      <form method="post" action="dbRegistration.php">

          <h1>Sign Up</h1>
          <p>Please fill in the form below to create an account.</p>
          <hr>
          <label for="email"><b>Email</b></label>
          <input type="text" id="reg_mail" placeholder="Please enter a valid E-mail address" name="email" required>
          <label for="psw"><b>Password</b></label>
          <input type="password" id="reg_pass" placeholder="Please enter a valid password" name="psw" required>
          <label for="psw-repeat"><b>Repeat Password</b></label>
          <input type="password" id="reg_pass_rw" placeholder="Please repeat the password" name="psw-repeat" required>
          <hr>
          <button type="submit" class="registerbtn">Register</button>

      </form>

    </div>

我的JS代码：

<script type="text/javascript">

   $(document).ready(function(){

    $('.registerbtn').prop('type','button');

    $(".registerbtn").click(function(){

      switch(checkCredentials())
      {
        case "notValidEmail":
          alert("Please type a valid E-mail address!");
          break;

        case "notValidPassword":
          alert("Please type a valid password! (at least one lower-case alphabetic character, and at least one other character that is either alphabetical uppercase or numeric)");
          break;

        case "notMatchedPasswords":
          alert("Passwords do not match!");
          break;

        case true:
          $('.registerbtn').prop('type', 'submit');
          $('.registerbtn').trigger('click');
          break;
      }
    });
   });

 </script>

function checkCredentials()
{
  var check = $('#reg_mail').val();

  if(!check.includes('@'))
    return "notValidEmail";

  check = $('#reg_pass').val();

  if(check.search(/[a-z]/) < 0)
    return "notValidPassword";
  else if(check.search(/[0-9A-Z]/) < 0)
    return "notValidPassword";

  var check_2 = $('#reg_pass_rw').val();

  if(check === check_2)
    return true;
  else
    return "notMatchedPasswords";
}

加载文档时，首先将按钮类型从“提交”更改为“按钮”。然后，在每次单击注册按钮时，如果表单中没有错误，“ checkCredentials（）”函数将返回true，当返回true时，函数会将button属性更改回“ submit”，并触发click事件。程序在输入错误的情况下可以正常工作，但是在所有输入都正常时什么也不会发生。我想念的是什么？谢谢您的关注！

Answer 1

请将TRUE的大小写更改为true。还可以考虑使用submit而不是更改按钮类型并触发click事件，因为这将导致递归调用。如果您要检查点击条件，我假设checkCredentials返回了true

$(document).ready(function() {

  $('.registerbtn').prop('type', 'button');

  $(".registerbtn").click(function() {

    switch (checkCredentials()) {
      case "notValidEmail":
        alert("Please type a valid E-mail address!");
        break;

      case "notValidPassword":
        alert("Please type a valid password! (at least one lower-case alphabetic character, and at least one other character that is either alphabetical uppercase or numeric)");
        break;

      case "notMatchedPasswords":
        alert("Passwords do not match!");
        break;

      case true:
        //$('.registerbtn').prop('type', 'submit');
        $("form").submit();
        console.log("click!");
        break;
    }
  });
});

function checkCredentials() {
  return true;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="signupContainer">

  <form method="post" action="dbRegistration.php">

    <h1>Sign Up</h1>
    <p>Please fill in the form below to create an account.</p>
    <hr>
    <label for="email"><b>Email</b></label>
    <input type="text" id="reg_mail" placeholder="Please enter a valid E-mail address" name="email" required>
    <label for="psw"><b>Password</b></label>
    <input type="password" id="reg_pass" placeholder="Please enter a valid password" name="psw" required>
    <label for="psw-repeat"><b>Repeat Password</b></label>
    <input type="password" id="reg_pass_rw" placeholder="Please repeat the password" name="psw-repeat" required>
    <hr>
    <button type="submit" class="registerbtn">Register</button>

  </form>

</div>

Answer 2

我建议您更改代码以使用Submit（而不是按钮），然后使用preventDefault（）管理提交请求：

  //If you can manage the form
  $("#myform").submit(function(event){
    if(checkCredentials()) { 
       event.preventDefault();  
    }  
  });

  //If you want manage the button
  $("#yourbutton").on('click', function(event){
    if (checkCredentials()) {
        event.preventDefault();
    }
  });

为什么我不能在同一按钮的单击事件内触发单击事件？

2 个答案: