Question

如果验证检查返回false，您似乎可以阻止表单发送。

我有：

<form name="registration" action="registration.php" onsubmit="return validate()">
    <!-- some inputs like: -->
<input type="text" id="username" name="username">
<input type="text" id="firstname" name="firstname">
<input type="text" id="lastname" name="lastname">
    <!-- and some others... -->
</form>

我的javascript中的validate（）函数由多个不同的检查组成。

function validate() {
    checkUsername();
    checkPassword(); 
    checkFirstname(); 
    checkLastname();
    checkBirthdate();
    checkEmail();
    checkPhone();
}

可能存在用户输入除一个以外的所有数据的有效数据的情况。如果是这种情况，我如何告诉validate（）仍然发送＆＃39; false＆＃39;回到表单，以便它不提交？

编辑：如果有人仍在阅读此内容，由于某种原因，我的表单仍在发送。我甚至改变了我的validate（）函数，所以唯一的声明是＆＃34;返回false;＆＃34;我有语法错误或其他什么吗？

Edit2：我发现另一个简单的解决方案，即使有点陈旧。它克服了我在函数只评估第一次检查并返回的问题。

function validate() {
    var truth1 = checkUsername();
    var truth2 = checkPassword(); 
    var truth3 = checkFirstname(); 
    var truth4 = checkLastname();
    var truth5 = checkBirthdate();
    var truth6 = checkEmail();
    var truth7 = checkPhone();
    return (truth1 && truth3 && truth5 && truth2 && truth4 && truth6 && truth7);
}

Answer 1

您的所有individual field validation functions都应该返回boolean。

然后您的overall form validation function将

function validate() {
    var checks = [
        checkUsername,
        checkPassword,
        checkFirstname,
        checkLastname,
        checkBirthdate,
        checkEmail,
        checkPhone,
    ].map(function(check) { return check(); });

    return (checks.indexOf(false) === -1);
}

现在如果任何字段无效，则验证函数将返回false。如果所有字段都有效，则true

Answer 2

您可以使用Array.prototype.every()来调用每个函数，如果任何函数返回false，false将从.every()调用返回

<form name="registration" action="registration.php">
    <!-- some inputs like: -->
<input type="text" id="username" name="username">
<input type="text" id="firstname" name="firstname">
<input type="text" id="lastname" name="lastname">
    <!-- and some others... -->
</form>

function validate() {
    return [checkUsername, 
      checkPassword, 
      checkFirstname, 
      checkLastname, 
      checkBirthdate, 
      checkEmail,
      checkPhone].every(function(check) {return check()});
}

document.querySelector("[name=registration]")
.onsubmit = function(event) { 
  event.preventDefault();
  if (validate()) { this.submit() }
  else { // notify user which fields are invalid }
}

Answer 3

＆＃34;验证＆＃34;函数需要返回＆＃34; true＆＃34;仅当所有单个检查函数返回＆＃34; true＆＃34;结果

这样做的一种方法是修改当前的每一行＆＃34;验证＆＃34;功能类似于以下代码。

ICharacteristic

新的＆＃34;验证＆＃34;功能可以返回＆＃34; true＆＃34;是否所有单独的输入验证检查都成功。

Javascript - 如何防止表单发送多个验证检查？

3 个答案: