如何使用异步 JS 验证器验证 HTML 表单

Question

我的问题提到了一个 HTML 表单，但它的症结在于任意数量的异步 JS 函数如何为单个值做出贡献——在 HTML 表单的情况下，它是否有效。

作为一个古老的同步后端恐龙，完全没有使用 JS promises/async-await 的经验，我似乎无法解决如何完成这个问题。

考虑这个验证 class：

class Validation {
    construct() {
        this.validators = [];
    }

    register(validator) {
        this.validators.push(validator);
    }

    validate(form) {
        let valid = true; // Benefit of the doubt
        this.validators.forEach(function(validator) {
            valid = validator(form) ? valid : false;
        });
        return valid;
    }
}

假设我想注册 3 个验证器：

const validation = new Validation();

validation.register(form => {
    // Return true if all required form fields have values, false otherwise
});

validation.register(form => {
    // Return true if the user has made any changes to the form, false otherwise
});

validation.register(form => {
    // Do an AJAX request and return true/false depending on the response
});

然后检查表单是否有效，相应地禁用或启用其提交按钮：

submitButton.setAttribute('disabled', !validation.validate(form));

前两个验证器函数一切正常，因为它们没有表现出任何异步行为。 但是第三个验证器 function 执行 AJAX 调用，这就是一切崩溃的地方。

我认为问题的答案在于重写整个 validate() 方法以某种方式以异步方式调用验证器函数。 确保只有在所有验证器都返回 true（在他们的甜蜜时光）时才启用提交按钮，这才是真正让我吃惊的原因。

有人会这么好心地将我天真的方法神奇地转变为异步友好的东西吗？

Answer 1

只需循环等待验证器，一旦发现错误，您可能会提前退出。 您的 function 必须变为async 。

每个验证器都可以返回一个Promise<boolean>或仅返回一个boolean

async validate(form) {
    for (const validator of this.validators)
        if (!(await validator(form)) {
           return false;
        }
    }
    return true;
}

// Somewhere else
const isValid = await validation.validate(form);
submitButton.setAttribute('disabled', !isValid);

请注意，您不能使用Array#forEach执行此操作，因为如果它返回 promise，它将不会等待每次迭代。 您也不能从Array#forEach提前返回