JQuery Custom Validierungsregel - FieldPresent

Dieses Tutorial zeigt, wie Sie benutzerdefinierte Validierungsregeln für Ihre Formulare mit dem Plugin jQuery.validate.js erstellen und bei einem vorherigen Leitfaden zum Einrichten der Formularvalidierung erweitert werden. Wir nutzen die $.validator.addMethod() -Funktion, um diese Regeln zu definieren. Es wird eine lebende Demo bereitgestellt, und die Beispiele beinhalten das Verschiebungsdatum der Geburtsvalidierung. HINWEIS: Eine Patched-Version, die sich mit dem Cross-Browser-Kompatibilität und der Rekursionsprobleme befasst, ist enthalten.

Beispiele:

Die folgenden Beispiele veranschaulichen benutzerdefinierte Validierungsregeln, um sicherzustellen, dass sowohl ein Name als auch ein E -Mail -Feld ausgefüllt sind. Wenn einer gefüllt ist, muss auch der andere sein.

• Feld Validierung des linken Feldes:
• Rechts Feld Validierung:
• Beide Felder in Aktion (mehrere Paare):

Live -Demo:

(auf JSFiddle bearbeiten)

JQuery Code (gepatschte Version):

Dieser verbesserte Snippet löst Cross-Browser-Inkonsistenzen und Revisionsprobleme auf:

// Custom validation: each friend entered must have an email and a name
$.validator.addMethod("fieldPresent", function(value, element, options) {
    var targetEl = $('input[name="' + options.data + '"]'),
        targetEmpty = (targetEl.val() == ''),
        elEmpty = (value == ''),
        bothEmpty = elEmpty && targetEmpty;

    if (!bothEmpty && targetEmpty) {
        setTimeout(function() {
            if (targetEl.closest('.control-group-inner').find('label.fieldPresentError').length == 0) {
                targetEl.addClass('error');
                if (!elEmpty) $(element).closest('.control-group-inner').find('label.fieldPresentError').remove();
                targetEl.closest('.control-group-inner').find('label.fieldPresentError').remove();
                targetEl.after("<label class='fieldPresentError'>Friend's name and email required.</label>");
            }
        }, 500);
    }

    return (bothEmpty || !elEmpty);
}, "Friend's name and email required.");

$('#myForm').validate({
    onkeyup: true,
    rules: {
        "friend1-name": { "fieldPresent": { data: "friend1-email" } },
        "friend1-email": { "fieldPresent": { data: "friend1-name" } }
    },
    submitHandler: function(form) {
        console.log('passed validation.');
        //submit form handler
    }
});

html:

<form id="myForm">
    <div class="control-group">
        <div class="control-group-inner">
            <label for="friend1-name">Friend's name</label>
            <input type="text" name="friend1-name" />
        </div>
        <div class="control-group-inner">
            <label for="friend1-email">Email Address</label>
            <input type="email" name="friend1-email" />
        </div>
    </div>
    <button type="submit">Submit</button>
</form>

css:

.control-group {
    width: 100%;
}

.control-group-inner {
    width: 50%;
    float: left;
    display: inline-block;
}

.error {
    border: 1px solid red;
}

label.fieldPresentError {
    color: red;
    display: block;
    margin-top: 5px;
}

Geburtsdatum der Validierung des Geburtsdatums (3 Eingänge):

Dieser Abschnitt zeigt, wie ein Geburtsdatum mit drei separaten Feldern (Tag, Monat, Jahr) validiert werden kann:

// Custom validation for dob
$.validator.addMethod("dobValid", function(value, element, options) {
    var day = $('input[name="dob-day"]'),
        month = $('input[name="dob-month"]'),
        year = $('input[name="dob-year"]'),
        anyEmpty = (day.val() == '' || month.val() == '' || year.val() == '');

    if (anyEmpty) {
        day.add(month).add(year).addClass('error');
    } else {
        day.add(month).add(year).removeClass('error');
    }

    return !anyEmpty;
}, "Please enter your date of birth.");

// ... (rest of your validation code, including the rules for dob-day, dob-month, dob-year)

Denken Sie daran, die erforderlichen <script></script> -Tags für JQuery und das JQuery -Validierungs -Plugin in Ihre HTML -Datei aufzunehmen. Dieses erweiterte Tutorial bietet eine robustere und zuverlässigere Lösung für die benutzerdefinierte Formularvalidierung.

Das obige ist der detaillierte Inhalt vonJQuery Custom Validierungsregel - FieldPresent. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!