難以確定從一個類別到另一個類別的功能的優先次序

我想做一個表單驗證。我創建了一個驗證方法檔案：

ValidationMethods.js

export class ValidationMethods {

    empty(inputName, errorMessage) {
        let validation = false;
        if (inputName.value ==''/span>) {
            驗證 = 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'/span>)
                error.classList.add(className, classList)
                error.innerHTML = errorMessage
                inputName.parentElement.appendChild（錯誤）。
                inputName.classList.add('validation-error')
                inputName.focus()
            }
        } else {
            if (document.getElementsByClassName(classList).length > 0) {
                document.querySelector('.    className).remove()
                inputName.classList.remove('validation-error')
            }
        }
    }

}

現在我在我的新班級中使用這個班級：

connect（）{ let password = document.getElementsByName('password') [0] const validation = new ValidationMethods（) password.addEventListener('focusout', () => { validation.minimum(password,3,'最小字符：3') validation.maximum(password,6,'最大字符：6') validation.empty(password,'The field should not be empty') } ) }

一切都很好。但是當空欄位應該顯示欄位為空的錯誤，而我添加了一個字符時，錯誤將被清除，而當我再次關注和關注欄位時，將顯示最小字符數的錯誤。 這個問題是由于欄位呼叫布局的優先級造成的，但這個優先級是否可以在代碼中洗掉？

uj5u.com熱心網友回復：

我猜這是一個架構問題。一個驗證器不應該顯示或清除錯誤資訊，只應該回傳它們。

擁有基本的Validator類，其最小的API如下

class Validator {
    //檢查一個值是否有效。
    valid(value): boolean;
    //回傳一個帶有錯誤資訊的HTML元素。
    errorElement(): HTMLDivElement;
}

讓Empty、Min、Max等擴展Validator，并創建一個中央 "控制器 "函式，它將接受一個元素和一個Validator串列并執行實際的UI作業：

function validate（inputElement, validators） {
    //清除錯誤資訊的代碼。
    //...。

    //檢查所有的驗證器。
    let failedValidators = validators.filter(v =>)
         !v.valid（inputElement.value）)

    //如果其中任何一個失敗，顯示錯誤資訊。
    if (failedValidators.length) {

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

在你的事件處理程式中，呼叫validate并給它一個Validator物件的串列：

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

標籤：

上一篇：CEW73Veracode-如何用getQueryStringHttpServletRequest(java)方法修復CWE73型別的檔案名或路徑的外部控制缺陷。

下一篇：Springboot@Valid不能正常作業