jQuery信用卡輸入格式

我想對信用卡輸入欄位使用 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,
        },
    },
});

它不會給出任何錯誤，但它也不起作用。

uj5u.com熱心網友回復：

我嘗試了以下順序，似乎一切正常，沒有任何問題：

function refineValue(event){
  const target = event.target;
  const value = target.value
  if(/^[A-Za-z] $/gi.test(value) == false){
    target.value = value.slice(0,-1)
  }
}

<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" oninput="refineValue(event)">
            </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>

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

標籤：javascript html 查询 验证 信用卡

上一篇：jQuery-隱藏類沒有用淡入淡出顯示

下一篇：ASP.NETCorejQueryPOST-盡管標題格式正確，但內容型別不正確