JQuery 验证插件和自定义规则

Question

我在我的网络应用程序中使用 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.');

value :- the current value of the validated element
element :- the element to be validated

更新

以上方式是为单个input元素添加自定义方法。现在的问题仍然是我们如何对表单做同样的事情，而不仅仅是 1 个输入元素。

No, we cannot add a custom rule to the <form> element

但是有一种方法可以为多个输入添加单个规则。以下是相同的示例。在此示例中，我们检查 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 函数上调用验证和

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

JQuery 验证插件和自定义规则

JQuery validation plugin and custom rule

jquery

jquery-validate