javascript - 如何更改输入卡号的格式？

Question

我有这个样本:

link

代码 HTML:

<input type="text" name="card_number" id="card_number" class="disbaled_cc required-input valid" maxlength="16" placeholder="xxxx-xxxx-xxxx-xxxx">

代码 JS:

function cardFormat(){
    var format_card = $(this).val().replace(/(\d{4})(\d{4})(\d{4})(\d{4})/, "$1-$2-$3-$4");
    if ($(this).val() == '' || $(this).val().match(format_card) || $(this).val().length == 0) {
        console.log("invalid");
    }else{
        console.log("valid");
    }
}

$("#card_number").on('blur change', function () {
        cardFormat();
    });

我想按照以下格式安排用户输入的内容

例如，如果用户键入 so 以恢复下一个表单:

1234567891091234 ---> 1234-5678-9109-1234

如果用户存在并写出正确的形式，就保持这种状态

1234-5678-9109-1234 ---> 1234-5678-9109-1234

在这种情况下，19 个字符(卡号最多应有 16 个)。 我们如何解决这个问题？

如果您有什么不明白的地方，请告诉我，我会回来提供更多信息。

你能告诉我我的功能有什么问题吗？

提前致谢!

Answer 1

问题是 $(this) 这不是您认为的元素，即 window 并且您没有分配新值。

更改为:

function cardFormat() {
  if ($(this).val().length > 4 && $(this).val().indexOf('-') === -1) {
    var format_card = $(this).val().replace(/(\d{4})(\d{4})(\d{4})(\d{4})/, "$1-$2-$3-$4");
    $(this).attr('maxlength', 16);
    $(this).val(format_card);
    if ($(this).val() == '' ||
      $(this).val().match(format_card) ||
      $(this).val().length == 0) {
      console.log("invalid");
    } else {
      console.log("valid");
    }
  }else{
    $(this).attr('maxlength', 19);
  }
}

$("#card_number").on('input blur', cardFormat); //<--use the function as a callback.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="card_number" id="card_number" class="disbaled_cc required-input valid" maxlength="16" placeholder="xxxx-xxxx-xxxx-xxxx">

---

另一种方法是在函数中传递元素:

function cardFormat($el) { // <---get the element here $el is referring to $(this)
  if ($el.val().length > 4 && $el.val().indexOf('-') === -1) {
    var format_card = $el.val().replace(/(\d{4})(\d{4})(\d{4})(\d{4})/, "$1-$2-$3-$4");
    $el.attr('maxlength', 16);
    $el.val(format_card);
    if ($el.val() == '' ||
      $el.val().match(format_card) ||
      $el.val().length == 0) {
      console.log("invalid");
    } else {
      console.log("valid");
    }
  } else {
    $el.attr('maxlength', 19);
  }
}

$("#card_number").on('blur change', function() {
  cardFormat($(this)); // <----pass the element here
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="card_number" id="card_number" class="disbaled_cc required-input valid" maxlength="16" placeholder="xxxx-xxxx-xxxx-xxxx">