jQuery如果选中单选按钮，验证信用卡号答案

【问题标题】：jQuery if radio button checked, validate credit card numberjQuery如果选中单选按钮，验证信用卡号
【发布时间】：2015-04-23 20:55:03
【问题描述】：

好的，所以我一直在尝试使用 jQuery 来验证表单（没有插件）。现在我被卡住了，当检查信用卡，签证，万事达卡，美国运通的单选按钮时，我需要使用正则表达式验证信用卡号，以便如果选中单选按钮但没有输入卡号然后那里是一个错误消息。

我还需要验证到期月份和年份，但我不确定从哪里开始。

这就是我对 HTML 和 jQuery 所拥有的。

HTML：

         <!-- Credit card text box -->
<label for="cardNumber">Credit Card Number</label>
  <input type="text" id="cardNumber" type="text" name="cardNumber"/>
    <span id="cNhint" class="hint err-cNumber"></span><br>

           <!-- Fieldset payment radio buttons -->
<fieldset id    ="paymentMethod" data-role="paymentMethod">
<legend> Payment Method *</legend>
  <input type="radio" id="paymentType" name="credit_card"  value="None"  checked="checked" />
    <label>None</label>
  <input type="radio" id="paymentType" class="cardType cardErr" name="credit_card"  value="Visa"  />
    <label for="visa">Visa</label>
  <input type="radio" id="paymentType" class="cardType cardErr" name="credit_card"  value="MasterCard" />
    <label for="mastercard">MasterCard</label>
  <input type="radio" id="paymentType" class="cardType cardErr" name="credit_card"  value="American Express" />
    <label for="americanexpress">American Express</label>
</fieldset>

jQuery:

$cForm.submit(function(event) {
var creditCardPattern = /^\d{4}-\d{4}-\d{4}-\d{4}$/;
            //credit card number
    var $ccNumber = $('#cardNumber');
    var $errccardNumber = $('.err-cNumber');
    var errors = 0;
      // This is not working
    if ($paymenet.is(':checked')) {
        if(!creditCardPattern.test($paymentType.val())) {
            $errpayment.append('Must contain a 13- 16 digit number with no spaces or dashes!');
            errors += 1;
            }
    }

    if(errors >0) {
        $('.error').append('Please edit the marked fields below to fix errors.');
            event.preventDefault();
    }
    }

【问题讨论】：

您的验证应该根据位数自动检测输入的卡类型，您不应该让您的用户选择他们输入的卡。看这里：formvalidation.io/validators/creditCard
我实际上是在硬编码，而不是使用任何形式的插件或基础。另外根据要求，我必须在 jquery 中使用模式来验证，没有 html5 输入类型。

标签： jquery html

【解决方案1】：

$paymenet 和 $paymentType 声明为什么？您是否确认他们正在挑选您所期望的元素？

您显示的错误消息Must contain a 13- 16 digit number with no spaces or dashes! 也与正则表达式的操作不匹配。您的正则表达式当前正在检查由短划线分隔的四组四位数字。

与您显示的错误匹配的正则表达式将是 /^\d{13,16}$/

或者，您可以通过以下操作忽略用户在支票中输入的非数字：if(!creditCardPattern.test($paymentType.val().replace(/\D/g,''))){ ... }

【讨论】：

【解决方案2】：

首先，如前所述，尚不清楚 $paymenet 和 $paymentType 的来源。他们是提前宣布的吗？

我在this Fiddle 中对您的解决方案进行了一些测试，您的问题似乎在于您如何选择选中的单选按钮。

当我这样选择时，我没有任何问题：

  var $creditcardVendor = $("#paymentMethod").find(":checked");

关键是选择的根元素，在本例中为#paymentMethod，仅包含一组单选按钮/复选框。我在实际的正则表达式验证中找不到任何明显的技术问题，因此该部分应该可以工作。

旁注 1 - 您的标签无法正常工作。向他们添加for="<some id>" 以减少用户的挫败感。

旁注 2 - 您需要“无”选项吗？由于没有 CC 供应商就不能拥有 CC，您可以使用 $creditcardVendor.length 检查选择。如果长度为零，则不存在选中的选项并且不选择供应商。如果为 1，则选择供应商。

【讨论】：