Peraturan Pengesahan Custom JQuery - Fieldpresent

Tutorial ini menunjukkan cara membuat peraturan pengesahan tersuai untuk borang anda menggunakan plugin jQuery.validate.js, memperluaskan panduan sebelumnya untuk menyediakan pengesahan borang. Kami akan memanfaatkan fungsi $.validator.addMethod() untuk menentukan peraturan ini. Demo langsung disediakan, dan contohnya termasuk pengendalian tarikh pengesahan kelahiran. Nota: Versi yang ditampal menangani keserasian silang dan isu rekursi dimasukkan.

Contoh:

Contoh -contoh berikut menggambarkan peraturan pengesahan tersuai yang memastikan kedua -dua nama dan medan e -mel dihuni. Sekiranya seseorang diisi, yang lain mesti juga.

• Pengesahan medan kiri:
• Pengesahan medan kanan:
• kedua -dua bidang dalam tindakan (berbilang pasang):

Live Demo:

(edit pada jsfiddle)

kod jQuery (versi patched):

Coretan yang lebih baik ini menyelesaikan masalah ketidakkonsistenan dan masalah rekursi silang:

// 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
    }
});

<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;
}

Tarikh Pengesahan Lahir (3 Input):

Bahagian ini menunjukkan cara mengesahkan tarikh lahir menggunakan tiga bidang berasingan (hari, bulan, tahun):

ingat untuk memasukkan tag

// 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)

yang diperlukan untuk jQuery dan jQuery Validate plugin dalam fail HTML anda. Tutorial yang dipertingkatkan ini memberikan penyelesaian yang lebih mantap dan boleh dipercayai untuk pengesahan bentuk tersuai.

Atas ialah kandungan terperinci Peraturan Pengesahan Custom JQuery - Fieldpresent. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!