これは 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'
、ラジオ ボタンの選択の値を使用するように文字列を渡す代わりに使用する場合はそうです。すべてのカードの正規表現文字列について詳しく知りたい場合は、このリファレンスを参照してください。