Cannot make regex working on HTML pattern attribute

Question

My regex works fine on regex101 and my regex is

[1-4]|(0)

But when I tried it on HTML input element's attribute it doesn't work as expected. My HTML is like below

<form action="/">
     <input type="text" id="usernum" name="usernum" pattern="[1-4]|(0)" title="1-4 and must include at leat one 0">
     <input type="submit">
</form>

I want users must enter one 0 along with the ranges digit.

Answer 1

The pattern attribute has to match the entire input.

([1-4]+0[0-4]*|[0-4]*0[1-4]+)+

The first alternative requires at least one digit 1-4 before a 0 , the second requires at least one digit 1-4 after a 0 . Then repeat it with + to allow more than one 0 .

DEMO