Question

我有一个包含多个字段的表单。我正在使用分叉的jQuery验证plugin，因为我在验证字段旁边使用了Font-Awesome的复选标记和感叹号。显然，jQuery验证不允许您向元素添加多个类。无论如何，除了我的信用卡验证之外，我的所有字段都经过正确验证。我有一个简单的正则表达式（/^\d{16}$/）来检查16位数。我的代码不起作用。

HTML

<form id="checkout_form" method="post" action="">

Card Number:
<input id="credit_card_card_number" name="credit_card[card_number]" size="30" type="text" /><i class="fa fa-lg"></i>

<input type="submit">

的jQuery

$(document).ready(function(){
  $('#checkout_form').validate({

    rules: {
      'credit_card[card_number]': {
        required: {
          depends: function(element) {
            var regex = /^\d{16}$/;
            return regex.test(element.value);
          }
        }
      }
    },
    validClass: "fa-check",
    errorClass: "fa-exclamation-triangle",
    errorPlacement: function(error, element) {
    },
    highlight: function(element, errorClass, validClass) {
      $(element).next().addClass(errorClass).removeClass(validClass);
    },
    unhighlight: function(element, errorClass, validClass) {
      $(element).next().removeClass(errorClass).addClass(validClass);
    }
  });
});

我把它放在http://jsfiddle.net/dUZy4/14/上，但出于某种原因它不会在那里编译。

Answer 1

<强>解

我认为你应该改变方法来实现你想要的。

如果我是你，我会创建新规则：

$.validator.addMethod(
    "legalCreditCard",
    function (value, element) {
        return this.optional(element) || /^\d{16}$/.test(value)
    },
    "Use a valid credit card number."
);

之后，您只需使用新规则，例如标准required规则：

rules: {
    'credit_card[card_number]': {
        required: true,
        legalCreditCard: true
    }
},

Working JSFIDDLE example尝试删除规则legalCreditCard: true以查看差异。

另外，在jQuery Validation插件中查找标准creditcard方法：http://jqueryvalidation.org/creditcard-method

为什么您的代码不起作用

您使用depends条件。这是错误的。看这个：

可以将每个规则指定为具有依赖属性来应用只在某些条件下统治。

这意味着，只有完成某项工作后，该规则才有效。对于exapmle，如果选中复选框。

示例：

$(".selector").validate({
    rules: {
        contact: {
            required: true,
            email: {
                depends: function(element) {
                    return $("#contactform_email:checked")
                }
            }
        }
    }
});

很简单。 Source

问我，如果你不清楚某事。

希望，这会对你有帮助。

jquery正则表达式验证未正确验证信用卡字段

1 个答案: