JavaScriptを使用してHTML入力の特定の文字のみを許可する

Question

テキストボックスに数値入力のみを受け付けるJavaScriptおよびjQueryコードをいくつか記述しました。 しかし、これでは不十分です。入力を特定の数値に制限する必要があります。

このテキストボックスはSSN番号（スウェーデン語SSN）を扱う必要があり、19または20から始める必要があります。これらの番号から始めるようにしたいが、これに制限することはできません。

 $('input.SSNTB').keydown(function (event) { 
      var maxNrOfChars = 12; 
      var ssnNr = $('input.SSNTB').val();   
     if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || 
     // Allow: Ctrl+A 
     (event.keyCode == 65 && event.ctrlKey === true) || 
     // Allow: home, end, left, right 
     (event.keyCode >= 35 && event.keyCode <= 39)) { 
      // let it happen, don't do anything    
      return; 
     } 
     else {    
      // Ensure that it is a number and stop the keypress 
      if (((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105))) { 
       console.log("if-1"); 
       event.preventDefault(); 
      } 
      if (event.shiftKey == true) { 
       console.log("if-3"); 
       event.preventDefault(); 
      } 
      //rules to make sure the textbox starts with correct number     
      if (event.keyCode != 49 || event.keyCode != 50 || event.keyCode != 97 || event.keyCode != 98) { 
       console.log("if-4, Keycode:" + event.keyCode); 
       event.preventDefault(); 
      } 
     } 
    }); 

これをテストするために最後のif-caseが実行されます。それは計画どおりに実行されますが、それはそのために構築された入力文字を制限しません。

ヒントやアイデアはありますか？

Answer 1

正規表現を使用して、数字とダッシュだけを入力するようにユーザーを制限できます。ここで

//bind event handler to the `keyup` event so the value will have been changed 
$('.SSNTB').on('keyup', function (event) { 

    //get the newly changed value and limit it to numbers and hyphens 
    var newValue = this.value.replace(/[^0-9\-]/gi, ''); 

    //if the new value has changed, meaning invalid characters have been removed, then update the value 
    if (this.value != newValue) { 
     this.value = newValue; 
    } 
}).on('blur', function() { 

    //run some regex when the user un-focuses the input, this checks for the number ninteen or twenty, then a dash, three numbers, a dash, then four numbers 
    if (this.value.search(/[(20)(19)](-)([0-9]{3})(-)([0-9]{4})/gi) == -1) { 
     alert('ERROR!'); 
    } else { 
     alert('GOOD GOING!'); 
    } 
}); 

はデモです：：正規表現を使用すると、例えば、それらは、テキスト入力に貼り付けることができますし、それが正常に検証され、ユーザーはより自然に入力と対話できるという利点があり http://jsfiddle.net/BRewB/2/

。なお、 .on()はjQuery 1.7の新機能で、この場合は.bind()と同じです。

Answer 2

正規表現を使用する必要があります。正規表現は、この種の状況に役立ちます。

は、私が最後に来た解決策を投稿しますhttps://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/RegExp

Answer 3

思想から、それについては、こちらをご覧ください。私は実際に私が上に投稿した同様のコードを保持し、このRegExpを隠していませんでした。行われたことは、このテキストボックスに焦点を当てた後の数字が失われていることを確認することでした。それはあなたが通知され、有効な番号を記入することを強制されていることを意味します。

$('input.SSNTB').focusout(function() { 
    var ssnNr = $('input.SSNTB').val(); 
    var ssnNrSub = ssnNr.substring(0, 2); 
    //console.log(ssnNrSub); 

    //checks for correct lenggth 
    if (ssnNr.length < 12) { 
     $('div.SSNHelp label.Help').html('SSN to short. Please fill in a complete one with 12 numbers'); 
     setTimeout(function() { 
      $('input.SSNTB').focus(); 
     }, 0); 
     validToSave = false; 
     return; 
    } 

    //checks so it starts correct 
    if (ssnNrSub != "19" && ssnNrSub != "20") { 
     $('div.SSNHelp label.Help').html('The SSN must start with 19 or 20. Please complete SSN.'); 
     setTimeout(function() { 
      $('input.SSNTB').focus(); 
     }, 0); 
     validToSave = false; 
     return; 
    } 

    $('div.SSNHelp label.Help').html(''); 
    validToSave = true; 
    }); 

Works for me。 ：]