难以将功能从一个 class 优先排序到另一个 class

Question

我想进行表单验证。我创建了一个验证方法文件：

ValidationMethods.js

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, classList) {
        const className = inputName.name + '-validation'
        if (validation) {
            if (document.getElementsByClassName(className).length <= 0) {
                const error = document.createElement('div')
                error.classList.add(className, classList)
                error.innerHTML = errorMessage
                inputName.parentElement.appendChild(error)
                inputName.classList.add('validation-error')
                inputName.focus()
            }
        } else {
            if (document.getElementsByClassName(classList).length > 0) {
                document.querySelector('.' + className).remove()
                inputName.classList.remove('validation-error')
            }
        }
    }

}

现在我在我的新 class 中使用这个 class:

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

    password.addEventListener('focusout', () => {
        validation.minimum(password,3,'Minimum character: 3')
        validation.maximum(password,6,'Maximum character: 6')
        validation.empty(password,'The field should not be empty')
    } )
}

一切顺利。但是当空字段应该显示字段为空的错误并且我添加一个字符时，错误将被清除并且当我 focuson 和 focusend 字段时将显示最小字符数错误。这个问题是由于字段调用布局的优先级导致的，但是代码中可以去掉这个优先级吗？

Answer 1

我想这是一个架构问题。验证器不应显示或清除错误消息，而只能 return 它们。您可以尝试重新设计您的代码，例如：

有基本的Validatorclass和下面的最小API

class Validator {
    // check whether a value is valid
    valid(value): boolean;
    // return an HTML element with an error message
    errorElement(): HTMLDivElement;
}

使 Empty、Min、Max 等扩展 Validator 并创建一个中央“控制器”函数，该函数将接受一个元素和一个 [=18] 的列表=] 并执行实际的 UI 工作：

function validate(inputElement, validators) {
    // code to clear error messages
    //...

    // check all validators
    let failedValidators = validators.filter(v =>
         !v.valid(inputElement.value))

    // if any of them failed, display error messages
    if (failedValidators.length) {

        let errorBox = document.createElement('div')
        failedValidators.forEach(v =>
            errorBox.appendChild(v.errorElement()))
        //etc
    }
}

在您的事件处理程序中，调用 validate 并为其提供 Validator 个对象的列表：

password.addEventListener('focusout', event => validate(event.target, [
    new EmptyValidator(...),
    new MinValidator(...),
    new MaxValidator(...),
])

难以将功能从一个 class 优先排序到另一个 class

Difficulty prioritizing functions from one class to another

javascript

validation