0

我有一个我认为是一个简单的问题，但我被困住了：

我正在尝试验证输入字段中的信用卡号。

我有一个 switch 语句，它选择信用卡的类型，并根据检测到的卡执行验证功能。

问题是，我正在努力在我的卡验证函数中插入一个表示实时卡号的变量（当文档加载时，该字段为空）。

这是HTML：

<form name="cardDetailsFrom">
<label>Enter Card Number</label>
<input type="text" id="cardNumber" name="cardNumber" />
</form>

这是我的 jQuery：

$("#cardNumber").keyup(function(){
var cardNumber = $(this).val();
});


function validateAmericanExpress(){
   if(cardNumber==//Rest of code doesn't work because can't pick up the local variable
   };

jQuery 新手将不胜感激任何帮助。我试图避免使用标准插件。谢谢！

4

2 回答 2

3

这不是 jQuery 特定的，它只是基本的 Javascript 函数调用。

$('#cardNumber').on('keyup',function(){
    validateAmericanExpress(this.value);
});

function validateAmericanExpress(cardNumber){
    if(cardNumber === // whatever, now the if logic will work
}

基本上，您使用每个 keyup 上的值调用函数，并将值传递给函数cardNumber以在该函数中使用。

这比使用大范围变量要好，因为它不需要从浏览器分配缓存，从而提高了效率和速度。更重要的是，它有助于避免可能的冲突（多个项目设置全局变量冲突）并使代码更具可读性和更易于维护。

有效利用可能的回报

您甚至可以使代码的位置更合适，如下所示：

$('#cardNumber').on('keyup',function(){
    if(validateAmericanExpress(this.value)){ // this checks if the call returned true
        // happy times
    } else {
        // show error message that says invalid
    }
});

function validateAmericanExpress(cardNumber){
    if(cardNumber === 'whatever'){
        return true;
    } else {
        return false;
    }
}

或者更好的是，使用三元！

$('#cardNumber').on('keyup',function(){
    validateAmericanExpress(this.value) ? alert('correct') : alert('error');
});

function validateAmericanExpress(cardNumber){
    cardNumber === 'whatever' ? return true :  return false;
}

超高效状态！如果您想了解有关三元/条件运算符的更多信息，请查看此参考。

使功能更具可扩展性

最后，您的卡号验证器可能只是检查其特定的数字序列，对吗？您可以在没有函数调用的情况下做到这一点：

$('#cardNumber').on('keyup',function(){
    var regex = '/^3[47][0-9]{13}$/';
    regex.test(this.value) ? alert('correct') : alert('error');
});

那是为了测试AmEx。如果您正在测试各种信用卡，您可以使用带参数的函数，并使其疯狂泛型！

$('#cardNumber').on('keyup',function(){
    validateCreditCard(this.value),'amex') ? alert('correct') : alert('error');
});

function validateCreditCard(cardNumber,type){
    var regex;

    switch(type){
        case 'amex':
            regex = '/^3[47][0-9]{13}$/';
            break;
        case 'visa':
            regex = '/^4[0-9]{12}(?:[0-9]{3})?$/';
            break;
        case 'mastercard':
            regex = '/^5[1-5][0-9]{14}$/';
            break;
        default:
            regex = '/d{16,17}$/'; // just checking it is all numeric and appropriate length 
    }

    return regex.test(cardNumber);
}

这将允许您单方面测试所有信用卡，特别是如果不是像'amex'您使用单选按钮选择的值那样传递字符串时。如果您想了解有关所有卡片的正则表达式字符串的更多信息，请查看此参考。

于 2013-05-07T16:25:45.347 回答
0

在范围内使用 var 将其限制在该范围内

使用 PlantTheIdea 的答案，或者只是删除 var 并制作一个新的var cardNumer;外部

于 2013-05-07T16:26:57.033 回答