JQuery CreditCard 验证器扩展答案

【问题标题】：JQuery CreditCard validator extendJQuery CreditCard 验证器扩展
【发布时间】：2012-09-27 01:06:12
【问题描述】：

我正在使用 Jquery 验证器我的挑战是用户何时更新他们的个人资料信息。但不改变他们的抄送。

在更新页面时我只显示 4*****1111

所以如果使用验证失败：（下面的代码sn-p）

$("#profile-form").validate({
      rules: {
             ccnum: { required: true, creditcard: true },
             exp_year: { ccDate: true},
             exp_month: { ccDate: true}
             }

但是，如果用户输入一个新的 CC 号码，它会按照它的假设进行操作。

所以我的问题是，如果用户想要更新其他内容并保持 CC 卡不动，我该怎么办。

有什么想法/建议吗？

【问题讨论】：

标签： jquery jquery-plugins jquery-validate

【解决方案1】：

如果元素的值发生变化，我会编写一个调用信用卡验证方法的新规则：

$.validator.addMethod("creditcard-custom", function (value, element) {
    return this.optional(element) || 
        element.value === element.defaultValue ||
        $.validator.methods.creditcard.call(this, value, element);
}, $.validator.messages.creditcard);

用法：

$("#myform").validate({
    rules: {
        ccnum: {
            required: true,
            'creditcard-custom': true
        },
        exp_year: {
            ccDate: true
        },
        exp_month: {
            ccDate: true
        }
    }
});

示例： http://jsfiddle.net/andrewwhitaker/kqczf/2/

【讨论】：

亲爱的安德鲁：感谢您的帖子！如果该字段是可选的，会有所不同吗？如果我们删除 this.optional(element) 会发生什么？
你可以试试看:)
我刚刚创建了两个示例表单并在不同的浏览器中进行了尝试。一个有this.optional(element)，另一个没有：form1 和form2。你介意帮我理解其中的区别吗？谢谢！
所有this.optional 所做的只是说“如果该字段是可选的，如果它是空白则返回true”
"如果该字段是可选的，如果它是空白的，则返回true" 但是这不是可选字段的用途吗？无论我们是否使用this.optional，如果它们为空，它们会自动返回true。