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

Posted 2023-05-09

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

【英文标题】：How to allow only Credit/Debit card number format in ASP.NET textbox

【发布时间】：2017-12-19 05:44:45

【问题描述】：

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

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

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

【参考方案1】：

我强烈建议您不要重新发明自行车并使用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"/>

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

【参考方案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 -->

【参考方案3】：

使用原生 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