如何在ASP.NET文本框中仅允许信用卡/借记卡号格式

Question

我必须在asp.net文本框中仅允许借记卡/信用卡号码格式。以下是截图示例 -

请告诉我如何使用asp.net文本框执行此操作，我不必使用验证器。

  

注意：我只需要允许数字，并且每4个数字之后   应该是连字符（ - ）。

Answer 1

我强烈建议您不要重新发明自行车并使用jQuery inputmask插件，它可以让您执行以下操作：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.js"></script>

<input type="text"/>

{{1}}

请注意，在此代码中我假设卡号由4组4位数组成，并不总是正确的 - 这取决于预期的卡的支付系统，国家等。
您可以通过在掩码中添加或删除数字来轻松实现任何结果。

Answer 2

您可以执行以下操作：

     <input type="text" onkeypress="return allowNumbersAndHyphen(event)">

  function allowNumbersAndHyphen(evt) {
  var charCode = (evt.which) ? evt.which : event.keyCode;
  //allowing numbers, left key(37) right key(39) backspace(8) delete(46) and hyphen(45)
  var length = $('input').val().length;
  if (((charCode == 37 || charCode  == 39 || charCode == 8 || charCode == 46 || charCode == 45) || !(charCode > 31 && (charCode < 48 || charCode > 57))) && length <19)
  {
    return true;
  }
  else{
     return false;
  }

  }
 //put hyphens atomatically
$(document).ready(function(){

$('input').on('keypress', function() {
  var temp = $(this).val();
  if (temp.length == 4 || temp.length == 9 || temp.length == 14) {
    $('input').val(temp + '-');
  }
});


$('input').on('blur', function() {
  var regex = /^[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{4}$/;
  var cardNumber = $(this).val();
  if(regex.test(cardNumber)) {
    //success
    alert('successful');
  }
  else {
    //show your error
    alert('Error');
  }
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- begin snippet: js hide: false console: true babel: false -->

Answer 3

使用vanilla javascript     

document.getElementById('inp1').onkeypress = verify;
console.clear();

function isKeyValid(key) {
  if(key > 47 && key < 58) return true
  else if(key === 45) return true;
  else return false;
}
function isValidCard(arr, isDash) {
  const last = arr[arr.length - 1];
  if(last.length === 4 && !isDash) return false;
  else if(isDash && last.length !== 4) return false;
  else if(isDash && arr.length === 4) return false;
  else return true;
}
function verify(e) {
  const key = e.keyCode || e.which;
  const isDash = key === 45;
  const val = e.target.value;
  const input = val.split('-');
  if (!isKeyValid(key) || !isValidCard(input, isDash)) {
    return e.preventDefault();
  }
  // ...do something
}