Question

我正在尝试集成信用卡表格，在该表格中，我将使用输入中填写的凭据通过邮政方式发送到Paypal api并获得回复。

我正在尝试编写客户端验证，而面临的问题是为到期日期编写验证，其中我需要使用月/年（00/0000）的格式，并且月应该是2位数字，年应该是4位数字。现在，我的表单可以接受任何长度的数字，如果它们以“ /”表示：23456/12456，并且仅在其字符完全输入时给出错误。所以，我有点困惑如何编写这样的验证！

到现在为止，我正在使用正则表达式来验证所有字符输入字段的简单所有整数。不了解上述复杂的表单验证。

那么，我如何使用Ajax或jquery验证来强制用户以要求的格式编写内容？

html

<form action="/payment" method="post">
  {% csrf_token %}
  <div class="col-md-4 col-sm-6 col-xs-6 input_mb">
      <label>Name on Card</label>
      <input id="id_card_name" class="form-control" name="fields[]" type="text" placeholder="Full name as display on card">
  </div>

  <div class="col-md-4 col-sm-6 col-xs-6 input_mb">
      <label>Credit Card Number</label>
      <input id="id_card_number" class="form-control" name="fields[]" type="text" placeholder="Enter Card Number">
  </div>

  <div class="col-md-4 col-sm-6 col-xs-6 input_mb">
      <label>Expiry</label>
      <input id="id_card_expiry" class="form-control" name="fields[]" type="text" placeholder="Ex: 06/2023">
  </div>

  <div class="col-md-4 col-sm-6 col-xs-6 input_mb">
      <label>Security Code</label>
      <input id="id_security_code" class="form-control" name="fields[]" type="text" placeholder="Ex: XXX8">
  </div>

  <div class="col-md-4 col-sm-m col-xs-6 input_mb">
      <button class="btn" type="button">PAY $139</button>
  </div>
</form>

我正在使用

ajax调用将数据发布到API

<script>
        $(document).ready(function(){
            $('.btn').click(function(){

            alert('clicked')
             $.ajax({
                method:'POST',
                url:'/payment',
                data:{
                'name':$('#id_card_name').val(),
                'number':$('#id_card_number').val(),
                'card-month-year':$('#id_card_expiry').val(),
                'security-code':$('#id_security_code').val(),
                 csrfmiddlewaretoken:'{{ csrf_token }}'
                },
                success:function(response){

                    alert(response);
                    var resss = $.parseJSON(response);
                    console.log(resss.card.status);
                    if (resss.card.status == "succeeded"){
                        window.location = res.redirect_url;
                    }
                }
             })
            })
        })
    </script>

Answer 1

以下JS正则表达式将匹配两位数字，后跟一个斜杠，再匹配四位数字：/^\d{2}\/\d{4}$/。您可以使用regex101网站查看其结构说明。

您肯定不需要仅仅进行这种验证的Ajax调用。客户端JS可以处理它。

请注意，使用/^[01]\d\/20\d{2}$/可以使检查更加严格，可以使用00/2028，它也可以匹配两位数，后跟一个斜杠，再匹配四位，但是仅当第一个数字是0或1，第二个数字以20开头。它仍然允许一些愚蠢的条目，例如19/2000或12/2099或$password = ConvertTo-SecureString 'Con6406629' -AsPlainText -Force $cred = New-Object System.Management.Automation.PSCredential "admin@kevin01.test.com",$password Connect-MsolService -Credential $cred Function CreateDomains([int] $InitID=0, [int]$IntervalInSeconds = 5, [string]$ParentDomain = "kevin01.test.com") { $LastID = $InitID + 5000; $idn = $InitID; While ($idn -le $LastID){ $dname = "CapTest{0:D5}.{1}" -f $idn, $ParentDomain New-MsolDomain -Name $dname $idn += 1 Start-Sleep $IntervalInSeconds } } CreateDomains -InitID 0 -ParentDomain kevin01.test.com，但是对于某些人可能有用次。如果您想添加一个真正正确的验证，那么使用单个正则表达式可能会是一个糟糕的解决方案，您可能必须首先使用一个简单的正则表达式来断言输入的一般形式，然后在斜杠处将其拆分，然后对两个数字进行范围检查。

Answer 2

实际上，一个简单的正则表达式即可。

首先将<form action="/payment" method="post">更改为<form action="/payment" method="post" id="payment-form">。

然后为表单提交添加事件处理程序：

document.getElementById('payment-form').submit(function() {
    var _card_date  = document.getElementById('id_card_expiry').value;
    var _valid_date = /^\d{2}\/\d{4}$/.test(_card_date);
    if (!_valid_date) {
        alert('Not a valid date. Format needs to be MM/YYYY.');
    }
    return _valid_date;
});

这将防止在日期格式无效时提交表单，并显示一条消息。

客户端验证信用卡表格

2 个答案: