Javascript 用于删除具有相反效果的属性和类的控制语句

我正在创建一个注册页面，我希望在所有输入通过验证之前禁用该按钮。我已经完成了所有本机验证逻辑（缺少值、模式不匹配等），但是我想实现一个“用户名已获取/可用”的验证，在用户名对所有输入都有有效输入并提供了一个尚未使用的所需用户名之前，按钮仍然不会被启用
我有服务器调用，所有这些都完成了，我唯一的问题是实际启用/禁用按钮，并将边界类分配给输入。以下是我对AJAX调用的响应代码：

ajax.onload = function() {
    if (this.responseText === "taken") {
        if (username.classList.contains("taken")) {
            return;
        } else {
            username.classList.remove("successBorder");
            username.classList.add("errorBorder");
            username.classList.add("taken");
        }
    } else {
        if (!username.checkValidity()) {
            username.classList.remove("successBorder");
            username.classList.add("errorBorder");
            return;
        } else {
            username.classList.remove("errorBorder");
            username.classList.add("successBorder");
            username.classList.remove("taken");
        }
    }
}

下面是在每个输入元素的输入事件中调用的按钮的启用/禁用代码：

function validate() {

    if (document.querySelector("form").checkValidity() && !(username.classList.contains("taken"))) {
        registerButton.removeAttribute("disabled");
        const ruleSpans = document.querySelectorAll("span[data-rule]");
        for (span of ruleSpans) {
            span.classList.add("hide");
        }
        for (input of inputs) {
            input.classList.remove("errorBorder");
            input.classList.add("successBorder");
        }
        return;
    }

    registerButton.setAttribute("disabled", "true");

    if (this.checkValidity()) {
    // Get rid of the error messages
        this.classList.remove("errorBorder");
        this.classList.add("successBorder");
        const ruleSpans = document.getElementsByClassName(this.id);
        for (span of ruleSpans) {
            span.classList.add("hide");
        }
        return;
    }

// Adding attention borders and error messages based upon what the issue is
    this.classList.remove("successBorder");
    this.classList.add("errorBorder");
    const ruleSpans = document.getElementsByClassName(this.id);
    for (span of ruleSpans) {
        span.classList.add("hide");
        switch (span.getAttribute("data-rule")) {
            case "patternMismatch":
                if (this.validity.patternMismatch) {
                    span.classList.remove("hide");
                }   
                break;
            case "valueMissing":
                if (this.validity.valueMissing) {
                    span.classList.remove("hide");
                }
                break;
            case "typeMismatch":
                if (this.validity.typeMismatch) {
                    span.classList.remove("hide");
                }
                break;
        }
    }
}

现在，如果是第一次输入该元素，那么禁用/启用是有效的，但在第一次输入之后，它一直“落后”。（例如，如果使用用户名，则“注册”按钮将启用，但如果使用用户名，则“注册”按钮将禁用，这与我想要的正好相反）。
所以我想，与其用正确的方法（我在代码

中的方法）（username.classList.contains（“take”））

）检查它，不如将逻辑颠倒如下：

username.classList.contains（“take”）

。这是可行的（尽管这在逻辑上是错误的，而且令人难以置信的是hack-y），除了第一次使用了一个被占用的用户名

---

我在逻辑上犯了什么错误？

我建议您使用这样的代码结构

function serverValidation () { //make the ajax call here to validate all server validation //send the success callback handler to 'clientValidations' } function clientValidations(){ //validate other form elements that does not require a server request here //Then submit the form through an ajax form submit submitFormThroughAjax(); } function submitFormThroughAjax() { //submit the form through ajax. } function onSubmit(event) { event.preventDefault(); serverValidation(); } //Here onSubmit should be attached to the form submit handler. 函数服务器验证（）{ //在此处进行ajax调用以验证所有服务器验证 //将成功回调处理程序发送到“clientValidations” } 函数clientValidations（）{ //在此处验证不需要服务器请求的其他表单元素 //然后通过ajax表单提交来提交表单 通过ajax（）提交格式； } 函数submitFormThroughAjax（）{ //通过ajax提交表单。 } 提交函数（事件）{ event.preventDefault（）； 服务器验证（）； } //此处onSubmit应附加到表单提交处理程序。 请参阅下面的链接，了解如何通过ajax提交表单

---

本例仅在用户提交后进行所有验证，但如果您希望在用户交互时立即显示错误，则需要通过特定的表单元素事件进行处理。

在有人回答此问题之前，似乎缺少一些东西。什么启动ajax调用，什么调用

validate

函数。您正在validate函数中调用

this.checkValidity（）

和

ajax.onload

但是

这个

绑定到了什么？该方法的定义在哪里？请创建一个jsfiddle@23nigam就可以了，ajax调用将很难重新创建，但我会复制一切else@AdamMcGurk：我对模拟ajax调用进行了修改。你可以看看@AdamMcGurk解释的某些部分有点令人困惑，我相信其中一个

中缺少
not
，在这个短语中：
如果使用用户名，注册按钮被启用，但是如果使用用户名，注册按钮被禁用
。如果你的问题是，为什么代码的工作方式似乎与逻辑工作方式相反，那么你可能应该显示缺失的代码，因为问题中的代码本身并不像你说的那样。