jQuery验证插件和自定义规则

Question

我在Web应用程序中使用jquery.validation插件。 我有以下用于表单验证的通用代码：

$('form[data-toggle="validator"]').each(function () {
            $(this).validate({
                errorClass: "help-block error",
                errorElement: "div",
                focusCleanup: false,
                focusInvalid: false,
                submitHandler: function(form){
                    $("[type=submit]",form).prop("disabled",true);
                    form.submit();
                }
            });
         });

当我需要验证时，我只需将data-toggle属性设置为表单即可。

在特定情况下，我想添加一个自定义规则，而不是针对单个输入元素，而是针对所有表单。 我想在运行时添加它，可能吗？

Answer 1

我认为您正在寻找添加自定义验证方法的方法。 下面是添加验证以在运行时检查值的最大长度的示例。

jQuery.validator.addMethod("maxLengthName", function(value, element) {
  return value.length>30;
}, 'Please enter a name with length less than 30.');

值：-已验证元素的当前值
element：-要验证的元素

更新资料

上面的方法是为单个输入元素添加自定义方法。 现在的问题仍然是，我们如何才能对表单（而不只是1个输入元素）执行相同的操作。

不可以，我们不能向<form>元素添加自定义规则

但是有一种方法可以为多个输入添加单个规则。 下面是相同的示例。 在此示例中，我们检查Input 1和Input 2相加是否等于用户输入的Total

<form id="TotalForm" name="TotalForm">
    <label>Input 1</label>
    <input type="text" name="inputone" id="inputone" class="required" />
    <label>Input 2</label>
    <input type="text" name="inputTwo" id="inputTwo" class="required" />
    <label>Total</label>
    <input type="text" name="inputTotal" id="inputTotal" class="required totalMatch" />
</form>


jQuery.validator.addMethod("totalMatch",function(value) {
        total = parseFloat($('#inputone').val()) + parseFloat($('#inputTwo').val());
        return total == parseFloat($('#inputTotal').val());
    }, "Total is not matching with Input 1 and  Input 2!");

    jQuery.validator.classRuleSettings.totalMatch = { totalMatch: true };

现在，您可以像下面这样在document.ready函数上调用validate，

$("#TotalForm").validate();