如何在ASP.NET文本框中僅允許信用卡/借記卡卡號格式

Question

我必須在asp.net文本框中僅允許借記卡/信用卡號碼格式。下面是一個示例screenshot-

請讓我知道如何使用asp.net文本做到這一點，我沒有使用驗證。

注：我只需要允許數字，並且在每4個數字之後 應該是連字符（ - ）。

Answer 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位，並不總是對的 - 這取決於預期卡的支付系統，國家等。
您可以通過添加或刪除掩碼中的數字輕鬆獲得任何結果。

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

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