jQuery信用卡输入格式

Question

我想对信用卡输入字段使用 jQuery 验证。当我寻找它时，我看到大多数人通过额外的验证方法实现了这一点。

我尝试将此添加到我的代码中：

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/additional-methods.js"></script>

或此代码：

jQuery.validator.addMethod("lettersonly", function(value, element) {
  return this.optional(element) || /^[a-z]+$/i.test(value);
}, "Letters only please"); 

但是我收到了这个错误

这是版本问题吗，我使用jQuery 3.6版本，并尝试了1.7和1.9版本的验证插件。

注意：我确定我在添加jQuery cdn后使用了验证插件。我可以使用 jQuery 但不能使用 jQuery.validator 方法。

添加：我正在尝试将姓名-姓氏输入字段格式化为只有字母和空格。如果您也可以帮助我，我会很高兴。（或者是否有为信用卡输入的每个输入字段准备的插件。）

编辑：

我现在使用的表格。

<form id="cardForm">
    <div class="input-group">
        <div class="card-input-row row w-100 mt-5">
            <div class="col-12">
                <label for="card-number" class="mb-1 input-group-label">Card Number</label>
                <input id="card-number" pattern="\d*" maxlength="19" type="text" placeholder="••••  ••••  ••••  ••••" class="form-control w-100 shadow mb-3 input-group-inputs">
            </div>
            <div class="col-12">
                <label for="cardName" class="mb-1 input-group-label">Name</label>
                <input id="cardName" type="text" placeholder="••••••••  ••••••••" class="form-control w-100 shadow input-group-inputs mb-3">
            </div>
            <div class="row" style="padding-right: 0px ">
                <div class="col-5" style="padding-right: 0px; padding-right: 0px;">
                    <label for="card-date" class="mb-1 input-group-label">Expiration Date</label>
                    <input id="card-date" type="text" placeholder="MM/YY" class="form-control w-100 shadow input-group-inputs">
                </div>
                <div class="col-2"></div>
                <div class="col-5" style="padding-right: 0px; padding-right: 0px;">
                    <label for="card-cvc" class="mb-1 input-group-label">CVC</label>
                    <input id="card-cvc" type="text" placeholder="•••" class="form-control w-100 shadow input-group-inputs">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-6">
                <button class="btn btn-primary">Submit</button>
            </div>
        </div>
    </div>
</form>

并且给出的 jquery 示例添加如下：

$('#cardForm').validate({
    rules: {
        cardName: {
            required: true,
            lettersonly: true,
        },
    },
});

它没有给出任何错误，但它也不起作用。

Answer 1

我尝试了以下顺序，似乎一切正常，没有任何问题：

$("#cardName").on('input',function(event){
  const value = $(this).val();
  if (/^[A-Za-z]+$/gi.test(value) == false) {
    $(this).val(value.slice(0, -1));
  }
})

var month = 0;
$("#card-date").on('keypress',function(event) {
  if (event.charCode >= 48 && event.charCode <= 57) {
    if ($(this).val().length === 1) {
      $(this).val($(this).val() + event.key + "/");
    } else if ($(this).val().length === 0) {
      if (event.key == 1 || event.key == 0) {
        month = event.key;
        return event.charCode;
      } else {
        $(this).val(0 + event.key + "/");
      }
    } else if ($(this).val().length > 2 && $(this).val().length < 5) {
      return event.charCode;
    }
  }
  return false;
}).on('keyup',function(event) {
  if (event.keyCode == 8 && $("#card-date").val().length == 2) {
    $(this).val(month);
  }
})

<form id="cardForm">
  <div class="input-group">
    <div class="card-input-row row w-100 mt-5">
      <div class="col-12">
        <label for="card-number" class="mb-1 input-group-label">Card Number</label>
        <input id="card-number" pattern="\d*" maxlength="19" type="text" placeholder="••••  ••••  ••••  ••••" class="form-control w-100 shadow mb-3 input-group-inputs">
      </div>
      <div class="col-12">
        <label for="cardName" class="mb-1 input-group-label">Name</label>
        <input id="cardName" name="cardName" type="text" placeholder="••••••••  ••••••••" class="form-control w-100 shadow input-group-inputs mb-3">
      </div>
      <div class="row" style="padding-right: 0px ">
        <div class="col-5" style="padding-right: 0px; padding-right: 0px;">
          <label for="card-date" class="mb-1 input-group-label">Expiration Date</label>
          <input id="card-date" type="text" placeholder="MM/YY" class="form-control w-100 shadow input-group-inputs">
        </div>
        <div class="col-2"></div>
        <div class="col-5" style="padding-right: 0px; padding-right: 0px;">
          <label for="card-cvc" class="mb-1 input-group-label">CVC</label>
          <input id="card-cvc" type="text" placeholder="•••" class="form-control w-100 shadow input-group-inputs">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-6">
        <button class="btn btn-primary">Submit</button>
      </div>
    </div>
  </div>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.19.1/additional-methods.min.js"></script>