javascript - 如何检查所有箭头函数是否为真？

Question

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

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!")
    }

}

但是，它们总是错误的。

我怎样才能正确地检查所有四个是否都为真？

Answer 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);  
}