JS跨类调用表单验证方法优先级导致提示异常如何解决

你遇到的问题本质不是调用顺序优先级，而是校验类的错误增删逻辑有缺陷：

• 新增错误时，只要当前输入框下存在任意类型的校验提示，就不会新增其他类型的错误
• 删除错误时，某类校验通过后会直接删除输入框下所有校验提示，不会区分错误类型
• 输入框错误样式的移除逻辑不合理，某类校验通过就直接移除样式，未判断是否还有其他未通过的校验

直接修改ValidationMethods类的错误处理逻辑即可，修改后代码如下：

export class ValidationMethods {

    empty(inputName, errorMessage) {
        let validation = false;
        if (inputName.value === '') {
            validation = true
        }
        this.result(inputName, errorMessage, validation, 'empty-validation-class')
    }

    minimum(inputName, min, errorMessage) {
        let validation = false;
        if (0 < inputName.value.length && inputName.value.length < min) {
            validation = true
        }
        this.result(inputName, errorMessage, validation, 'min-validation-class')
    }

    maximum(inputName, max, errorMessage) {
        let validation = false;
        if (inputName.value.length > max) {
            validation = true
        }
        this.result(inputName, errorMessage, validation, 'max-validation-class')
    }

    result(inputName, errorMessage, validation, errorTypeClass) {
        // 查找当前类型的错误元素
        const currentError = inputName.parentElement.querySelector(`.${errorTypeClass}`)
        if (validation) {
            // 当前类型错误未存在才新增
            if (!currentError) {
                const error = document.createElement('div')
                error.classList.add(errorTypeClass)
                error.innerHTML = errorMessage
                inputName.parentElement.appendChild(error)
            }
            // 只要有错误就添加错误样式
            inputName.classList.add('validation-error')
            inputName.focus()
        } else {
            // 只删除当前类型的错误
            if (currentError) {
                currentError.remove()
            }
            // 所有错误都清除后才移除错误样式
            const hasOtherError = inputName.parentElement.querySelector('.empty-validation-class, .min-validation-class, .max-validation-class')
            if (!hasOtherError) {
                inputName.classList.remove('validation-error')
            }
        }
    }

}

同时建议调整校验调用顺序，符合正常交互逻辑：

connect(){
    let password = document.getElementsByName('password')[0]
    const validation = new ValidationMethods()

    password.addEventListener('focusout', () => {
        // 先做空校验，再做长度校验
        validation.empty(password,'The field should not be empty')
        validation.minimum(password,3,'Minimum character: 3')
        validation.maximum(password,6,'Maximum character: 6')
    } )
}

内容的提问来源于stack exchange，提问作者user6202945