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
}

基本的に、キーアップごとに値を指定して関数を呼び出し、その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 cardNumer;外部を作成してください

于 2013-05-07T16:26:57.033 に答える