使用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; 
    }); 

适合我。 ：]