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

时间:2014-09-10 11:40:34

标签: jquery regex

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

4 个答案:

答案 0 :(得分:0)

考虑这个例子: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');
}

答案 1 :(得分:0)

同意之前的评论。很容易挂钩到按键事件,以防止首先输入非数字字符,并且您不一定需要正则表达式。示例功能:

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

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

答案 2 :(得分:0)

在您需要输入数字的输入字段上,您可以执行以下操作。

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

答案 3 :(得分:0)

@Holybreath的积分,他指出了正确的方向。 在#submitguess附带的&#39;点击功能中你犯了一个错误。

在第一行中,您对值执行parseInt()。结果:字符串&#34; 77&#34;转换为数字 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);
    });
}