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;

然后，如果箭头功能为true，那么我也想将这些值也设为true，这是我通过此功能执行的操作。

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

如何检查所有箭头功能是否正确？

1 个答案: