jQuery 验证，仅限数值答案

【问题标题】：jQuery Validation, Numeric Value OnlyjQuery 验证，仅限数值
【发布时间】：2013-03-05 23:52:08
【问题描述】：

我正在尝试验证表单输入值。下面的函数状态是输入的值是一个低于 150 的数字，显示错误。正常工作。但是，我想添加它。如果该值包含除数值以外的任何值和/或小于 150 的值，则显示错误...

如何修改？

if ($('.billboard-height').val() < 150) {
    $('.sb-billboardalert').fadeIn(600);
}

【问题讨论】：

你为什么不阻止除数字以外的任何输入，这样他们就不能按 0-9 以外的任何内容

标签： javascript jquery

【解决方案1】：

由于无论如何您都应该在服务器端进行更彻底的验证，因此您可以使用parseInt 或parseFloat，具体取决于您期望的值类型。然后检查结果是否实际上是一个数字，并且它是否也符合您的约束：

var number = parseFloat($('.billboard-height').val()); // or parseInt depending on expected input
if (isNaN(number) || number < 150) {
    $('.sb-billboardalert').fadeIn(600);
}

编辑：

根据您的 cmets，您正在进入正则表达式领域。我认为您只需要一个自然数（并且 parseInt/parseFloat 忽略尾随非数字字符（如 px、em 等）的方式并不好）。怎么样：

var val = $('.billboard-height').val();
var number = parseInt(val, 10);
if ( ! val.match(/^[0-9]{3,4}$/) || number < 150) {
    $('.sb-billboardalert').fadeIn(600);
}

这应该只允许自然数 150-9999。

【讨论】：

我喜欢这个！干净简单！
简而言之，.billboard-height 是高度的像素值......但我只想通过文本输入输入数字，因为 px 是单独添加的。例如，您的代码会阻止某些输入 460px，但不会显示 $('.sb-billboardalert').fadeIn(600);。仅当值低于 150
我想阻止人们在文本字段中输入px, %, or em等。
@MikeBarwick - 不确定 SO 是否会自动通知您所做的修改，但我添加了一个希望能达到目的的内容。

【解决方案2】：

我建议使用正则表达式：

var intRegex = /^\d+$/;
var floatRegex = /^((\d+(\.\d *)?)|((\d*\.)?\d+))$/;

var str = $('#myTextBox').val();
if(intRegex.test(str) || floatRegex.test(str)) {
   alert('I am a number');
   ...
}

或者按照@Platinum Azure 的建议使用单个正则表达式：

var numberRegex = /^[+-]?\d+(\.\d+)?([eE][+-]?\d+)?$/;
var str = $('#myTextBox').val();
if(numberRegex.test(str)) {
   alert('I am a number');
   ...
}

参考：checking if number entered is a digit in jquery

【讨论】：

那些正则表达式似乎过于复杂...要测试一个 int，您只需确保此正则表达式上没有匹配项：[^0-9-]。

【解决方案3】：

不要忘记 parseInt() 中的 radix 参数：

if (parseInt($('.billboard-height').val(), 10) < 150) {

这可能比使用正则表达式更快。正则表达式并不以速度快而著称，但它们非常强大。对于这种情况，这可能有点矫枉过正。

【讨论】：

【解决方案4】：

你可以试试HTML5's built in form validation:

<input type="number" min="150">

browser support is still pretty shakey though

【讨论】：

【解决方案5】：

输入或选择中的任何值都将是 javascript 中的字符串。您需要使用parseInt() 才能使用> 或< 等运算符。如果您使用== 与if ($('.billboard-height').val() == "150") 之类的字符串进行比较，则可以使用==

【讨论】：

【解决方案6】：

尝试 parseInt 和 isNaN 函数检查值是否为数字且小于150：

var intVal = parseInt($('.billboard-height').val());
if(!isNaN(intVal)){ //not Number
    if (parseInt($('.billboard-height').val()) < 150) { //not less than 150
        $('.sb-billboardalert').fadeIn(600);
    }
}

【讨论】：

【解决方案7】：

如果您需要支持浮点数，您可以使用以下方法检查变量是否有效：

function isNumber (n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

var val = $('.billboard-height').val();
if (isNumber(val) && parseFloat(val) < 150) {
    $('.sb-billboardalert').fadeIn(600);
}

如果只需要支持整数，请使用parseInt(n, 10)，其中 10 是字符串转换为的基数。

var val = parseInt($('.billboard-height').val(), 10);
if (val && val < 150) {
    $('.sb-billboardalert').fadeIn(600);
}

【讨论】：

【解决方案8】：

// Displays an alert if s contains a non-numeric character.

function alertForNonNumeric(s) {
    var rgx = /[^0-9]/;
    if (s.search(rgx) !== -1) {
        alert("Input contains non-numeric characters!");
    }
}

JS Fiddle here

注意：如果您还想检查负整数，可以在正则表达式中添加减号：

function alertForNonNumeric(s) {
    var rgx = /[^0-9-]/;
    if (s.search(rgx) !== -1) {
        alert(s + " contains non-numeric characters!");
    }
}

【讨论】：

【解决方案9】：

我使用这个解决方案，我觉得它非常优雅 - 没有警报，用户实际上无法输入非数字字符。

这是 jQuery 示例：

function digitsOnly(){
    // extract only numbers from input    
    var num_val = $('#only_numbers').val().match(/\d+/);
         $('#only_numbers').val(num_val);
    }

你的html：

<input type="text" name="only_numbers" id="only_numbers" on oninput="digitsOnly();"/>

【讨论】：