使用正则表达式验证 jquery 中的输入答案

【问题标题】：using regex to validate input in jquery使用正则表达式验证 jquery 中的输入
【发布时间】：2014-09-10 11:40:33
【问题描述】：

我有一个函数只接受来自文本框的整数输入。在对其调用 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);
    });
}

【问题讨论】：

为什么不忽略输入时的字符串文字？例如，如果我按“a”它会忽略它，但 0-9 很好；）
^[1-9][0-9]?$|^100$ 来自*.com/questions/13473523/…

标签： jquery regex

【解决方案1】：

感谢@Holybreath，他指出了正确的方向。在附加到#submitguess 的“点击”功能中，您犯了一个错误。

在第一行中，您对值执行 parseInt()。结果：string "77" 被转换为 number 77。之后在第二行中检查 initguessbeing a数字。当然是了，你自己算了！

您可以按如下方式简化代码：

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

【讨论】：

非常感谢它的工作......其他建议很有帮助，但我需要在这种情况下实施正则表达式，而你杀死了它。

【解决方案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');
}

【讨论】：

【解决方案3】：

同意之前的评论。很容易挂钩 keypress 事件以防止首先输入非数字字符，并且您不一定需要正则表达式。示例函数：

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)"

作为预防措施，验证服务器上的输入也是一个好主意。

【讨论】：

【解决方案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();
    }
});

【讨论】：