jQuery 验证插件添加多个 .rules() 函数

Question

正如我在标题中所说， 我想在我的脚本中添加多个函数 .rules() 。 当我尝试这个时:

$("#braintree-payment-form").validate({});



    $("#month").rules('add', {
        required: true,
        regex: "(0[123456789]|10|11|12)",
        messages : {
            required: "Expiration date is required.",
            regex: "Invalid expiration date."
        }
    });
    $("#year").rules('add', {
        required: true,
        regex: "([0-9][0-9])",
        messages : {
            required: "Expiration date is required.",
            regex: "Invalid expiration date."
        }
    });


    $("#cardNum").rules('add', {
        required: true,
        regex: "(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})",
        messages : {
            required: "Credit card number is required.",
            regex: "Invalid credit card number"
        }
    });

仅应用最后一个 .rules()，并且它还应用于第一个输入元素，而不是相应的 id 元素。

提前致谢:)

这是我当前使用的表格:

<form action="#" method="POST" id="braintree-payment-form">
    <p>
      <label>Card Number</label>
      <input type="text" size="20" autocomplete="off" name='number' id='number' data-encrypted-name="number"/>
    </p>
    <p>
      <label>CVV</label>
      <input type="text" size="4" autocomplete="off" name='cvv' data-encrypted-name="cvv" id='cvv'/>
    </p>
    <p>
      <label>Expiration (MM/YYYY)</label>
      <input type="text" size="2" data-encrypted-name="month" id="month" name = 'month' /> / <input type="text" size="4" data-encrypted-name="year" id="year" name='year' />
    </p>
    <input type="submit" id="submit" name='braintree'/>
  </form>

Answer 1

只是猜测，因为我无法从您发布的有限代码中重现您的问题，但我想说您忘记在每个输入元素上包含 name 属性。 jQuery Validate 插件要求每个输入都有一个唯一的名称。

See the "Markup recommendations" section on the General Guidelines page :

"The name attribute is 'required' for input elements, the validation plugin doesn't work without it. Usually name and id attributes should have the same value."

<form id="braintree-payment-form">  
     <input type="text" name="month" id="month" data-encrypted-name="month" />
     <input type="text" name="year" id="year" data-encrypted-name="year" />
     <input type="text" name="cardNum" id="cardNum" data-encrypted-name="cardNum" />
     <input type="submit" />
</form> 

否则，您的代码可以正常工作:http://jsfiddle.net/hc2Bj/2/

OP 发布 HTML 后进行编辑:

我还注意到您在 jQuery 中定位了 #cardNum，但我在您发布的 HTML 中没有看到 id="cardNum"。