如何只允许信用卡/借记卡号码格式在ASP。网框

I have to allow only Debit/Credit card number format in asp.net textbox. Below is a sample screenshot-

我只允许在asp.net文本框中使用借记卡/信用卡号格式。下面是一个截图示例

Please let me know how to do this with asp.net textbox and I don't have to use validators.

请告诉我如何使用asp.net文本框，我不需要使用验证器。

Note: I only have to allow numbers and after every 4 numbers there should be a hyphen(-).

注意:我只允许数字，在每4个数字之后应该有一个连字符(-)。

3 个解决方案

#1

I would strongly recommend you not to reinvent the bicycle and use jQuery inputmask plugin which will let you do the following:

我强烈建议你不要重新发明这款自行车，使用jQuery inputmask插件，它可以让你完成以下工作:

$("input").inputmask({ 
  mask: "9999 9999 9999 9999",
  placeholder: ""
});

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

Note that in this code I assumed that card number consists of 4 groups of 4 digits each, and it is not always true - it depends on expected cards' payment systems, country etc.
You can easily achieve any result by adding or removing digits in mask.

注意，在这段代码中，我假设每个卡号由4组4位数字组成，而且它并不总是正确的——它取决于预期的卡的支付系统、国家等。

#2

Using vanilla javascript

使用香草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
}

#3

You can do the following:

你可以做以下事情:

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

#1