jQuery自定義驗證規則-FieldPresent

>本教程演示瞭如何使用jquery.validate.js插件為您的表單創建自定義驗證規則，從而擴展了以前的有關設置表單驗證的指南。 我們將利用$.validator.addMethod()>函數來定義這些規則。 提供了實時演示，示例包括處理出生驗證日期。 注意：包含一個修補的，解決跨瀏覽器兼容性和遞歸問題的修補版本。

>

>示例：

>

>以下示例說明了自定義驗證規則，以確保填充名稱和電子郵件字段。 如果一個被填充，另一個也必須是。

• 左字段驗證：
• > 在 兩個字段在行動中（多對）：
• >
實時演示：

（在JSFIDDLE上進行編輯）

>

這種改進的摘要解決了跨瀏覽器的不一致和遞歸問題：

html：

>

<code class="language-javascript">// 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
    }
});</code>

> css：

<code class="language-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></code>

出生驗證日期（3個輸入）：> 本節顯示瞭如何使用三個單獨的字段（日，月，年）來驗證出生日期：

<code class="language-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;
}</code>

請記住，在您的HTML文件中包括jQuery的必要標籤和jQuery validate插件。 該增強教程為自定義表單驗證提供了更強大，更可靠的解決方案。

以上是jQuery自定義驗證規則-FieldPresent的詳細內容。更多資訊請關注PHP中文網其他相關文章！