Question

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

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

我有一个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新手会非常感谢任何帮助。我试图避免使用标准插件。谢谢！

Answer 1

这不是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;
}

超级效率状态！如果您想了解有关三元/条件运算符的更多信息，请check out this reference。

使功能更具可扩展性

最后，您的cardnumber验证器可能只是检查它的特定数字序列是否正确？你可以在没有函数调用的情况下完成它：

$('#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'这样的字符串，而是使用单选按钮选择的值。如果您想了解有关所有卡片的正则表达式字符串的更多信息，请check out this reference。

Answer 2

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

使用PlantTheIdea的答案或只删除var并在外面创建一个新的var cardNumer;

为输入表单验证创建jQuery全局变量

2 个答案: