jquery - 在 jquery validate 中替换 equalTo() 方法

Question

我现在正在使用jQuery Validate Plugin并且遇到了一些问题。

我的html：

<div class="card">
    <div class="item">
        <span class="label"><b class="red">*</b>CardNo:</span>
        <input class="BankCardNo" name="BankCardNo" type="text" value=""/> 
    </div>
    <div class="item">
        <span class="label"><b class="red">*</b>Confirm CardNo:</span>
        <input class="ConfirmCardNo" name="ConfirmCardNo" type="text" value=""/>
    </div>
</div>
<div class="card">
    <div class="item">
        <span class="label"><b class="red">*</b>CardNo:</span>
        <input class="BankCardNo" name="BankCardNo" type="text" value=""/> 
    </div>
    <div class="item">
        <span class="label"><b class="red">*</b>Confirm CardNo:</span>
        <input class="ConfirmCardNo" name="ConfirmCardNo" type="text" value=""/>
    </div>
</div>

我正在制作银行卡管理页面。一次可以添加多张卡片。
我想让每张卡单独验证，但equalTo方法只接受元素 id,name,attr

如

$("#myForm").validate({
  rules: {
    "Password": {
      required: true,
    },

    "ConfirmPassword": {
      required: true
      equalTo: '#Password'
    }
  },

  errorElement: "div"
});

这是验证插件添加规则，非常漂亮。
所以我只想要这样的所有验证码。这是主要问题。

如果我写下面这样的代码，它找不到正确的 CardNo ......

$('.card').find('.ConfirmCardNo').rules('add', {
  required: true,
  equalTo: '.CardNo'
});

我如何达到我的目的？

Answer 1

你可以这样做

var $elems = $('.card');

(function fetch(i) {
    if(i >= $elems.length) return;  // no elems left

    var $elem = $elems.eq(i);

    $($elem).find('.ConfirmCardNo').rules('add',{ 
        required:true, 
        equalTo:$($elem).find('.CardNo')
    });

    fetch(i + 1);  // next one

  })(0);  // start with first elem

或者如果您只想使用一个插件

您可以遍历所有卡片 div 并根据它们的值制定规则

Answer 2

你可以试试这个，比如选择器

$("#registerForm").validate({
    rules:{
        name:{
            required:true,
            email:true
        },
        password:{
            required:true,
            minlength:6,
            maxlength:12
        },
        cfmPassword:{

            equalTo:$('#registerForm').find('#password'),
            minlength:6,
            maxlength:12
        }

    },
    errorPlacement: function( error, element ) {
        error.insertAfter( element.parent() );
    }
});