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

Question

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

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

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

Answer 1

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

 $("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.

Answer 2

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

Answer 3

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