使用正則表達式驗證jQuery中的輸入

Question

我有一個函數只接受來自文本框的整型輸入。在調用它的parseInt方法後，它仍然接受字符串後面的整數。我想知道如何實現一個正則表達式來過濾掉包含字符串的輸入。這是我的代碼。

var validate = function() { 
    $("#newgame").click(function() { 
     $("label").text("What's your guess."); 
     $("#guess").val(""); 
    }) 
    $("#submitguess").click(function() { 
     initguess = parseInt($("#guess").val(), 10); 
     if (isNaN(initguess) || initguess > 100 || initguess < 0 || typeof initguess === "string") { 

      $("label").text("Enter a valid format."); 

     } 

     else { 

      if (initguess === number) { 
       $("label").text("Waoh! You guessed right."); 
       $("#submitguess").hide("slow"); 
       // displaybar(diff); 
      } 
      else { 
       $("label").text("You are getting hot."); 
       // displaybar(diff); 
       feedback(initguess); 
      } 
     } 
     // var diff = (100 - Math.abs(number - initguess)); 
     // displaybar(diff); 
    }); 
} 

Answer 1

貸@Holybreath，他指出了正確的方向。 在#submitguess附帶的'click'功能中，您犯了一個錯誤。

在第一行中，你對值做了一個parseInt（）。結果：字符串「77」被轉換爲號碼 77. 之後在第二行中，您檢查initguess是一個數字。當然，它是，你自己使它成爲一個數字！

您可以簡化您的代碼如下：

var validate = function() { 
    $("#newgame").click(function() { 
     $("label").text("What's your guess."); 
     $("#guess").val(""); 
    }) 
    $("#submitguess").click(function() { 
     initguess = $("#guess").val(); // get the vaue 
     // check if initguess is not a number or not an integer between 0 and 100 
     if (typeof initguess !== 'number' || !(/^[1-9]\d?$/.test(initguess))) { 
      $("label").text("Enter a valid format."); // output the error-message 
      return; // return at this point prevents all following code from being executed 
     } // so you don't need the next 'else' statement anymore 

     if (initguess === number) { 
      $("label").text("Waoh! You guessed right."); 
      $("#submitguess").hide("slow"); 
      // displaybar(diff); 
     } 
     else { 
      $("label").text("You are getting hot."); 
      // displaybar(diff); 
      feedback(initguess); 
     } 
     // var diff = (100 - Math.abs(number - initguess)); 
     // displaybar(diff); 
    }); 
} 

Answer 2

考慮這個例子：http://jsbin.com/foyuve/1/

// text field 
var test = $.trim($('#test').val()); 

// check for only integer values 
if((/^[0-9]+[0-9]$/).test(test)) { 
    alert('int'); 
} 

Answer 3

與以前的評論表示贊同。很容易勾住按鍵事件以防止首先輸入非數字字符，並且您不一定需要正則表達式。例如功能：

function numericOnly(e) { 
    var ev = e ? e : window.event; 
    var code = ev.which || ev.keyCode; 
    if (ev.shiftKey) { 
     return false; 
    }   
    return ((code >= 48 && code <= 57) || code == 8 || code == 16 || code == 9 || code == 37 || code == 35 || code == 36); //also allow backspace, delete, tab, right and left arrows, home, end 
} 

}

在你的輸入，添加此屬性：

onkeypress="return numericOnly(event)" 

這也是驗證服務器作爲預防措施上輸入一個好主意。

Answer 4

在您的輸入字段需要數字只有你可以做這樣的事情。

HTML

<input type="text" class="validateNumber"> 

jQuery的

$(".validateNumber").on('keydown keyup click blue change', function (e) { 
    // Allow: backspace, delete, tab, escape, enter, space and , 
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 188, 32]) !== -1 || 
     // Allow: Ctrl+A 
     (e.keyCode == 65 && e.ctrlKey === true) || 
     // Allow: home, end, left, right 
     (e.keyCode >= 35 && e.keyCode <= 39)) { 
      // let it happen, don't do anything 
      return; 
    } 
    // Ensure that it is a number and stop the keypress 
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { 
     e.preventDefault(); 
    } 
});