在输入中只允许使用字母，数字和连字符？

Question

I want to accept only letters, numbers, and hyphen (dash) in the input. in php, i do this:

if(!preg_match("/^[A-Za-z0-9-]+$/", $input)) {
    echo "Only letters, numbers, and hyphens are allowed.";
}

how can I achieve this same thing in vanilla javascript? if its not possible in pure javascript, how can i do it in jquery? thanks

Answer 1

Adapted from Sylvain's answer here: jQuery only allow numbers,letters and hyphens .

Note: jQuery is pretty much a wrapper for vanilla js to make a lot of common statements like Document.querySelectorAll() shorter, it's generally safe to assume that jQuery can be directly converted to vanilla js (I can't think of any examples off the top of my head where the jQuery functionality differs).

What you could do is select all the inputs in a form (or whichever you would like), then test their values against a regex (Sylvain used a regex that selects the inverse of the desired characters so that it would be true if there is an invalid character) and if it has any forbidden character prevent the form from submitting and do some other things asking the user to address the issue.

 document.getElementById("formWhitelistedChars").addEventListener("submit", function(e) { // Get all inputs in the form we specifically are looking at, this selector can be // changed if this is supposed to be applied to specific inputs var inputs = document.querySelectorAll('#formWhitelistedChars input'); var forbiddenChars = /[^az\\d\\-]/ig; // check all the inputs we selected for(var input of inputs) { // Just in case the selector decides to do something weird if(!input) continue; // Check that there aren't any forbidden chars if(forbiddenChars.test(input.value)) { // This line is just to do something on a failure for Stackoverflow // I suggest removing this and doing something different in application console.log('input ' + input.name + ' has forbidden chars.'); // Do stuff here // Prevent submit even propagation (don't submit) e.preventDefault(); return false; } } }); 

 <form id="formWhitelistedChars"> <input name="1" /> <input name="2" /> <button type="submit">Submit</button> </form> 

EDIT: Replaced 0-9 with \\d as @ibrahimmahrir mentioned in the comments

EDIT2: Changed input listeners to form submit

Answer 2

You can start a new regex using /{criteria}/{flags} . Your regex would translate to something like this:

/^[aA-zZ0-9-]+$/g.test(/* value to test here*/)