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中文网其他相关文章！