Проверка на стороне клиента для формы кредитной карты

Question

Я пытаюсь интегрировать форму кредитной карты, в которой я использовал бы учетные данные, заполненные во входных данных, для отправки в PayPal API с помощью метода post и получения ответа обратно.

Я пытался написать проверку на стороне клиента и столкнулся спроблема заключается в написании проверки для даты истечения срока, где мне нужен формат месяца / года (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

На самом деле подойдет простое регулярное выражение.

Сначала измените <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;
});

это предотвратит отправку формы, когда дата не в правильном формате, и выдаст сообщение.

Answer 2

Следующее регулярное выражение JS будет соответствовать двум цифрам, за которыми следует косая черта, за которой следуют четыре цифры: /^\d{2}\/\d{4}$/.Вы можете использовать веб-сайт regex101 , чтобы увидеть объяснение его структуры.

Вам определенно не нужен вызов Ajax только для такого рода проверки.JS на стороне клиента может позаботиться об этом.

Обратите внимание, что было бы довольно "свободно" сделать проверку немного более строгой, используя вместо этого /^[01]\d\/20\d{2}$/, что также соответствует двум цифрам, за которыми следуеткосая черта, за которой следуют 4 цифры, но только в том случае, если первая цифра равна 0 или 1 и когда второе число начинается с 20. Это по-прежнему допускает некоторые глупые записи, такие как 00/2028 или 19/2000 или 12/2099, ноэто может быть полезно несколько раз.Если вы хотите добавить действительно правильную проверку, выполнение этого с одним регулярным выражением, вероятно, будет плохим решением, и вам, вероятно, придется сначала использовать простое регулярное выражение для утверждения общей формы ввода, а затем разделить его на косую черту,и сделайте некоторые проверки диапазона двух чисел.