HTML5 input pattern for a 10 digit US phone number

Question

For an assignment, I was told to use the following regex in an HTML input pattern to validate a phone number, however no matter what I do I cannot get it to work. The browser just always throws an error saying it is invalid. I haven't heard back from my professor with an updated regex. Any help would be appreciated!

^\d{10}$|^(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}$

The valid phone numbers according to the provided regex would be:

1234567891

(123)4567891

(123) 4567891

(123)456-7891

(123) 456-7891

I have tried various different forms of the regex:

\d{10}|(\d{3} *)?\d{3}[ -]?\d{4}
\d{10}|(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}
\d{10}|(\d{3}[\s-]?)?\d{3}[\s-]?\d{4}
\d{10}\|(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}
\d{10}|\d{3}[\s-]?\d{3}[\s-]?\d{4}
\d{10}|(\d{3} *)?\d{3}[ -]?\d{4}