HTML5 Regex Pattern Validation

Question

The validation I need is the following AZ, az, 0-9 , no trailing/leading whitespace, -._ only once non-trailing/leading

Till now I have the following:

<input type="text" pattern="^\S[a-zA-Z0-9]*\S$">

This takes care of the leading trailing whitespace and AZ,az,0-9, but it needs minimum 2 characters

Then I thought of something like this for the symbols -._

<input type="text" pattern="^\S[a-zA-Z0-9]*[\-_+]{,1}\S$">

But no luck there. Any ideas?

Answer 1

Since pattern attribute uses the same syntax as JavaScript, you can use the following regex:

 <input type="text" pattern="^(?=..)[a-zA-Z0-9]*([_.-][a-zA-Z0-9]*)?$"> 

^{You can test with the snippet above by typing something in, then change focus from the input.}

The input can only contain a-zA-Z0-9 and at most once of _.- . The look-ahead in front (?=..) checks that there are at least 2 characters.