javascript - 使用 CSS 加载图标始终可见

Question

加载图标始终显示。我需要它来检查第一个 JavaScript 代码，如果是，则显示加载图标。我的代码有什么问题？在“onsubmit”部分，我只是将 2 个 JavaScript 放在彼此后面做错了吗？

    function checkForm(form)
    {
     if(form.username.value == "") {
       alert("Error: gelieve je naam in te vullen!");
       form.username.focus();
      return false;
    }
    re = /^\w+$/;
    if(!re.test(form.username.value)) {
      alert("Error: je naam mag alleen letters,nummers, en underscores   bevatten!");
      form.username.focus();
      return false;
    }

    if(form.pwd1.value != "" && form.pwd1.value == form.pwd2.value) {
      if(form.pwd1.value.length < 8) {
        alert("Error: je wachtwoord moet minstens 8 tekens hebben!");
        form.pwd1.focus();
        return false;
      }
      if(form.pwd1.value == form.username.value) {
        alert("Error: je wachtwoord mag niet hetzelfde zijn als je naam!");
        form.pwd1.focus();
        return false;
      }
      re = /[0-9]/;
      if(!re.test(form.pwd1.value)) {
        alert("Error: je wachtwoord moet minstens 1 cijfer bevatten (0-9)!");
        form.pwd1.focus();
        return false;
      }
      re = /[a-z]/;
      if(!re.test(form.pwd1.value)) {
        alert("Error: je wachtwoord moet minstens 1 kleine letter bevatten (a-z)!");
        form.pwd1.focus();
        return false;
      }
      re = /[A-Z]/;
      if(!re.test(form.pwd1.value)) {
        alert("Error: je wachtwoord moet minstens 1 grote letter bevatten (A-Z)!");
        form.pwd1.focus();
        return false;
      }
    } else {
      alert("Error: je ingevulde wachtwoorden zijn niet hetzelfde!");
      form.pwd1.focus();
      return false;
    }

    ;
    return true;
    }
    function showHide() {
    var div = document.getElementById("hidden_div");
    if (div.style.display == 'none') {
    div.style.display = '';
    }
    else {
    div.style.display = 'none';
    return false;
    }
    }

    <form name="form" method="POST" action="\JocanasNL.php" onsubmit="return checkForm(this); showHide(); return true;">    
     Voornaam.Achternaam:*<br><input type="text" name="username" size="19" required><br>
    <p>Dit zal ook jouw inlognaam worden!</p><br>
    Geslacht:<br><input type="radio" name="sex" value="Man">Man<br>
    <input type="radio" name="sex" value="Vrouw">Vrouw<br><br>
    Emailadres:*<br><input type="email" name="email" size="19" required><br><br>
    Wachtwoord:*<br><input rows="9" type="password" name="pwd1" size="19" required><br><br>
    Wachtwoord bevestigen:*<br><input rows="9" type="password" name="pwd2" size="19" required><br><br>
    Ideeën voor nieuwe films, TV-series games of functies:<br><textarea class="input" name="comment" rows="5" cols="30"></textarea><br><br>
    <input type="submit" value="Aanvragen" name="submit">
    <input type="reset" value="Herstellen">
    </form>
    <div class="spinner">
    <div class="bounce1"></div>
    <div class="bounce2"></div>
    <div class="bounce3"></div>
    </div>

Answer 1

这段代码

return checkForm(this); showHide(); return true;

不正确。由于您 return checkForm(this)，showHide 将永远不会被执行。由于 showHide 如果它被隐藏则显示它，如果它被显示则隐藏它并且你总是看到它，我想你的 hidden_​​div 以某种方式被显示，尽管内联 CSS 明确指定它不会通过 checkForm 或其他方式显示。您需要通过开发工具检查生成的 HTML 以确认或否认此声明。

上面的代码应该改成

if (checkForm(this)) {showHide(); return true;} return false;

因此，如果 checkForm 为 true，则调用 showHide 并返回 true，这意味着 >表单 将被张贴。否则返回 false，阻止发布 form。