我必須在asp.net文本框中僅允許借記卡/信用卡號碼格式。下面是一個示例screenshot-如何在ASP.NET文本框中僅允許信用卡/借記卡卡號格式
請讓我知道如何使用asp.net文本做到這一點,我沒有使用驗證。
注:我只需要允許數字,並且在每4個數字之後 應該是連字符( - )。
我必須在asp.net文本框中僅允許借記卡/信用卡號碼格式。下面是一個示例screenshot-如何在ASP.NET文本框中僅允許信用卡/借記卡卡號格式
請讓我知道如何使用asp.net文本做到這一點,我沒有使用驗證。
注:我只需要允許數字,並且在每4個數字之後 應該是連字符( - )。
我強烈建議你不要重新發明自行車和使用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位,並不總是對的 - 這取決於預期卡的支付系統,國家等。
您可以通過添加或刪除掩碼中的數字輕鬆獲得任何結果。
你可以做到以下幾點:
<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 -->
使用香草的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
}