Создание глобальных переменных jQuery для проверки формы ввода

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
}

По сути, вы вызываете функцию со значением в каждом ключе и передаете значение в функцию как 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' Вы используете значение выбора переключателя. Если вам нужна дополнительная информация о строках регулярных выражений для всех карт, ознакомьтесь с этой ссылкой.

Answer 2

Использование переменной var внутри области действия ограничивает ее

используйте ответ PlantTheIdea или просто удалите var и создайте новый var cardNumer; вне