Question

好的，所以我一直在尝试使用jQuery来验证表单（没有插件）。现在我＆＃39; M卡上，当信用卡，VISA，万事达，美国运通单选按钮，被选中，那么我需要验证使用正则表达式的信用卡号码，这样，如果一个单选按钮被选中，但没有输入卡号然后出现错误消息。

我还需要验证过期月份和年份，但我不知道从哪里开始。

这就是我对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();
    }
    }

Answer 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,''))){ ... }

Answer 2

首先，如上所述，目前尚不清楚$ paymenet和$ paymentType的来源。他们早些时候宣布了吗

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

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

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

关键是选择的根元素{在这种情况下为#paymentMethod只包含一组单选按钮/复选框。我无法通过实际的regexvalidation发现任何明显的技术问题，因此该部分应该可以工作。

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

Sidenote 2 - 你需要＆＃34;无＆＃34; -option？由于您无法在没有CC供应商的情况下使用CC，因此您可以使用$creditcardVendor.length检查选择。如果长度为零，则不存在选中的选项，也不选择供应商。如果它是1，则选择供应商。

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

2 个答案: