How to create expression to allow just a few characters?

Asked

Viewed 524 times

3

I am creating an input where an onKeyUp checks the entered characters, it should validate the following:

  • No maximum number of characters
  • The first digit should only be numbers [0-9]
  • The code is composed of alphanumeric digits and only the characters / (bar) and - (hyphen), and not always have all of them.

valid:

260509
8605/05
5ABC605/05
756574-7
88BS-AS0

Invalid:

A8605/05
B756574-7

Using the expression:

/^\d([\w\/-]*)/gm

I can match the values correctly, but I need to insert it in the function:

this.value=this.value.replace(/^\d([\w\/-]*)/gm,'')

But the function should be reversed, when not match, replace by " ".

javascript regex
  • 1

    Is it a good idea to do this on keyUp? See that question which I posted on Soen a long time ago, and that answer in particular. That said, it is possible yes to make an expression like the one you want, I will post soon as an answer.

  • 1

    I don’t think it’s @mgibsonbr, but it’s customer requirement.

  • I’m a little confused by this one m - the input is a set of codes separated by line breaks, or the replacement will occur row by row?

  • I believe that the m can be removed as the value will be a single code entered in the input.

  • Effecting the substitution of the method replace for match, the expected result has occurred but I’m not sure if it is the ideal solution: this.value=this.value.match(/^\d([\w\/-]*)/g);

  • It is a possibility, but if there is an invalid character in the middle of the path it will split the field in two. Ex.: 123$567

  • He did not allow to insert a character outside the match, did not understand how but worked.

  • Try copying the above example and pasting it into the field with your code. It will be replaced by 123, and not by 123567.

Show 3 more comments

1 answer

3


The problem of validating while the user type is that it is necessary not that the whole field is valid but that a prefix do the same (because otherwise the user would never be able to finish typing unless he pasted the integer value with Ctrl+V), and only at the end a validation of the complete field can be done. In your case however it is easy, since only a single digit is required and the others are optional:

document.querySelector("input").onkeyup = function(e) {
    this.value = this.value.replace(/^\D.*|[^\w\/-]/gm,'');
}
<input>

This code deletes the whole field if the first digit is not a number, or deletes each specific character that is not in the given set (i.e. its allowed character set, denied). If the user pasting the field from somewhere else, only the valid characters will remain.

The main disadvantage of this method is that it does not preserve the Caret. It would be highly desirable that the user could return with the arrows and correct an incorrect excerpt, but this would complicate things a bit.

Note: this answer assumes that only the incorrect excerpt should be deleted in the substitution, not the entire code - otherwise, if the user was typing and accidentally entered with an invalid character, and the whole field disappeared, I think he would not be very satisfied...

  • The solution works correctly, except in the blessed IE. Unfortunately I need it to work in it too. When the value entered in the input does not match, it inserts NULL into the field and does not even allow deleting. You would know why this occurs?

  • @Marcelodeandrade Unfortunately I only have IE11 to test, and that I know from IE9 the regular expressions work smoothly. I don’t know how to make it work on IE8 or earlier, the way can be to test the return value for NULL and, if it is, do not replace (being a browser in old version, I believe your client will accept the limitation).

Browser other questions tagged javascript regex

You are not signed in. Login or sign up in order to post.