HTML input - multiple patterns's join not working

I have the below section in my HTML,

<input type="text" #version tabindex="1" class="form-control" id="version" name="version" placeholder="" [(ngModel)]="application.version"
                                    required minlength="1" pattern="\d{1,3}|\d{1,3}.\d{1,4}|\d{1,3}.\d{1,4}.\d{1,4}">

Basically, I want the pattern of my variable to meet either of the following 3 patterns:

• 1.0
• 1.0
• 1.0.0

However it seems the join "|" doesn't work here. The wrong pattern like "1.abc.def" will still be validated successfully. Any idea?

Thanks