信用卡表单的客户端验证

Question

我正在尝试集成信用卡表单，我将使用填写在输入中的凭据通过 post 方法发送到 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>

我用来将数据发布到 API 的 ajax 调用

<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}$/ 代替，使检查更具限制性几乎是“免费”的，它也匹配两个数字后跟斜线后跟 4 位数字，但仅限于第一个数字是 0 或 1，当第二个数字以 20 开头时。它仍然允许一些愚蠢的条目，如 00/2028 或 19/2000 或 12/2099，但有时它可能有用。如果您想添加一个真正正确的验证，使用单个正则表达式可能不是一个糟糕的解决方案，您可能必须首先使用一个简单的正则表达式来断言输入的一般形式，然后在斜杠处拆分它，并对这两个数字进行一些范围检查。

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;
});

当日期格式不正确时，这将阻止表单提交，并给出一条消息。