So verwenden Sie das JavaScript-Strategiemuster zum Validieren von Formularen

Überblick

In Webprojekten erfordern Anmeldung, Registrierung und andere Funktionen die Übermittlung eines Formulars. Bevor die Daten des Benutzers an das Backend übermittelt werden, muss das Frontend im Allgemeinen einige Überprüfungen im Rahmen seiner Möglichkeiten durchführen, z. B. ob das Formular ausgefüllt ist, wie lang das Formular ist, ob das Kennwort den Spezifikationen entspricht usw. Durch die Überprüfung des Frontends kann die Übermittlung nicht konformer Formulare vermieden werden.

Angenommen, wir haben ein Formular mit der folgenden Validierungslogik:

• Der Benutzername ist nicht leer
• Das Passwort muss mindestens 6 Zeichen lang sein
• Die Handynummer entspricht dem Format

Formularvalidierung ohne Verwendung des Strategiemusters

Wenn der Strategiemodus nicht verwendet wird, ist der erste Überprüfungsmodus, der uns in den Sinn kommt, normalerweise dieser:

<Text>
    <Formular-ID="Formular registrieren">
        <label for="username">Benutzernamen eingeben: <input type="text" name="username"></label>
        <label for="password">Passwort eingeben: <input type="password" name="password"></label>
        <label for="phone">Passwort eingeben: <input type="text" name="phone"></label>
    </form>
    <Skript>
        const form = document.querySelector('.registerForm');
        form.onsubmit = Funktion(){
            wenn(formular.benutzername.wert === ''){
                alert('Benutzername darf nicht leer sein')
                zurückkehren;
            }
            wenn(Formular.Passwort.Wert.Länge < 6){
                alert('Die Passwortlänge darf nicht weniger als 6 Zeichen betragen.')
                zurückkehren;
            }
            wenn(!/(^1[3|5|8][0-9]{9}$)/.test(form.phone.value)){
                alert('Das Telefonnummernformat ist falsch.')
                zurückkehren;
            }
        }
    </Skript>
</body>

Diese Art, Code zu schreiben, ist weit verbreitet, aber ihre Nachteile liegen auch auf der Hand:

• Die Onsubmit-Funktion ist zu groß und enthält viele if-else-Anweisungen, um alle Regeln abzudecken.
• Der Funktion onsubmit mangelt es an Flexibilität. Wenn Sie eine neue Validierungsregel eingeben möchten, müssen Sie den Inhalt der Funktion ändern, was gegen das Open-Closed-Prinzip verstößt.
• Die Wiederverwendbarkeit des Codes ist schlecht. Wenn Sie ein anderes Formular schreiben, müssen Sie viel doppelten Code kopieren.

Optimieren mit dem Strategiemuster

Kapseln Sie zunächst die Verifizierungsfunktion als Objekt:

const Strategien = {
    leer(Wert, Fehlermeldung){
        wenn(Wert.Länge === 0){
            Fehlermeldung zurückgeben;
        }
    },
    minLength(Wert, Länge, Fehlernachricht){
        wenn(Wert.Länge < Länge){
            Fehlermeldung zurückgeben;
        }
    },
    isMobile(Wert, errMsg){
        wenn(!/(^1[3|5|8][0-9]{9}$)/.test(Wert)){
            Fehlermeldung zurückgeben;
        }
    }
}

Wir benötigen außerdem eine Validator-Klasse, die verwendet wird, um dem Zielformular Validierungsregeln hinzuzufügen. Die Verwendung ist wie folgt:

const validieren = Funktion(){
    const validator = neuer Validator();
    validator.add(Form.userName, 'empty', 'Benutzername darf nicht leer sein');
    validator.add(Form.password, 'minLength:6', 'Die Länge des Passworts darf nicht weniger als 6 Zeichen betragen');
    validator.add(Form.phone, 'isMobile', 'Das Format der Mobiltelefonnummer ist falsch');
    const errMsg = validator.start();
    Fehlermeldung zurückgeben;
}

Wie im Code gezeigt, verfügt die Validator-Instanz über eine Add-Methode, die drei Parameter empfängt. Der erste ist die Formularinstanz, die validiert werden muss, der zweite ist die Validierungsmethode und die Parameter nach dem Doppelpunkt werden übergeben. Die dritte ist die Fehlermeldung, wenn die Überprüfung fehlschlägt.

Mit der Startmethode wird die Überprüfung gestartet. Bei einem Fehlschlag wird eine entsprechende Meldung zurückgegeben, die den Fehlschlag anzeigt und in der nachfolgenden Logik verarbeitet werden kann.

Schreiben der Validator-Klasse:

Klasse Validator {
    Konstruktor(){
        diese.regeln = [];
    }
    hinzufügen(Element, Regel, Fehler){
        const args_arr = rule.split(":");
        diese.Regeln.push(()=>{
            const handler = args_arr.shift();
            args_arr.unshift(Element.Wert);
            args_arr.push(Fehler);
            Rückgabestrategien [Handler].apply(elem, args_arr)
        })
    }
    Start(){
        lass errmsg = []
        für(lass i = 0; i < diese.Regeln.Länge; i++ ){
            const err = diese.Regeln[i]();
            wenn(fehler){
                errmsg.push(err)
            }
        }
        returniere errmsg.join(",");
    }
}

Im Strategiemodus verwenden wir die Konfigurationsmethode, um die Formularüberprüfung abzuschließen. Diese Regeln können an jeder Stelle verwendet werden, an der das Formular in Zukunft überprüft wird, was für die Änderung und Wiederverwendung bequemer ist.

Fügen Sie einem einzelnen Formularfeld mehrere Validierungsregeln hinzu

Unser Code weist derzeit einen Mangel auf: Er kann einem Formularelement nur eine einzige Validierungsregel zuweisen und nicht mehrere Validierungsregeln für ein Formular implementieren. Daher besteht im Code Verbesserungsbedarf.

Klasse Validator{
    // ···
    hinzufügen(Element, Regeln){
        Regeln.fürJedes(Regel => {
            const args_arr = rule.strategy.split(":");
            diese.Regeln.push(()=>{
                const handler = args_arr.shift();
                args_arr.unshift(Element.Wert);
                args_arr.push(regel.errMsg);
                Rückgabestrategien [Handler].apply(elem, args_arr)
            })
        });
    }
    // ···
}

const validieren = Funktion(){
    const validator = neuer Validator();
    validator.add(Formular.Benutzername,[{
        Strategie: 'leer',
        errMsg: „Benutzername darf nicht leer sein“
    }]);
    validator.add(Formular.Passwort, [{
        Strategie: 'minLength:6',
        errMsg: „Das Passwort darf nicht weniger als 6 Zeichen lang sein.“
    }]);
    validator.add(Formular.Telefon, [{
        Strategie: 'isMobile',
        errMsg: „Das Format der Mobiltelefonnummer ist falsch“
    }, {
        Strategie: 'leer',
        errMsg: „Telefonnummer darf nicht leer sein“
    }]);
    const errMsg = validator.start();
    Fehlermeldung zurückgeben;
}

Sie müssen beim Übergeben von Parametern nur ein Objektarray übergeben und die entsprechende Array-Verarbeitungslogik in der Add-Funktion hinzufügen.

Vorteile des Strategiemusters

Vorteil:

• Vermeiden Sie mehrere bedingte Auswahlanweisungen
• Durch die Umsetzung des Open-Closed-Prinzips wird die Nutzung von Funktionen einfacher umschaltbar, verständlicher und erweiterbar.
• Verbessern Sie die Wiederverwendung von Code

Zusammenfassen

Peter Norvig sagte, dass in einer Sprache, in der Funktionen erstklassige Objekte sind, das Strategiemuster unsichtbar ist und die Strategie eine Variable ist, deren Wert eine Funktion ist. Tatsächlich handelt es sich dabei um den Prozess, bei dem die gekapselte Strategiefunktion als Parameter an das Ziel übergeben wird, das sie verwendet, und vom Ziel aufgerufen wird. Die gute Verwendung des Strategiemusters ermöglicht uns nicht nur ein tieferes Verständnis des Musters, sondern lässt uns auch die Vorteile der Verwendung der Funktion verstehen.

Oben finden Sie Einzelheiten zur Verwendung des JavaScript-Strategiemodus zum Überprüfen des Formulars. Weitere Informationen zu JavaScript finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!