在按键上检查正则表达式的表达

Question

I would like to create my own plugin (without use any external libraries - it's for learning purpose) to validate text typed by user dynamically in regex test function.

In example I have regex pattern:

^.{2}$

And javascript function

$('#textbox').bind("keypress", function (event) {
    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
    if (!regex.test(key)) {
        event.preventDefault();
        return false;
    }
});

Now, I want to type two dots into textbox, but after first keypress is fired, one dot doesn't match to the pattern and nothing happens because event is prevented.

My question: Is it possible to check if currently typed text matches with regex pattern?

Answer 1

Your regex only accept two dots (..), but you're testing a single character!

var regex = new RegExp("^.{2}$");

$('#textbox').bind("keypress", function (event) {
    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
    if (!regex.test(key)) {
        event.preventDefault();
        return false;
    }
});

Wanna check current typed text when users finished typing? .. Look HERE

Answer 2

You can try keydown as it will trigger as soon as you press a key and before character is displayed in textbox. So if it doesnot match with the pattern you can return out.

Answer 3

$('#textbox').bind("keyup", function (event) {
    var user_input = getElementById ("your_input_id_here");
    if (!regex.test(user_input)) {
        return false;
    }
});

So, essentially you should use onkeyup instead and you should check the whole user input, not just the last key

Answer 4

var alpha = /[ A-Za-z]/;
var numeric = /[0-9]/; 
var alphanumeric = /[ A-Za-z0-9]/;

function validateKeypress(validChars) {
    var keyChar = String.fromCharCode(event.which || event.keyCode);
    return validChars.test(keyChar) ? keyChar : false;
}

The HTML will have to change to onkeypress="validateKeypress(alpha);"

Answer 5

var in_put = document.getElementById("in_put"),
key = null;

in_put.addEventListener("keydown", match_input);

function match_input(e){

    console.log("Key: "+e.key);
    key = e.key;
    console.log("Match: "+key.match(/a/i));//return array of match
    if(key.match(/a/i)){

        //code on succession.
    }else{

        //code on failure.
    }
}

Note: Change /a/i with your /pattern/ig. It only check for input is a/A.