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();