jquery - 基于Class的jQuery自定义验证

Question

我有这两种方法，它们工作，有点...

问题在于，在第一种情况下，只有具有该类名的第一个输入项有效。

    $.validator.addClassRules("NameField",{
        required: true,
            minlength: 2,
        uniqueName: {
          product: function() {
              return $(this).val();
          }
        },
        messages: {
           required: "Required Field",
           minlength: "Minimum 2 characters",
           uniqueName: "Name exists already",
           remote: ''
        }
    });

第二个示例的问题是验证有效，但消息不适用于远程验证器

    $(".NameField").rules("add", {
        required: true,
            minlength: 2,
        uniqueName: {
          product: function() {
              return $(this).val();
          }
        },
        messages: {
           required: "Required Field",
           minlength: "Minimum 2 characters",
           uniqueName: "Name exists already",
           remote: ''
        }

    });

这是验证器的代码

    $.validator.addMethod("unique", function(value, element, params) {
      return $.validator.methods.remote.call(this, value, element, {
          url: 'mypage',
          data: {
              : value
          }
      });
    });

有什么想法吗？

Answer 1

您不能像使用uniqueName. 您必须首先定义将方法添加到验证器，然后您可以将其添加到您的规则中。

HTML

<form class="testForm" action="" method="post">
    <input type="text" name="input1" class="NameField" />
    <input type="text" name="input2" class="NameField" />
    <input type="text" name="input3" class="NameField" />
    <input type="text" name="input4" class="NameField" />
    <input type="submit" />
</form>​

Javascript

$.validator.addMethod("uniqueName", function(value, element) {
    var parentForm = $(element).closest('form');
    if ($(parentForm.find('.NameField[value=' + value + ']')).size() > 1) {
        return false;
    }
    else {
        return true;
    }
}, "Name exists already");

$.validator.addClassRules({
    NameField: {
        required: true,
        minlength: 2,
        uniqueName: true
    }
});

$(".testForm").validate();​

演示

另请注意，您不能添加messages该addClassRules功能。