html5 input type url validation with specific pattern and regex

Question

My client sent me a multiple patterns for the URL input field and a Regex to test it. how to add them to my input field.

https://..
https://.*/
http://*.*
http://./
http://www..
htpp://www.{}/
www..{}{}
www.{}./

and the Regex pattern is:

pattern="^(?:http(s)?:\\/\\/)?[\\w.-](?:\\.[\\w\\.-])[\\w-\\._~:/?#[\\]@!\\$&'\\(\\)\\*\\+,;=.]$"

Answer 1

If you're using HTML input tags, you can add your regex string as a pattern attribute.

In your example, the base input should look something like this:

<input type="text" id="email" name="email" pattern="?:http(s)?:\/\/)?[\w.-](?:\.[\w\.-])[\w-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]$">

You can find more information about using regex in HTML in this way here .