Check if input field can only consist of lower and uppercase letters, numbers and the characters . and _

Question

How can I make sure an input field only consist of lower and uppercase letters, numbers and the characters . and _ just in HTML. I have tried using the pattern attribute, however I am not sure whether this is correct or not:

<input
          name="username"
          type="text"
          pattern="[a-z][A-Z][0-9][.][_]"
          placeholder="Username"
        />

Thank you for your help.

Answer 1

Your pattern requires one character of each type, in order. If you want to match all the characters, put them in a single character class, and quantify it with *

pattern="[a-ZA-Z0-9._]*"