Question

我有这个样本：

代码HTML：

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

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

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

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

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">

Answer 2

已更新：使用a-Z或数字等字符对其进行测试。空格和“ - ”将被自动删除。

$('.wrapper').on('input', 'input[name="code"]', formatCode);

function formatCode() {

  var $input = $(this);
  var $check = $input.parent().find('.check');
  
  $input.val($input.val().replace(/ /g, '')); // removes all whitespaces
  $input.val($input.val().replace(/-/g, '')); // removes all typed dashes
  $input.val($input.val().replace(/(\d{4})(\d{4})(\d{4})(\d{4})/, "$1-$2-$3-$4")); // your validation
  var check = $input.val().match(/-/g) || [];  
  
  if($input.val().length === parseInt($input.attr('maxlength')) && check.length === 3) {
  	$check.html("valid");
  	return false;
  }
  
  $check.html('invalid'); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <p>
    Our goal: 1111-1111-1111-1111<br>
  </p>
  <input name="code" maxlength="19">
  <span class="check"></span>
</div>

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

2 个答案: