javascript - 异步 js 验证表单

Question

早上好! 目前我正在尝试使用 javascript 创建某种简单的验证，但我在使用异步功能时遇到了问题。

您可以在下方看到遍历 validityChecks 集合的 UI 方法

    checkValidity: function(input){
        for(let i = 0; i<this.validityChecks.length; i++){

            var isInvalid = this.validityChecks[i].isInvalid(input);//promise is returned
            if(isInvalid){
                this.addInvalidity(this.validityChecks[i].invalidityMessage);
            }

            var requirementElement = this.validityChecks[i].element;
            if(requirementElement){
                if(isInvalid){
                    requirementElement.classList.add('invalid');
                    requirementElement.classList.remove('valid');
                }else{
                    requirementElement.classList.remove('invalid');
                    requirementElement.classList.add('valid');
                }
            }
        }
    }

下面是特定的集合对象，它没有按预期工作

var usernameValidityChecks = [
    {
        isInvalid: function(input){
            var unwantedSigns = input.value.match(/[^a-zA-Z0-9]/g);
            return unwantedSigns ? true:false;
        },
        invalidityMessage:'Only letters and numbers are allowed',
        element: document.querySelector('.username-registration li:nth-child(2)')
    },
    {
        isInvalid: async function (input){
            return await checkUsername(input.value);
        },
        invalidityMessage: 'This value needs to be unique',
        element: document.querySelector('.username-registration li:nth-child(3)')
    }

]

function checkUsername (username) {
    return new Promise ((resolve, reject) =>{
        $.ajax({
            url: "check.php",
            type: "POST",
            data: { user_name: username },
            success: (data, statusText, jqXHR) => {
                resolve(data);
            },
            error: (jqXHR, textStatus, errorThrown) => {
                reject(errorThrown);
            }
        });
    });
}

问题是 checkValidity 方法中的 var isInvalid 返回了 promise。谁能建议如何返回那里的值(value)而不是 promise ？或者如何处理那里的 promise ？ 先感谢您!
编辑:
请原谅，但这是我第一次使用 Stack，可能我的问题有点不准确。集合中的一些对象也是同步，我更改了usernameValidityChecks。如何处理这种情况？
我在哪里同时有异步和同步方法？

Answer 1

而不是下行

var isInvalid = this.validityChecks[i].isInvalid(input);

您可以使用下面的代码使代码更简洁并将所需的值存储在变量上，但是上面建议的解决方案也是正确的

var isInvalid = await this.validityChecks[i].isInvalid(input).catch((err) => { console.log(err) });

在此行之后，您将在 isInvalid 变量上获得所需的值

并且还在所有其他 isInvalid 函数定义中添加 async 关键字