如何检查所有箭头函数是否为真？答案

【问题标题】：How to check if all arrow functions are true?如何检查所有箭头函数是否为真？
【发布时间】：2018-10-31 09:11:04
【问题描述】：

我正在创建一个表单验证器。如果所有四个验证器都为真，我只想转到下一页。我为验证器创建了四个箭头函数。

const nameIsValid = name => !name.match(nameRegX);
const mailIsValid = mail => mail.match(mailRegX);
const phoneIsValid = phone => phone.match(phoneRegX);
const postalIsValid = postal => postal.match(postRegX);

每个箭头函数都与输入中的事件监听器 onchange 相关联。看起来像这样。

inputs[0].onchange = function() {
    var validateName = nameIsValid(name.value);
    animator(validateName, 0, isNameTrue);  
}

然后所有四次输入[1]、[2]和[3]。

在函数中，您看到动画器的第三个参数是 isNameTrue。这些是我在函数之前声明的变量：

var isNameTrue = false;
var isMailTrue = false;
var isPhoneTrue = false;
var isPostalTrue = false;

如果箭头函数为真，我也想将这些值变为真，我通过这个函数来完成。

function animator(validity, i, isTrue){
    var error = document.querySelectorAll(".form-error");
    var correct = document.querySelectorAll(".form-display");

    if (validity){
        correct[i].classList.add("animate")
        error[i].classList.remove("animate")
        isTrue = true;


    } else {
        error[i].classList.add("animate")
        correct[i].classList.remove("animate")
        isTrue = false;
    }
}

那么当用户点击提交按钮时，我只想要四个都为真时的下一步操作。

inputs[4].onclick = function(){
    if (isNameTrue && isMailTrue && isPhoneTrue && isPostalTrue){
        console.log("We are all true");
    } else {
        console.log("We are not true!")
    }

}

但是，它们总是错误的。

如何正确检查是否所有四个都为真？

【问题讨论】：

标签： javascript forms validation

【解决方案1】：

boolean是按值传递的，因此引用不一样，这意味着即使你在animator函数中改变了值，传递的变量的值也不会改变。

您可以将您的代码更新为以下内容

inputs[0].onchange = function() {
    var validateName = nameIsValid(name.value);
    isNameTrue = validateName; // <---- Set your value here and do not pass to the function
    animator(validateName, 0);  
}

【讨论】：

@hyenax - 很高兴帮助你:)